一. 打開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賦值即可，未修改的數據不用動

在此處的修改應該發生在數據發生改變時。如數據減少或增加時，一般用于頁面渲染的方法中