angular中如何引入echarts

前言:自己學(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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容