ECharts版本4.9.0

1、npm 安裝 ECharts

npm install echarts --save

2、引入 ECharts

import echarts from 'echarts'

3、創(chuàng)建一個(gè)圖表

<template>
  <div>
    <div id="lineChart" style="margin: auto;width: 100%;height:400px;text-align:center;line-height:400px;">
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      showTip: null
    }
  },
  created () {},
  methods: {
  
  }
}
</script>

4、圖表配置處理

1.無(wú)數(shù)據(jù)時(shí)展示方式

圖表無(wú)數(shù)據(jù)

this.$nextTick(() => {
  const dom = document.getElementById('lineChart')
  dom.innerHTML = '暫無(wú)相關(guān)數(shù)據(jù)'
  dom.removeAttribute('_echarts_instance_')
})

2.數(shù)據(jù)加載中展示方式

數(shù)據(jù)加載中

this.$nextTick(() => {
   this.showTip = echarts.init(document.getElementById('ineChart'), 'white', { renderer: 'canvas' })
   this.showTip.showLoading({
     text: '數(shù)據(jù)裝填中 請(qǐng)稍后…',
     color: '#409EFF', // loading圖標(biāo)顏色
     textStyle: {
        fontSize: 20
     }
   })
})
this.showTip.hideLoading() // 關(guān)閉loading

3.折線圖圖表

折線圖

series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line', // 基礎(chǔ)折線
      smooth: true, // 平滑曲線
      areaStyle: {} // 基礎(chǔ)面積
    }
  ]

4.顯示當(dāng)前效果

多折線tooltip

tooltip: {
   trigger: 'axis'
}

5.支持4中圖片顯示效果及具體某個(gè)點(diǎn)數(shù)據(jù)顯示 同時(shí)支持

tooltip = {
   trigger: 'item',
   formatter: function (params) {
     // 打印params根據(jù)需要顯示
   }
}

6.圖例-底部居中

圖例

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

7.多條折線-循環(huán)series
8.雙x軸-xAxis[{},{}]

// 雙x軸需要注意，兩個(gè)數(shù)組長(zhǎng)度不一致時(shí)，需要設(shè)置min及max
// min：0
// max: 兩個(gè)數(shù)組中數(shù)組的長(zhǎng)度
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
   }
]