ionic集成echart展示条形图

npm i echarts

html中定义如下：

<section>
  <div echarts [options]="chartOption" class="bar-chart"></div>
</section>

ts文件处理：

import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "app-customer-source",
  templateUrl: "./customer-source.component.html",
  styleUrls: ["./customer-source.component.scss"]
})
export class CustomerSourceComponent implements OnInit {
  @Input() tagData: any;

  chartOption: any; // 条形图数据
  appTypeCustom: any;
  constructor() {
  }

  ngOnInit() {
    const timer = setTimeout(() => {
      this.chartOption = {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0
        },
        xAxis: {
          type: "value",
          show: false,
          max: this.tagData.data.data[0].maxValue
          // boundaryGap: [0, 0]
        },
        yAxis: {
          type: "category",
          show: false
        },
        series: [
          {
            type: "bar", // 类型条形图
            barCategoryGap: 90, // 条形图之间的间距
            z: 0,
            barWidth: 8, 
            barGap: "-100%",
            data: this.tagData.data.data.map(v => v.maxValue),
            itemStyle: {
              normal: {
                color: this.appTypeCustom !== 'LJ' ? "#FFEFE3" : "#FFF8E6", // 条形图底色
                barBorderRadius: 8
              }
            },
            label: {
              normal: {
                show: true,
                align: "right",
                textStyle: {
                  color: this.appTypeCustom !== 'LJ' ? "#27282E" : "#252629",
                  fontSize: 16,
                  // fontFamily: "PingFangSC-Semibold,PingFangSC",字体去掉
                  fontWeight: 600
                },
                position: ["98%", -25],
                formatter: data => {
                  return this.tagData.data.data[data.dataIndex].numLabel;
                }
              }
            }
          },
          {
            type: "bar",
            barCategoryGap: 90,
            z: 1,
            barWidth: 8,
            data: this.tagData.data.data,
            itemStyle: {
              normal: {
                color: params => {
                  return {
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: this.appTypeCustom !== 'LJ' ? "#FF9500" : "#FFE14A" // 进度条当前进度颜色起始值
                      },
                      {
                        offset: 1,
                        color: this.appTypeCustom !== 'LJ' ? "#FF6314" : "#FFCA3A"
// 进度条当前进度颜色结束值
                      }
                    ]
                  };
                },
                barBorderRadius: 8
              }
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: this.appTypeCustom !== 'LJ' ? "#27282E" : "#252629",
                  fontSize: 16
                },
                position: [0, -25],
                formatter: data => {
                  let icon = "";
                  switch (data.data.icon) {
                    case "build":
                      icon = "{build| }" + "  ";
                      break;
                    case "school":
                      icon = "{school| }" + "  ";
                      break;
                    case "hospital":
                      icon = "{hospital| }" + "  ";
                      break;
                    case "metro":
                      icon = "{metro| }" + "  ";
                      break;
                    case "transit":
                      icon = "{transit| }" + "  ";
                      break;
                    case "village":
                      icon = "{village| }" + "  ";
                      break;
                    case "market":
                      icon = "{market| }" + "  ";
                      break;
                    default:
                      icon = "";
                      break;
                  }
                  return icon + data.data.title;
                },
                rich: {
                  build: {
                    height: 16,
                    width: 16,
                    backgroundColor: {
                      image: "../../../assets/icon/details_icon_build@2x.png"
                    }
                  },
                  school: {
                    height: 16,
                    width: 16,
                    backgroundColor: {
                      image: "../../../assets/icon/details_icon_school@2x.png"
                    }
                  },
                  hospital: {
                    height: 16,
                    width: 16,
                    backgroundColor: {
                      image: "../../../assets/icon/details_icon_hospital@2x.png"
                    }
                  },
                  metro: {
                    height: 16,
                    width: 16,
                    backgroundColor: {
                      image: "../../../assets/icon/details_icon_metro@2x.png"
                    }
                  },
                  transit: {
                    height: 16,
                    width: 16,
                    backgroundColor: {
                      image: "../../../assets/icon/details_icon_transit@2x.png"
                    }
                  },
                  village: {
                    height: 16,
                    width: 16,
                    backgroundColor: {
                      image: "../../../assets/icon/details_icon_village@2x.png"
                    }
                  },
                  market: {
                    height: 16,
                    width: 16,
                    backgroundColor: {
                      image: "../../../assets/icon/details_icon_market@2x.png"
                    }
                  }
                }
              }
            }
          }
        ]
      };
      clearTimeout(timer);
    }, 100);
  }

}