angular中echart的使用

// 初始化

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

}

巴特西

angular中echart的使用

最新文章

热门文章