echarts formatter_vue使用echarts的方法

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.term

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

以上就是我总结的vue中使用echarts的简易方法，如果您看到了，并且想转发的话，可以随意转发，本人是后台开发工程师，偶尔写点前端，还属于前端菜鸟级别，所以只要能帮助大家，那不胜荣幸。