echarts图例不显示/angualar结合echarts不显示图表/angular结合echarts的创建过程

第一步：项目创建好之后分别安装下面的两个东西：

cnpm install echarts --save
cnpm install ngx-echarts --save

第二步：在你的angular.json引入刚刚安装好的包：

并且在你的AppModule 里引入，

 import { NgxEchartsModule } from '_ngx-echarts@7.0.1@ngx-echarts';

第三步：在你创建的组件里（charts.component.html）：

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div echarts [options]="option" id="main" style="width: 600px;height:400px;"></div>

第四步：在创建的组件里（charts.component.ts）引入官网的数据：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-charts',
  templateUrl: './charts.component.html',
  styleUrls: ['./charts.component.css']
})
export class ChartsComponent implements OnInit {
  option:any;
  constructor() { }
  ngOnInit(): void {
    this.option = {
      title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
          data:['销量']
      },
      xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
    };
    
  }

}

第五步：在你的app.component.html引入刚刚的组件：

结果：图表成功显示啦

我的目录：

注意，如果图表没有成功显示，并且打开控制台报如下错：

可能原因是控制台报错时没有服务的提供者（我就是因为没写这个东西找了好久的错误浪费我时间啊啊啊啊啊啊啊啊），服务提供者是在这注册的，所以需要在你的AppModule 加入下面的东西：