Angular 在TypeScript 中使用 ECharts 图表-3

当你做出一个demo的时候，别人已经做出了更精彩的东西。
-2已经说了如何做成一个属性指令，但是，最后发现别人已经做了一个更完美的东西，那就是:
https://xieziyu.github.io/ngx-echarts/#/home
这个做的更好。
使用方法：
1.安装：
npm install echarts --save
npm install ngx-echarts --save
2.配置echarts的路径：
在angular.json中进行配置。
找到项目名称下的位置：
"styles": [
"src/styles.css"
],
"scripts": [
"node_modules/echarts/dist/echarts.min.js"
]
将"node_modules/echarts/dist/echarts.min.js"写到如上位置即可。
3.app.module中引用这个模块。
import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxEchartsModule //这里
],

4.使用：
html：

adsdasd
ts：

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

lineChartOption = null;
change() {
{
this.lineChartOption = {
itemStyle: {
// 阴影的大小
shadowBlur: 200,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data: [
{value: Math.random() * 200, name: '视频广告'},
{value: 274, name: '联盟广告'},
{value: 310, name: '邮件营销'},
{value: 335, name: '直接访问'},
{value: Math.random() * 400, name: '搜索引擎'}
]
}
]
};
}
}
}

这样，你点击按钮，一个demo完成。