angular8安装echart

1.安装：
npm i echarts --save
npm i ngx-echarts --save

2.在angular.json文件中配置ech
arts

image.png

3.在app.module.ts中引入NgxEchartsModule
app.module.ts

image.png

在模板中app.component.html使用
<div echarts [options]="chartOption" class="chart"></div>

app.component.ts

 chartOption = {
    title: {
      text: '深圳月最低生活费组成（单位:元）',
      subtext: 'From ExcelHome',
      sublink: 'http://e.weibo.com/1341556070/AjQH99che'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: function (params) {
        var tar = params[1];
        return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      splitLine: { show: false },
      data: ['总费用', '房租', '水电费', '交通费', '伙食费', '日用品数']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '辅助',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          normal: {
            barBorderColor: 'rgba(0,0,0,0)',
            color: 'rgba(0,0,0,0)'
          },
          emphasis: {
            barBorderColor: 'rgba(0,0,0,0)',
            color: 'rgba(0,0,0,0)'
          }
        },
        data: [0, 1700, 1400, 1200, 300, 0]
      },
      {
        name: '生活费',
        type: 'bar',
        stack: '总量',
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        },
        data: [2900, 1200, 300, 200, 900, 300]
      }
    ]
  };```
运行结果：
![image.png](https://img.haomeiwen.com/i9646874/705e5cf754bf5c82.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)