前言:自己学习Angular
时引入echarts
图表,按照步骤一步一步来的,但是运行时还是会报错: Can‘t bind to ‘options‘ since it isn‘t a known property of ‘div‘
,最后捣鼓了半天找到了解决的方法,我是用angular/cli@12.2.16
脚手架生成的项目(echarts@5.3.0, types/echarts@4.9.13
).
1: 安装Echarts
npm install typings echarts --global
2: 安装Echarts的TypeScript定义文件,这个文件来自社区贡献
npm install @types/echarts --save
3: 引用
在需要echarts图表的组件的ts文件中引用
如:
import { Component, OnInit } from '@angular/core';
import * as echarts from 'echarts';
@Component({
selector: 'app-chartPage',
templateUrl: './chartPage.component.html',
styleUrls: ['./chartPage.component.css']
})
export class ChartPageComponent implements OnInit {
constructor() {
console.log(echarts)
}
ngOnInit() {
this.initCharts();
}
initCharts(){
const ec = echarts as any;
let lineChart = ec.init(document.getElementById('lineChart'));
let lineChartOption ={
tooltip : {
trigger: 'axis'
},
toolbox: {
show : false,
},
legend:{
padding:0
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'合同额',
type:'line',
smooth:true,
itemStyle : {
normal : {
lineStyle:{
color:'#c8c8c8'
}
}
},
data:[10, 2, 5, 4, 6, 3, 7,2,2,3,6,7],
},
{
name:'营业收入',
type:'line',
smooth:true,
itemStyle: {
normal : {
lineStyle:{
color:'#1ab394'
}
}
},
data:[3, 2, 4, 7, 0, 3, 1,3,4,1,2,3]
},
{
name:'公司净利润',
type:'line',
smooth:true,
itemStyle: {
normal : {
lineStyle:{
color:'#ff713a'
}
}
},
data:[10, 2, 6, 3, 2, 9, 10,3,4,8,4,3]
}
]
};
lineChart.setOption(lineChartOption);
}
html文件中:
<div id="lineChart" style="width:400px;height:300px"></div>