Angular8引入百度Echarts进行图表分析的实现代码
最近突发奇想，想自己做一个理财分析记录的网页，主要给自己记账，然后想到了把每天，每周的消费用图标分析出来，于是就需要用到百度的echarts图标插件，talkischeep，showmethecode。
1.npm安装ngx-echarts及相关的依赖
npminstallecharts-S npminstallngx-echarts-S npminstall@types/echarts-D
2.添加js引导文件
{
"scripts":[
"../node_modules/echarts/dist/echarts.min.js"//orecharts.jsfordebugpurpose
],
}
3.AppModule引入NgxEchartsModule
这里有个坑，记得在你调用了echarts的相关模块的Module里面引入NgxEchartsModule，不然会报错：Templateparseerrors:Can'tbindto'options'sinceitisn'taknownpropertyof'div'.所以切记
import{NgxEchartsModule}from'ngx-echarts';
@NgModule({
imports:[
...,
NgxEchartsModule
],
...
})
exportclassAppModule{}
4.使用echarts
html
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.参考网站
https://www.npmjs.com/package/ngx-echarts
angularecharts在线模板
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。