使用 vue_VUE使用ECharts教程

点击上方蓝字关注我们

首先先安装需要的插件

输入命令：

npm install echarts -S

接着在main.js的文件中进行配置：

// 引入echarts图表插件,并设置成全局变量

import echarts from 'echarts';

Vue.prototype.$echarts = echarts;

接下来在对应的页面中加上UI：

并编写初始化的函数：

// 获取图表对象

let myChart = this.$echarts.init(document.getElementById('myChart'))

// 绘制图表

myChart.setOption({

title: { text: '在Vue中使用echarts' },

tooltip: {},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

});

接下来在初始化的时候调用该函数吧：

0 2

参数配置

这时候我们需要查看官网https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

官网中也有明确的使用方式介绍哦，这边就不做赘述了。

在线客服