vue使用echarts，绘制折线图

需要展示某个月用户在不同时间的充电次数统计

第一步，先安装echarts

yarn add echarts

第二步，局部引入

 // 因为我是只有一个地方用到，所以就局部引入了，要是全局引入在main.js中就可以了
// index.vue
import echarts from 'echarts'

创建div,js绘制

<div ref="mychart" class="mychart"></div>
// js部分
const myChart = echarts.init(this.$refs.mychart)  // 先获得这个dom元素并初始化
const xAxisData = this.monthBill.distributedData.map(
        item => item.time + ':00'
      )  // 横坐标数据
const seriesData = this.monthBill.distributedData.map(item => item.count)  //折线数据
// 拆线数据的lenth和横坐标要对应
xAxis: {
  type: 'category',
  data: xAxisData,
  boundaryGap: false,
// axisLabel设置x轴的小标
  axisLabel: {
    show: true,
    interval: 4,  // 坐标中间间隔的数值
    color: '#999999',
    fontSize: '16px'
   },
// axisLine 设置x轴的轴线
   axisLine: {
    lineStyle: {
      color: '#999'
    }
  },
// 设置提示框
tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'none'
  },
  triggerOn: 'mousemove',
  backgroundColor: '#E31937',
  formatter: '{c}次',
// 设置折线点提示框位置
  position: function (point, params, dom, rect, size) {
     return [point[0] - 16, point[1] - 38]
   }
 },
series: [
  {
     type: 'line',
// 拐点设置
      itemStyle: {
      borderWidth: 1,
      borderColor: '#E31937',
        color: '#EC6A7E'
      },
// 拐点类型，空心圆还是实心圆
       symbol: 'circle',
       lineStyle: {
         color: '#E31937'
       },
       data: seriesData
     }
  ]
}