美文网首页ionic2实战
ionic2/3实战-使用ECharts

ionic2/3实战-使用ECharts

作者: 昵称已被使用_ | 来源:发表于2017-12-06 14:58 被阅读1394次

    安装

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

    使用

    • 在页面上放一个div作为图标容器
    <div #chart style="width: 350px;height:280px;"></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} <br/>{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

    其他

    相关文章

      网友评论

        本文标题:ionic2/3实战-使用ECharts

        本文链接:https://www.haomeiwen.com/subject/nhakixtx.html