ionic2/3实战-使用ECharts

• ECharts API
• ECharts demo

安装

npm install echarts --save
npm install @types/echarts --save

使用

• 在页面上放一个div作为图标容器

• ts

import {Component, ViewChild, ElementRef} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
import ECharts from 'echarts';

@Component({
  selector: 'page-echarts-demo',
  templateUrl: 'echarts-demo.html',
})
export class EchartsDemoPage {
  @ViewChild('chart') chart: ElementRef;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidEnter() {
    this.initChart();
  }

  initChart() {
    let element = this.chart.nativeElement;
    element.style.width = (document.body.clientWidth - 16) + 'px';//设置容器宽度
    let myChart = ECharts.init(element);
    myChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: "{a} 
{b}: {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
          ]
        }
      ]
    });
  }

}

效果

• 这里只是演示ionic使用ECharts的demo,至于其他图表和数据动态化,请阅读api

其他

• ionic中使用Chart.js
• 完整app代码已上传github