angular如何引入echarts

两种方法引入

版本

第一种（模块化引入）

1.npm下载

npm install echarts --save
npm install ngx-echarts --save

2.在angular.json下面的build/script

"scripts": [
    "./node_modules/echarts/dist/echarts.min.js",
 ]

3.建一个新的组件

3.在新建组件的module中添加，home.module.ts

import {NgxEchartsModule} from 'ngx-echarts';

@NgModule({
  imports: [
    NgxEchartsModule
  ]
})

main.component.html

<div echarts [options]="chartOption" class="demo-chart"></div> 

main.component.ts

 this.chartOption = {
        title: {
            text: '堆叠区域图'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name: '邮件营销',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '联盟广告',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '视频广告',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '直接访问',
                type: 'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '搜索引擎',
                type: 'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {normal: {}},
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    }

注意：引入NgxEchartsModule的module和使用用echarts组件的位置

如果引入NgxEchartsModule的module位置错误，则会报“Can't bind to 'options' since it isn't a known property of 'div'.”

第二种

1.无需npm安装，只需下载echerts.js放到静态文件夹中

2.新建文件夹echects.d.ts

declare var echarts:any;

2.在angular.json下面的build/script

"scripts": [
    "src/assets/js/echarts.js"
 ]

3.新建组件

main.component.html

<div id="echarts" style="width: 400px;height: 400px;"></div>

main.component.ts

  var myChart = echarts.init(document.getElementById('echarts'));
// 绘制图表
  myChart.setOption({
      title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
  });