Angular echarts复杂常用配置项

angular2+ngx-echarts应用。echarts图表随窗口resize更新视图。柱状图横向从高到低排名，柱状图最大值颜色修改（bar颜色自定义）。饼图图例显示数据及百分比，饼图图例文字颜色与对应饼图颜色一致（pie legend图例内容颜色自定义）。

安装

框架：ng2 + echarts + ngx-echarts

# if you use npm
npm install echarts -S
npm install ngx-echarts -S

# or if you use yarn
yarn add echarts
yarn add ngx-echarts

根据Angular版本不同，安装相应的ngx-echarts版本，详情参见：ngx-echarts Latest version

引入及echarts图表随窗口resize更新视图

<div echarts [options]="barChartsOption" style="width: 380px; height: 200px;"></div>
<div echarts [options]="pieChartsOption" style="width: 380px; height: 200px;"></div>

import { Component, OnInit } from '@angular/core';
import { EChartsOption } from 'echarts';
import { fromEvent } from 'rxjs';

export class HomePageComponent implements OnInit {
  // 柱状图
  barChartsOption: EChartsOption; 
  barData = [41, 22, 12, 10, 8];
  barAxis = ['React', 'Angular', 'Vue', 'Ember', 'JQuery'];
  
 // 饼图
  pieChartsOption: EChartsOption;
  pieData = [
    { value: 41, name: 'React' },
    { value: 22, name: 'Angular' },
    { value: 12, name: 'Vue' },
    { value: 10, name: 'Ember' },
    { value: 8, name: 'JQuery' },
  ];
  
  pageResize: any; // 窗口resize
  
  constructor() {
    // 监听窗口resize事件，调用重绘图表方法，重新绘图
    this.pageResize = fromEvent(window, 'resize').subscribe(() => {
      this.resizeChart();
    });
  }

  // 重新绘制图表
  resizeChart() {
    if (this.echartsInstance) {
      this.echartsInstance.resize();
    }
  }

  ngOnInit(): void {
    this.getBarChartsOption();
    this.getPieChartsOption();
  }

  ngOnDestroy(): void {
    // 销毁功率因数曲线的订阅事件
    if (this.pageResize) {
      this.pageResize.unsubscribe();
    }
  }

  getBarChartsOption() {};
  getPieChartsOption() {};

}

柱状图bar颜色自定义

效果：柱状横向从高到低排名，柱状图最大值颜色突出。

getBarChartOption() {
  const { barData, barAxis } = this;
  return {
    grid: {
      top: 32,
      bottom: 32,
      left: 20,
      right: 70,
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      data: barData,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#F7F7F7',
          width: 2,
        },
      },
    },
    yAxis: {
      type: 'category',
      inverse: true, // 翻转数据排列
      axisLabel: {
        color: '#999',
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      boundaryGap: false,
      data: barAxis,
    },
    series: [
      {
        data: barData,
        type: 'bar',
        itemStyle: {
          borderRadius: [0, 12, 12, 0],
          // 自定义图例内容颜色
          color: function(params) {
            const value = params.value
            const maxVal = Math.max.apply(null, data)
            if (value === maxVal)) {
              return '#F39800'
            }
            return '#3CB035'
          },
        },
        label: {
          show: true,
          position: 'right',
          color: 'inherit', // 视觉映射得到的颜色
        },
        barWidth: 12,
      },
    ],
  };
}

饼图pie legend图例内容颜色自定义

效果：饼图图例显示数据及百分比，饼图图例文字颜色与对应饼图颜色一致。

getPieChartOption() {
  const pieData = this.pieData
  // 数据总和 用于图例百分比
  let total = 0;
  pieData.forEach(item => {
    total += item.value;
  });
  
  // 饼图颜色
  const color = ['#234FBB', '#3CB035', '#5482E2', '#F39800', '#EECB5F'];
  
  return {
    tooltip: {
      trigger: 'item',
      backgroundColor: '#fff',
      borderWidth: 0,
      confine: true,
      padding: [4, 4, 4, 4],
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      show: true,
      right: '8%',
      y: 'center',
      icon: 'circle',
      itemWidth: 6,
      formatter: function (name) {
        let value;
        let color;
        pieData.forEach((item, i) => {
          if (item.name === name) {
            value = item.value;
          }
        });
        return `${name} ${value} ${(value / total).toFixed(1)*100}%`;
      },
    },
    series: [
      {
        name: '商户风控分布',
        type: 'pie',
        center: ['30%', '50%'],
        radius: ['32%', '60%'],
        color,
        label: {
          show: false,
          color: "inherit",
        },
        data: pieData,
      },
    ],
  };
}