angular中echart的使用

<div class="ringlike-chart" echarts [options]="options" (chartInit)="onChartInitOne($event)"></div>

 

// 初始化

public onChartInitOne(value: any): void {

    this.qualityControlBar = value;

}

 

// 值更新的时候重新set

this.qualityControlBar.setOption(this.options, true);

public options = {
    backgroundColor: '#fff',
    title: { // 标题
      text: '漏诊改善趋势',
      padding: [5, 0, 12, 30],
      textStyle: {
        color: '#000000',
        fontStyle: 'normal',
        fontWeight: 500,
        fontFamily: 'Source Han Sans CN',
        fontSize: 16,
      },
    },
    tooltip: { // 悬浮提示
      trigger: 'axis',
      formatter: (params: any) => {
        return this.tooltipFormatter(params);
      },
    },
    legend: { // 头部说明
      icon: 'rect',
      itemHeight: 2,
      itemWidth: 16,
      x: 'left',
      y: 'top',
      padding: [40, 0, 0, 30],
      textStyle: {
        fontSize: '12px',
      },
      data: []
    },
    grid: { // 图的布局
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '25%',
      containLabel: true
    },
    toolbox: { // 是否显示下载
      feature: {
        saveAsImage: {
          show: false
        }
      }
    },
    dataZoom: [{
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      left: '9%',
      bottom: 0,
      start: 10,
      end: 90, // 初始化滚动条
      height: 14,
    }],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
      ]
    },
    yAxis: {
      type: 'value',
      min: 0, // 配置 Y 轴刻度最小值
      max: 100, // 配置 Y 轴刻度最大值
      splitNumber: 5, // 配置 Y 轴数值间隔
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      axisLabel: {
        formatter: (res) => {
          if (res === 0) {
            return 0;
          }
          return res + '%';
        },
      },
      axisLine: { show: false },
      axisTick: { show: false }
    },
    series: [
    ]
  };

// 此处修改悬浮展示内容

  public tooltipFormatter(params: any): string {

    const arr = [];

    if (params instanceof Array) {

      const flag = params.every((item: any) => {

        if (typeof item.data === 'undefined') {

          return item;

        }

      });

      if (flag) {

        return '';

      }

      params.forEach((item: any) => {

        const span = `<span style="width:10px;height:10px;display:inline-block;background:${item.color};margin-right:4px;border-radius:50%;"></span>`;

        const value1 = item.value ? item.value + '%' : '0.00%';

        const div1 = `<div style="text-align:right;margin-left:20px;">${value1}</div>`;

        const div2 = `<div>${span}${item.seriesName}</div>`;

        const div3 = `<div style="line-height:20px;display:flex;justify-content: space-between;min-width:200px;">${div2}${div1}</div>`;

        const tmp: string = `${div3}`;

        arr.push(tmp);

      });

    }

    arr.unshift(`<div>${params[0].axisValueLabel}<div>`);

    return arr.join('\n');

  }