基于vue+echarts 数据可视化大屏展示[附源码]「建议收藏」
2023-06-13 09:12:32 时间
大家好,又见面了,我是你们的朋友全栈君。
获取 ECharts 的路径有以下几种,请根据您的情况进行选择:
1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本;开发环境建议下载源代码版本,包含了常见的错误提示和警告。 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。 3) 或者通过 npm 获取 echarts,npm install echarts –save,详见“在 webpack 中使用 echarts” 由 cdn 引入,你可以在 cdnjs,npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。
项目模板源码在文章最后哦~
项目效果展示
这篇介绍如何在vue中引入echarts: 1.先安装依赖
npm install echarts --save
2.1全局引入main.js中配置(不推荐使用,会导致包过大,冗余多)
import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //挂载在原型,组件内使用直接this.$echarts调用
2.2组件内按需引入 ( 推荐使用 ) 这种方式很简单,在需要引入图表的组件引入,例如如下引入柱状图。
//在组件引入基本模板
let echarts = require("echarts/lib/echarts");
//在组件引入柱状图组件
require("echarts/lib/chart/bar");
3.全局引入为例,在组件中使用示例
<template>
<div class="view-content">
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
</div>
</template>
<script>
export default {
name: 'Echarts',
data() {
return {
}
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表配置
let option = {
tooltip: {
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 窗口大小自适应方案
myChart.setOption(option);
setTimeout(function() {
window.onresize = function() {
myChart.resize();
}
}, 200)
}
}
}
</script>
<style lang="scss" scoped>
</style>
4.效果
5.以上效果是官方的默认效果,当然这样子应用到项目中显然不符合需求,要做的更加炫酷更加科技感,就需要经过一番配置,如图(以下项目均为自己开发)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/153621.html原文链接:https://javaforall.cn
相关文章
- 从零手写 Vue 之响应式系统
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- vue-echarts画深度图
- vue中引入高德地图并多点标注
- vue组件 订单支付15分钟倒计时
- 基于VUE + Echarts 实现可视化数据大屏展示效果[通俗易懂]
- html使用vue axios,使用 Vue和axios
- VUE中的模板语法以及过滤器和双向数据绑定
- Vue项目中的mock.js的使用以及基本用法和ES6的新增方法
- 上帝视角看Vue源码整体架构+相关源码问答
- vue的几个提效技巧
- vue源码分析-从new Vue开始
- Vue入门(二)——本地应用
- Vue整合HighCharts和ECharts实现数据可视化
- VUE组件封装_vue使用组件
- echarts 旭日图_ECHARTS
- Vue分页导航_vue分页组件
- django实现分页_vue json
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- Vue调试工具安装(vue devtools)
- 今天讲vue讲解专栏里的VUE组件
- Vue 组件间通信的几种方式
- Vue中图片压缩的工具
- (五)vue指令认识
- 2. 「vue@2.6.11 源码分析」数据驱动视图(响应式)
- 开心档-软件开发入门之Vue.js Ajax(vue-resource)
- linux下快速部署Vue项目(linux部署vue)
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue实时监测Redis变化(vue监控redis变化)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)