ionic + echarts的基础运用

前言
图表在项目开发的过程中时经常用到的，在这里记录下自己遇到的在ionic中引用echarts的问题

安装
1.使用npm安装ECharts

npm install echarts --save

2.安装 ECharts 的 TypeScript 定义文件

npm install @types/echarts --save

引用
1.打开使用echarts页面的ts文件，将ECharts引入进来，在头部添加

import * as echarts from 'echarts'; 

2.在html页面添加div

<ion-content> 
    <div id="chart"></div> 
</ion-content> 
//可以再css中设置高宽

3.在ts文件中开始设置

@ViewChild('chart') chart;
//此处是根据HTML中div的id进行设置

ionViewDidEnter(){
    let myChart = echarts.init(<HTMLDivElement>document.getElementById('chart'));
    //获取到div,进行初始化表格
    let option = {
          title: {
            text: '及时率报表',
            x: 'center'
          },
          tooltip: {},
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['及时', '延时']
          },
          xAxis: {
            data: xname,
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          },
          yAxis: {},
          series: [{
            name: '及时',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: [12,13,15,16,11,12]
          }, {
            name: '延时',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data:  [12,13,15,16,11,12]
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
}

最后的显示结果如下图：

在这里插入图片描述

本文搬运自本人CSDN博客，原创非抄袭