ngx-echarts

最新推荐文章于 2025-06-09 09:21:15 发布

开水没有冬天

最新推荐文章于 2025-06-09 09:21:15 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.csdn.net/weixin_42995876/article/details/89375060

echarts 专栏收录该内容

13 篇文章

订阅专栏

本文档详细介绍了ngx-echarts的安装和使用方法，包括如何在Angular项目中引入NgxEchartsModule模块，配置echarts选项参数，动态更新图表数据，以及解决常见错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ngx-echarts的简洁文档：
百度：npm
搜索：ngx-echarts，第一个结果就是。
地址：https://www.npmjs.com/package/ngx-echarts

查看installation和usage：
在模块中引入NgxEchartsModule模块！然后就可以使用了！

options就是echarts的配置参数；
merge：在动态添加点的时候，有用；

html：

<div  echarts [merge]="newDataSource" [options]="dataSource">

</div>

ts：

public dataSource = {
    title: {
      text: '未来一周气温变化',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['实例CPU运行监控', '实例内存运行监控']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} %'
      }
    },
    xAxis: {
      type: 'category',
      data: [], // 动态赋值 x轴
      axisTick: {
        alignWithLabel: true,
      }
    },
    series: [
      {
        name: "实例CPU运行监控",
        data: [], // 动态赋值 y1轴
        type: 'line',
      },
      {
        name: "实例内存运行监控",
        data: [], // 动态赋值 y2值
        type: 'line',
      },
    ]
  }
 // x、y轴赋值：
this.dataSource.xAxis.data = xData2;
this.dataSource.series[0].data = yData3;
this.dataSource.series[1].data = yData4;


/****************动态点的添加*******************/
 public newDataSource = {}; // 新的数据
 this.newDataSource = {
                  series: [
                    {
                      data: yData3,
                    },
                    {
                      data: yData4,
                    },
                  ]
}

如果要更换x轴的时候，直接给xData2更改数组，然后：

this.dataSource.xAxis.data = xData2;

这样子，默认x轴的值变了，但是显示的还是原先的x轴值！x轴值是数组，引用类型，xData2里面的值虽然变化了，但是引用类型的地址没有变化，检测不到x轴data的变化！

报错如下：

core.js:1427 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'div'. ("


  <div echarts [ERROR ->][options]="options2">

  </div>
"): ng:///SystemConfModule/TenantRightsConfComponent.html@5:15
Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'div'. ("


  <div echarts [ERROR ->][options]="options2">

  </div>

==>在module中引入NgxEchartsModule模块。