ionic2 引入百度ECharts3

简介

百度的ECharts 很强大，通过提供方便丰富的可视化图表，极大缩短了用户与数据的距离，值得我们深入研究学习。

安装

看官方文档可以知道ECharts可以在webpack中使用看这里，故我们可以使用npm下载安装到项目中

npm install echarts --save
//下载ECharts 
npm install @types/echarts --save 
// ECharts的官方版本是基于JavaScript 的，下载ECharts的TypeScript定义文件

使用

1.在需要使用的页面的ts文件中引入并在页面设置一个放图表的容器

import ECharts from 'echarts';

<div #main1 id="main1" style="width: 100%;height: 280px"></div>
//或者
<div id="main1" style="width: 100%;height: 280px"></div>

2.在ts文件中使用

• 使用传统的dom操作

let myChart = ECharts.init(document.getElementById('main2') as HTMLDivElement);

• 使用@ViewChild，建议使用此angular的dom操作

@ViewChild('main1') mychart1: ElementRef;

let myChart = ECharts.init(this.mychart1.nativeElement);

• 完整代码

ionViewWillEnter() {
    let myChart = ECharts.init(this.mychart1.nativeElement);
    var labelOption = {
      normal: {
        show: true,
        position: 'top',
        fontSize: 12,
        rich: {
          name: {
            textBorderColor: '#fff'
          }
        }
      }
    };
    // 指定图表的配置项和数据
    let option = {
      // title: {
      //   text: '主要物资采购分析'
      // },
      grid: {
        // left: '5%',
        right: '0'
      },
      color: ['#003366', '#006699', '#4cabce'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['当月', '半年', '一年'],
        left: 'center',
        top: 'top'
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          axisTick: {show: false},
          data: ['变压器', '电缆', '高压电']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '当月',
          type: 'bar',
          barGap: '10%',
          label: labelOption,
          data: [320, 332, 301]
        },
        {
          name: '半年',
          type: 'bar',
          label: labelOption,
          data: [220, 182, 191]
        },
        {
          name: '一年',
          type: 'bar',
          label: labelOption,
          data: [150, 232, 201]
        }
      ]
    }
    myChart.setOption(option);
}

3.效果图