一. 打开ECharts官网,点击快速入门

下面是ECharts官网的链接 https://echarts.apache.org/

二.在vue中使用

1.首先先引入Echarts js文件

如下图，下面的第一张图片是官网的实现，第二章图片是我根据官网的实现

2.给ECharts 创建一个DOM容器

3. 使用echarts.init方法初始化一个实例，并通过 setOption 方法给它赋值

官网的具体实现代码

官网的效果图

我们在vue中实现时需要注意我们需要将这部分的代码挂载到mounted方法中

下面是我们的代码实现

mounted() {this.myChart = echarts.init(document.querySelector('#main'))option = {// 大标题title: {text: '消费账单列表',subtext: 'Fake Data',left: 'center'},// 提示框tooltip: {trigger: 'item'},// 图例legend: {orient: 'vertical',left: 'left'},// 数据项series: [{name: '消费账单',type: 'pie',radius: '50%', // 圆的半径data: [// { value: 1048, name: '球鞋' },// { value: 735, name: '防晒霜' },],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用刚指定的配置项和数据显示图表。this.myChart.setOption(option);},

4.根据后端数据动态修改ECharts的内容

找到应用篇中的动态的异步数据

此时只需要将要修改的数据重新用setOption赋值即可，未修改的数据不用动

在此处的修改应该发生在数据发生改变时。如数据减少或增加时，一般用于页面渲染的方法中