echarts 刷新、导入图片、文字超出、自定义提示框

刷新

思路：使用计算属性、组件、以及echarts提供的方法
计算属性里面的值改变了就会重新重新渲染；

封装一个组件echarts， Chart.setOption(this.option, true); 重新渲染

<template>
  <div
    ref="chart"
    class="chart"
  />
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import { ECOption } from '@/mixins/chart';
import * as echarts from 'echarts';

@Component
export default class Echarts extends Vue {
  @Prop(Object)
  private option!: ECOption;

  private async mounted () {
    this.init();
  }

  private init () {
    // echarts.init(this.$refs.chart as HTMLCanvasElement).dispose();// 先销毁
    const Chart = echarts.init(this.$refs.chart as HTMLCanvasElement);
    <template>
  <div
    ref="chart"
    class="chart"
  />
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import { ECOption } from '@/mixins/chart';
import * as echarts from 'echarts';

@Component
export default class Echarts extends Vue {
  @Prop(Object)
  private option!: ECOption;

  private async mounted () {
    this.init();
  }

  private init () {
    // echarts.init(this.$refs.chart as HTMLCanvasElement).dispose();// 先销毁
    const Chart = echarts.init(this.$refs.chart as HTMLCanvasElement);
    Chart.setOption(this.option, true);
    window.onresize = () => {
      // eslint-disable-next-line
  	  Chart.resize();
    };
    // const baseUrl=Chart.getDataURL();
    // console.log(baseUrl)
  }

//监听option改变 deep 也就是监听他的父组件的option；患有一个参数immediate 也就是立即监听意味着mounded也会被监听；
@Watch('option', { deep: true })
  private change () {
    this.init();
  }
}
</script>

<style lang='scss' scoped>
.chart{
  width: 100%;
  height: 100%;
}
</style>

    window.onresize = () => {
      // eslint-disable-next-line
  	  Chart.resize();
    };
    // const baseUrl=Chart.getDataURL();
    // console.log(baseUrl)
  }

@Watch('option', { deep: true })
  private change () {
    this.init();
  }
}
</script>

<style lang='scss' scoped>
.chart{
  width: 100%;
  height: 100%;
}
</style>

并引用它

<echarts :option="option" />

同时，将options设置为计算属性；【每个属性具体看文档】

private get option (): ECOption {
    const icon = 'image://' + require('@/assets/img/echarts-timeline-handle.png');
    return {
      title: {
        text: '检出率-误检率-漏检率-列车整编',
        textStyle: {
          color: '#333',
          fontSize: '16px',
          fontWeight: 'normal'
        }
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params: any) {
          let html = '<div style="margin-bottom:4px">' + params[0].name + '<br>' + '</div>';
          for (let i = 0; i < params.length; i++) {
            html += '<div style="display:flex;height:25px;justify-content:center;align-items:center;"><span style="display:inline-block;margin-right:11px;border-radius:50%;width:6px;height:6px;background-color:' + params[i].color + ';"></span>';
            html += '<div style="width:143px;display:flex;justify-content:space-between;">' + params[i].seriesName + '<text style="text-align:right">' + params[i].value + '%' + '</text></div>' + '<br>' + '</div>';
          }
          return html;
        },
        padding: [12, 14, 10],
        backgroundColor: 'rgba(255,255,255,0.9)'
      },
      legend: {
        data: ['检出率', '误检率', '漏检率'],
        left: 20,
        top: '55px'
      },
      grid: {
        left: '20px',
        top: '105px',
        bottom: '40px',
        right: '60px',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.timeData,
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          color: '#000',
          fontSize: 12, // 字体大小
          interval: 0
        },
        offset: 8
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        axisLabel: {
          show: true,
          color: '#000',
          fontSize: 12, // 字体大小
          formatter: '{value}%',
          align: 'left',
          margin: 31
        },
        offset: 20
      },
      //下面的滚条
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 30
        },
        {
          // zoomLock:true//只能平移，不能缩放
          zoomOnMouseWheel: false, // 鼠标滚轮不能移动
          height: 24,
          bottom: 0,
          borderColor: 'transparent',
          backgroundColor: '#F0F2F5',
          fillerColor: 'transparent',
          selectedDataBackground: {
            lineStyle: { color: '#CED4D9' },
            areaStyle: { color: '#CED4D9' }
          },
          dataBackground: {
            lineStyle: { color: '#F0F2F5' },
            areaStyle: { color: '#F0F2F5' }
          },
          moveHandleSize: 0,
          handleIcon: icon,
          handleColor: '#fff',
          handleSize: 26
        }
      ],
      series: [
        {
          name: '检出率',
          type: 'line',
          showSymbol: false,
          data: this.detectionRateData
        },
        {
          name: '误检率',
          type: 'line',
          showSymbol: false,
          data: this.falseDetectionRateData
        },
        {
          name: '漏检率',
          type: 'line',
          showSymbol: false,
          data: this.missedDetectionRateData
        }
      ],
      color: ['#4174FF', '#088F3E', '#D0021B']
    };
  }

我们将x轴对应的数据 也适用计算属性；

private get timeData () {
    return this.data.map((item, index) => {
      // x轴文字显示全
      return dateTime(item.created_at) + '      ';
    });
  }

这就以为这每一次传入的data改变也就会印象options改变；

导入图片

在option中 定义一个常量

const icon = 'image://' + require('@/assets/img/echarts-timeline-handle.png');


//因为我这里是子啊滚轮条的时候使用了自定义的图片，所以
handleIcon: icon,

文字超出

百度了很多，有些人使用倾斜也可解决，但很多时候，不允许倾斜
所以我们需要利用空字符串 在x轴的字符串后面添加一些空格

private get timeData () {
    return this.data.map((item, index) => {
      // x轴文字显示全
      return dateTime(item.created_at) + '      ';
    });
  }

自定义提示框

tooltip: {
        trigger: 'axis',
        formatter: function (params: any) {
          let html = '<div style="margin-bottom:4px">' + params[0].name + '<br>' + '</div>';
          for (let i = 0; i < params.length; i++) {
            html += '<div style="display:flex;height:25px;justify-content:center;align-items:center;"><span style="display:inline-block;margin-right:11px;border-radius:50%;width:6px;height:6px;background-color:' + params[i].color + ';"></span>';
            html += '<div style="width:143px;display:flex;justify-content:space-between;">' + params[i].seriesName + '<text style="text-align:right">' + params[i].value + '%' + '</text></div>' + '<br>' + '</div>';
          }
          return html;
        },
        padding: [12, 14, 10],
        backgroundColor: 'rgba(255,255,255,0.9)'
      },

以上是总结，写过程中，参考了很多人的思路与代码【可是我找不到网址了】，如有冒犯，请多多原谅！！