vue使用echarts图表
2020-07-18 05:23
176 查看
1、安装echarts依赖
npm install echarts --save
2、在main.js全局引入
import echarts from 'echarts' Vue.prototype.$echarts = echarts
3、进入echarts官网,找到你想要图表
4、在vue的template中写入一个div放图表
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
5、在script的methods的里面自己定义一个方法
例:
drawLine () { this.chartPie = echarts.init(document.getElementById('myChart')); **【这里放你在官网复制的代码】** // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option, true); }
6、在mounted挂载你刚刚定义好的方法
mounted() { this.drawLine (); }
7、下面看大家一个简单的例子看看效果吧
<div id="main2" v-if="mainFlag" style="width: 600px;height:400px;"></div>
hhh() { let myChart = this.$echarts.init(document.getElementById('main2')); var option = { title: { text: '动态数据', subtext: '纯属虚构' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#283b56' } } }, legend: { data: ['最新成交价', '预购队列'] }, toolbox: { show: true, feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, dataZoom: { show: false, start: 0, end: 100 }, xAxis: [{ type: 'category', boundaryGap: true, data: (function() { var now = new Date(); var res = []; var len = 10; while (len--) { res.unshift(now.toLocaleTimeString().replace(/^\D*/, '')); now = new Date(now - 2000); } return res; })() }, { type: 'category', boundaryGap: true, data: (function() { var res = []; var len = 10; while (len--) { res.push(10 - len - 1); } return res; })() } ], yAxis: [{ type: 'value', scale: true, name: '价格', max: 30, min: 0, boundaryGap: [0.2, 0.2] }, { type: 'value', scale: true, name: '预购量', max: 1200, min: 0, boundaryGap: [0.2, 0.2] } ], series: [{ name: '预购队列', type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: (function() { var res = []; var len = 10; while (len--) { res.push(Math.round(Math.random() * 1000)); } return res; })() }, { name: '最新成交价', type: 'line', data: (function() { var res = []; var len = 0; while (len < 10) { res.push((Math.random() * 10 + 5).toFixed(1) - 0); len++; } return res; })() } ] }; app.count = 11; setInterval(function() { var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, ''); var data0 = option.series[0].data; var data1 = option.series[1].data; data0.shift(); data0.push(Math.round(Math.random() * 1000)); data1.shift(); data1.push((Math.random() * 10 + 5).toFixed(1) - 0); option.xAxis[0].data.shift(); option.xAxis[0].data.push(axisData); option.xAxis[1].data.shift(); option.xAxis[1].data.push(app.count++); myChart.setOption(option); }, 2100); myChart.setOption(option, true); }
mounted() { this.hhh(); }
8、效果展示
ps:觉得文章有用的,可以点赞关注一下,后续会更新更多技术上的难点
相关文章推荐
- 在vue中使用echarts图表实例代码详解
- 记录下遇到到前端VUE 使用ui时间选择器获取后台数据,更新echarts图表的输出显示到html
- 记录一次在Vue项目中使用Echarts图表遇见的问题
- vue项目中使用Echarts 动态更改图表数据 , Vue 折线图、柱状图等图表动态刷新 ,
- vue中使用echarts 多图表 随着父级div大小的改变而改变。
- vue中使用echarts 多图表 随着父级div大小的改变而改变。
- vue项目里使用ECharts图表后台返回图表数据
- vue使用echarts,图表自适应
- vue-echarts图表使用方法及连接后端idea
- Vue怎么使用Echarts创建图表
- 创新实训博客(20)——Vue中使用ECharts进行数据可视化(基本图表部分)
- 在vue中添加Echarts图表的基本使用教程
- vue中使用echarts图表自适应的几种基本解决方案
- Vue中使用Echarts建立图表
- Vue 爬坑之路(八)—— 使用 Echarts 创建图表
- 在vue中使用echarts图表
- 在vue模板中使用echarts实现一个图表
- vue图表组件使用,组件文档echarts