安裝echarts

npm install echarts

在上一篇中折騰了一下G2后又回到了echarts的懷抱，沒別的，案例多

折線圖

ComChart/index.vue

<template>
  <section class="charts">
    <div
      ref="chart"
      style="height: 400px"
    />
  </section>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import echarts from 'echarts'

@Component
export default class Chart extends Vue {

  @Prop() dataOption!: string
  
  private chart: any = {}
  private option: any = {}

  private created () {
    this.init()
  }

  private init () { // 初始化 option
    this.option = this.dataOption
  }

  private mounted (): void {
    this.chart = echarts.init(this.$refs.chart)
  }
  
  public setData (xAxisData: Array<string> | Array<number>, seriesData: Array<object>): void {
    this.option.xAxis.data = xAxisData
    this.option.series = seriesData
    this.onRender()
  }

  private onRender (): void {
    this.chart.setOption(this.option, true)
  }
}
</script>

這里沒什么好講的，不過需要注意的是echarts默認(rèn)沒有高度不會(huì)顯示

ts部分接收一個(gè)options提供定制，提供一個(gè)setData給外部調(diào)用

ComCharts/option.ts

export default {
  tooltip: {   //鼠標(biāo)懸浮框的提示文字
    trigger: 'axis',
    formatter: function (params: any) {   //格式化函數(shù)
      let str = '<div><p>' + params[0].name.split('[')[0] + '<p></div>'
      for (let i = 0; i < params.length; i++) {
        let text = ''
        if((params[i].data/(1024*1024*1024))>10){
          text = (params[i].data/(1024*1024*1024)).toFixed(2)+' Gbps'
        }else if((params[i].data/(1024*1024))>10){
          text = (params[i].data/(1024*1024)).toFixed(2)+' Mbps'
        }else if((params[i].data/(1024))>10){
          text = (params[i].data/(1024)).toFixed(2)+' Kbps'
        }else{
          text = params[0].data +' bps'
        }
        str += params[i].marker + ' ' + params[i].seriesName + ': ' + text + '<br>'
      }
      return str
    }
  },
  xAxis: {
    type: 'category',
    axisLine: {show: false}, // 去掉軸線
    axisTick: {show:false}, // 去掉刻度
  },
  yAxis: {
    type: 'value',
    axisLine: {show: false}, // 去掉軸線
    axisTick: {show:false}, // 去掉刻度
    axisLabel: {
      formatter: function(value: any){
        if((value/(1024*1024*1024))>10){
          return (value/(1024*1024*1024)).toFixed(2)+' Gbps'
        }else if((value/(1024*1024))>10){
          return (value/(1024*1024)).toFixed(2)+' Mbps'
        }else if((value/(1024))>10){
          return (value/(1024)).toFixed(2)+' Kbps'
        }else{
          return value +' bps'
        }
      }
    }
  },
  dataZoom: [{
      type: 'slider',
      show: true,
      start: 0,
      end: 50,
      handleSize: 8
    },
    {
      type: 'inside',
      start: 0,
      end: 50
    }
  ],
  series: [
    {
      name: '流量',
      data: [0, 100, 300, 150, 500, 100, 500],
      type: 'line',
      smooth: true,
      itemStyle:{
        color:'#3FA6FB', //折點(diǎn)顏色
      },
      lineStyle:{
        color:'#63B7FC' //折線顏色
      }
    }
  ]
}

基本的option

使用

<template>
    <com-chart
      ref="trafficChart"
      :data-option="chartOption"
    />
</template>

<script lang="ts">
import ComChart from '@/components/ComChart/index.vue'
import option from '@/components/ComChart/option'
    
@Component({
  components: {
    ComChart,
    WorldMap
  }
})

export default class AttackLog extends Vue {
    chartOption: object = option
    
    private async setData () {
      res.data = await api()
      const xAxisData: Array<string> = []
      const seriesData: Array<object> = []
      const pv: Array<number> = []
      const qps: Array<number> = []
      res.data.items.forEach((el: any) => {
        xAxisData.push(el.time)
        pv.push(el.pv)
        qps.push(el.qps)
      });
      
      [{name: '總訪問量' ,data: pv, color: '#5C8BFB'}, {name: '請(qǐng)求并發(fā)' , data: qps, color: '#63B7FC'}].forEach((item: any) => {
        seriesData.push({
          name: item.name,
          data: item.data,
          type: 'line',
          smooth: true,
          itemStyle:{
            color: item.color //折點(diǎn)顏色
          },
          lineStyle:{
            color: item.color //折線顏色
          }
        })
      });
      (this.$refs.trafficChart as any).setData(xAxisData, seriesData)
    }
}
</script>

其中最主要的就是將option與series進(jìn)行分離镰烧，達(dá)到定制折線圖的作用，之后就可以在隨處引入而只需要更改series的數(shù)據(jù)即可