vue使用echarts总结

ECharts版本4.9.0

1、npm 安装 ECharts

npm install echarts --save

2、引入 ECharts

import echarts from 'echarts'

3、创建一个图表

4、图表配置处理

1.无数据时展示方式

图表无数据

this.$nextTick(() => {
  const dom = document.getElementById('lineChart')
  dom.innerHTML = '暂无相关数据'
  dom.removeAttribute('_echarts_instance_')
})

2.数据加载中展示方式

数据加载中

this.$nextTick(() => {
   this.showTip = echarts.init(document.getElementById('ineChart'), 'white', { renderer: 'canvas' })
   this.showTip.showLoading({
     text: '数据装填中 请稍后…',
     color: '#409EFF', // loading图标颜色
     textStyle: {
        fontSize: 20
     }
   })
})
this.showTip.hideLoading() // 关闭loading

3.折线图图表

折线图

series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line', // 基础折线
      smooth: true, // 平滑曲线
      areaStyle: {} // 基础面积
    }
  ]

4.显示当前效果

多折线tooltip

tooltip: {
   trigger: 'axis'
}

5.支持4中图片显示效果及具体某个点数据显示 同时支持

tooltip = {
   trigger: 'item',
   formatter: function (params) {
     // 打印params根据需要显示
   }
}

6.图例-底部居中

图例

legend: {
   type: 'scroll',
   bottom: 0,
   left: 'center',
   icon: 'rect',
   data: []
}

7.多条折线-循环series
8.双x轴-xAxis[{},{}]

// 双x轴需要注意，两个数组长度不一致时，需要设置min及max
// min：0
// max: 两个数组中数组的长度
xAxis = [
  {
    type: 'category',
    data: [],
    nameTextStyle: {
      extBorderType: 'dashed'
    },
    axisLine: {
      lineStyle: {
        color: '#C0C4CC'
       }
    },
    boundaryGap: false,
    axisPointer: {
      show: true,
      type: 'line',
      label: {
         show: false
      }
    },
    min: 0,
    max: len
   },
   {
     type: 'category',
     data: [],
     nameTextStyle: {
       textBorderType: 'dashed'
     },
     axisLine: {
       lineStyle: {
         color: '#C0C4CC'
       }
     },
     boundaryGap: false,
     axisPointer: {
         show: true,
         type: 'line',
         label: {
           show: false
         }
      },
      show: false,
      min: 0,
      max: len
   }
]