vue中經常需要使用echarts圖標，這是我的總結方法，記錄在這里，以便后續再想使用的時候可以快速找到自己的日記。

1、先在vue中安裝導入echarts

import echarts from 'echarts'Vue.prototype.$echarts = echarts

2、新建echarts的js文件

export const NewMember = { title:{ show: true, text:'近期新注冊人數' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['0', '0', '0', '0', '0', '0', '0'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} 人' } }, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, } }, series: [{ name:'當日注冊人數', data: [0, 0, 0, 0, 0, 0, 0], type: 'line', symbol: 'triangle', symbolSize: 20, lineStyle: { color: 'green', width: 4, type: 'dashed' }, itemStyle: { borderWidth: 3, borderColor: 'yellow', color: 'blue' }, markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }]};

3、在vue中導入echarts的js文件

4、在vue中寫好要導入圖標的區域

<div id="recentNewMember"style="margin-left: 33px">div>

5、初始化該圖表

var chart3 = this.$echarts.init(document.getElementById('recentNewMember'));chart3.setOption(NewMember);

6、從后臺獲取數據后寫入echarts

NewMember.xAxis.data = this.termNewMember.series[0].data = this.recentNewMember

以上就是我總結的vue中使用echarts的簡易方法，如果您看到了，并且想轉發的話，可以隨意轉發，本人是后臺開發工程師，偶爾寫點前端，還屬于前端菜鳥級別，所以只要能幫助大家，那不勝榮幸。

總結

以上是生活随笔為你收集整理的echarts formatter_vue使用echarts的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。