标签：10 20 echart xxx 更新 echarts data angular

第一个echart图像

1.在创建的angular项目终端中输入如下命令安装echart包。

npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts

2.在app.module.ts中导入echart。

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  imports: [
    ...,
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts')
    })
  ],
})
export class AppModule { }

3.在xxx.html中准备一个div盒子，用于放置echart图像。

<div echarts [options]="BarOption" class="chart"></div>

4.[option]接口传递echart配置参数，在xxx.ts中通过配置BarOption可以设置echart图像的样式。

export class AppComponent implements OnInit {
    barOption: any;
    constructor() { };
    ngOnInit(): void {
        this.barOption = {title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
    }

option的配置项可以参考官网，有各种配置项的详细说明。

 

 5.绘制好的echart图像如下图所示。

 

 

若echart图像中的data发生了变化，

例如刚开始series中的data:[5, 20, 36, 10, 10, 20]，

series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]

现在希望变成[34,16,27,31,25,19]，该怎么进行更新呢？

newData=[34,16,27,31,25,19];

数据更新

1.在xxx.html中添加更换数据按钮。

<div echarts [options]="barOption" class="chart" (chartInit)="onChartInit($event)"></div>
<button (click)="changeData()">更换数据</button>

其中，onChartInit($event)方法可以用来获取echart实例。

2.在xxx.ts中获取echart实例。

echartsInstance: any;
onChartInit(ec) {
    this.echartsInstance = ec;
  }

此时的echartsInstance即为一个echart实例，可以进行setOption等相关操作。

3.在xxx.ts中编写更换数据函数。

newData = [34, 16, 27, 31, 25, 19];
changeData() {
  this.barOption.series[0].data = this.newData;
  this.echartsInstance.setOption(this.barOption);
}

4.界面中点击更换数据按钮后，echart图像数据成功更新。

 

 数据更新后的图像：

 

 转载：https://blog.csdn.net/m0_52457734/article/details/114268258

标签：10,20,echart,xxx,更新,echarts,data,angular
来源： https://www.cnblogs.com/yehuisir/p/16126702.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。