angular中echarts中用法

通过举例我们来了解echarts的用法接下来看效果图:(左右放大)

在angular中我们要先引入echarts组件,在该文件项目ts中引入import * as echarts from ‘echarts’;看核心代码。

      <!-- 进站量(乘次) html代码  -->
      <div id="diveleChart1">
      </div>

在这里插入代码片  ngOnInit(): void {
    /*进站量*/
    this.diveleChart1 = echarts.init(document.getElementById('diveleChart1'));
    /*接收参数从前一页面*/
    this.route.queryParams.subscribe((params: Params) => {
      /*关键代码*/
          this.diveleChart1.setOption({
            title: {
              text: '进站量(乘次)', //页面显示主标题
               // 最常用的设置主标题 显示位置 textStyle:
                {//主标题文本样式 "fontSize":18,"fontWeight": "bolder","color": "#333"}
              left: 16, 
              top: 12,
            },
            //设置图距离上下左右的距离  containLabel要为true
            grid: {
              left: '1.1%',
              right: '2.7%',
              top: 80,
              bottom: 10,
              containLabel: true
            },
            // 代表是否可滑动
            dataZoom: [{
              type: 'inside'
            }],
            // 代表传入数据的值
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            legend: {
            //代表柱状图显示含义
              data: ['进站量', '日均'],
              //位置的偏移
              x: '12px',
              y: '40px',
            },
            xAxis: {
              data: this.Chart1,   //用数组储存x轴相关数据
              axisLabel: {     //可以设置x轴内容样式 是倾斜显示 还是横向显示等样式 
                interval: 0,
                formatter: function (value): any {
                  return value.split("").join("\n");
                }
              },
            },
            yAxis: [
            //代表着y轴方向操作
              {
                type: 'value',
                min: 0,
                max: 150000,
                interval: 50000,
              },
            ],
            series: [{
              name: '进站量',
              type: 'bar',
              barGap: 0.2,  //代表着柱子与柱子之间的间距
              barCategoryGap: '20%',
              data: this.Chart1umber,   //代表进站量
              large: true             //默认区域样式 可以自己设置itemStyle: {}       
            },
              {
                name: '日均',
                type: 'bar',
                data: this.Chart1dayAverageEnter, //代表日均
                itemStyle: {            //设置柱子的相关颜色操作
                  color: '#FF99C3'
                }
              }]
          });
      }
    );
  }

肯定有些地方没有了解到 可以去官网看文档 https://echarts.apache.org/examples/zh/index.html#chart-type-bar其实不难 只是有很多配置,需要花时间。