电商分销微信小程序_在Vue中使用Echarts实例图的方

2021-01-05 10:32

在Vue中使用Echarts实例图的方法实例       这篇文章主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件。但是新手猛的上手的话,可能会有点束手无策,所以这篇就是来写一点入门的内容,外加自己一点的小心得。

一、首先要在项目中下载echarts依赖

npm install echarts -S
 //或者使用淘宝的镜像
cnpm install echarts -S

二、然后就要再main.js文件中来进行全局引入

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

三、在Vue组件中设置一个div

 template 
 div 
 div 
 div id="echarts" /div //就是这一行
 /div 
 /div 
 /template 

四、去寻找想设置的实例图

再然后,根据找到的这个图里的数据及变量,来进行声明到data中。

data() {
 return {
 option: {
 title: {
 text: '堆叠区域图'
 tooltip: {
 trigger: 'axis',
 axisPointer: {
 type: 'cross',
 label: {
 backgroundColor: '#6a7985'
 legend: {
 data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
 grid: {
 left: '3%',
 right: '4%',
 bottom: '3%',
 containLabel: true
 xAxis: [{
 type: 'category',
 boundaryGap: false,
 data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
 yAxis: [{
 type: 'value'
 series: [{
 name: '邮件营销',
 type: 'line',
 stack: '总量',
 areaStyle: {},
 data: [120, 132, 101, 134, 90, 230, 210]
 name: '联盟广告',
 type: 'line',
 stack: '总量',
 areaStyle: {},
 data: [220, 182, 191, 234, 290, 330, 310]
 name: '视频广告',
 type: 'line',
 stack: '总量',
 areaStyle: {},
 data: [150, 232, 201, 154, 190, 330, 410]
 name: '直接访问',
 type: 'line',
 stack: '总量',
 areaStyle: {},
 data: [320, 332, 301, 334, 390, 330, 320]
 name: '搜索引擎',
 type: 'line',
 stack: '总量',
 label: {
 normal: {
 show: true,
 position: 'top'
 areaStyle: {},
 data: [820, 932, 901, 934, 1290, 1330, 1320]

五、在生命周期中挂载

mounted() {
 let myChart = this.$echarts.init(document.getElementById("echarts"));
 //设置echarts对象的option属性
 myChart.setOption(this.option)

六、再在该div外面的盒子设置相关的css

 style scoped 
.body
 width: 100%;
 height: 100vh;
 margin-left: 250px;
 margin-top: -280px;
#echarts
 width: 80%;
 height: 60%;
 border: 1px solid red;
 /style 

好啦,这个时候自信一点,打开浏览器,就会发现一个完完全全的Echarts实例图啦,希望这篇文章可以帮得到你,嘻嘻

总结

到此这篇关于在Vue中使用Echarts实例图的文章就介绍到这了,更多相关Vue使用Echarts实例图内容请搜索凡科以前的文章或继续浏览下面的



扫描二维码分享到微信

在线咨询
联系电话

020-66889888