angular 6引入echarts的具体方法

版权声明： https://blog.csdn.net/weixin_41404460/article/details/83510419

方式： 使用echarts和ngx-eachrts两个依赖，借助于ngx..，是因为echarts是基于js编写，没有ts文件。所以就使用ngx-echarts来使用即可。

第一步：安装依赖

npm install echarts --save
npm install ngx-echarts --save

第二步：在Module中引入

import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
 imports: [
 ...,
// 引入module
 NgxEchartsModule
 ],
})
export class AppModule { }

第三步：在angular-cli中添加js引入

// edit .angular-cli.json
{
 "scripts": [
 // add this: 注意，在echarts中可能没有提供echarts.min.js但是肯定有echarts.js的。对应引入即可。
 "../node_modules/echarts/dist/echarts.min.js"
// 还可以添加中英文，主题。。。。
 ],
}

第四步：只需要在echarts中放入你需要的html

然后在对应的组件中引入：

import * as echarts  from 'echarts';

(第二步和第三步为全局设置，如果仅仅需要组件按需加载，不需要第二步和第三步)

ps=====》最后如果出错，引入：

npm install @types/echarts

ps：typescript中的echarts需要注意，不能通过var 对象的形式简写，需要一口气加载：

if (option && typeof option === "object") {
  echarts.init( document.getElementById("container")).setOption(option, true);

｝

最后修改主题色调仅仅需要查看echarts官网：

地址：http://echarts.baidu.com/option.html#title