angular中echart的使用

标签：const echart show value item params 使用 return angular

<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');   }

 

标签：const,echart,show,value,item,params,使用,return,angular
From： https://www.cnblogs.com/cai-xin/p/16625407.html