Angular8引入百度Echarts进行图表分析的实现代码
程序员文章站
2022-03-07 09:40:13
最近突发奇想,想自己做一个理财分析记录的网页,主要给自己记账,然后想到了把每天,每周的消费用图标分析出来,于是就需要用到百度的echarts图标插件,talk is cheep, sh...
最近突发奇想,想自己做一个理财分析记录的网页,主要给自己记账,然后想到了把每天,每周的消费用图标分析出来,于是就需要用到百度的echarts图标插件,talk is cheep, show me the code。
1. npm 安装ngx-echarts及相关的依赖
npm install echarts -s npm install ngx-echarts -s npm install @types/echarts -d
2. 添加js引导文件
{ "scripts": [ "../node_modules/echarts/dist/echarts.min.js" // or echarts.js for debug purpose ], }
3. appmodule引入ngxechartsmodule
这里有个坑,记得在你调用了echarts的相关模块的module里面引入ngxechartsmodule,不然会报错:template parse errors: can't bind to 'options' since it isn't a known property of 'div'.所以切记
import { ngxechartsmodule } from 'ngx-echarts'; @ngmodule({ imports: [ ..., ngxechartsmodule ], ... }) export class appmodule { }
4. 使用echarts
html
<div echarts [options]="chartoption" class="demo-chart"></div>
scss
.demo-chart { height: 400px; }
component
import { echartoption } from 'echarts'; chartoption: echartoption = { xaxis: { type: 'category', data: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'] }, yaxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }
5. 参考网站
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。