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: ,
        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: [, , ]
        },
        {
          name: '半年',
          type: 'bar',
          label: labelOption,
          data: [, , ]
        },
        {
          name: '一年',
          type: 'bar',
          label: labelOption,
          data: [, , ]
        }
      ]
    }
    myChart.setOption(option);
}
           

3.效果圖