前言:自己學(xué)習(xí)Angular時(shí)引入echarts圖表,按照步驟一步一步來(lái)的,但是運(yùn)行時(shí)還是會(huì)報(bào)錯(cuò): Can‘t bind to ‘options‘ since it isn‘t a known property of ‘div‘,最后搗鼓了半天找到了解決的方法,我是用angular/cli@12.2.16腳手架生成的項(xiàng)目(echarts@5.3.0, types/echarts@4.9.13).
1: 安裝Echarts
npm install typings echarts --global
2: 安裝Echarts的TypeScript定義文件,這個(gè)文件來(lái)自社區(qū)貢獻(xiàn)
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:'營(yíng)業(yè)收入',
type:'line',
smooth:true,
itemStyle: {
normal : {
lineStyle:{
color:'#1ab394'
}
}
},
data:[3, 2, 4, 7, 0, 3, 1,3,4,1,2,3]
},
{
name:'公司凈利潤(rùn)',
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>