安装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默认没有高度不会显示

ts部分接收一个options提供定制，提供一个setData给外部调用

ComCharts/option.ts

export default {
  tooltip: {   //鼠标悬浮框的提示文字
    trigger: 'axis',
    formatter: function (params: any) {   //格式化函数
      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', //折点颜色
      },
      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: '请求并发' , data: qps, color: '#63B7FC'}].forEach((item: any) => {
        seriesData.push({
          name: item.name,
          data: item.data,
          type: 'line',
          smooth: true,
          itemStyle:{
            color: item.color //折点颜色
          },
          lineStyle:{
            color: item.color //折线颜色
          }
        })
      });
      (this.$refs.trafficChart as any).setData(xAxisData, seriesData)
    }
}
</script>

其中最主要的就是将option与series进行分离，达到定制折线图的作用，之后就可以在随处引入而只需要更改series的数据即可