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的简易方法，如果您看到了，并且想转发的话，可以随意转发，本人是后台开发工程师，偶尔写点前端，还属于前端菜鸟级别，所以只要能帮助大家，那不胜荣幸。