vue-chart-engine/src/echart/pieChart.js

chart components built with Vue.js

import GenreMaker from '../echart/genreMaker';
import * as DataMaker from '../echart/echartData';


var PieChart = class PieChart extends GenreMaker {

    getChart(stage,subGenre,data,theme){

        var mycharts = echarts.init(document.getElementById(stage));


    var option = new Object();
    option.chart = new Object();
    option.title={text:"图形预览",x:'center'};
    option.tooltip={trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)"};
    option.calculable = true;

    option.toolbox= {
           show : true,
           feature : {
               mark : {show: true},
               dataView : {show: true, readOnly: false},
               magicType : {
                   show: true,
                   type: ['pie', 'funnel'],
                   option: {
                       funnel: {
                           x: '25%',
                           width: '50%',
                           funnelAlign: 'left',
                           max: 1548
                       }
                   }
               },
               restore : {show: true},
               saveAsImage : {show: true}
           }
       };


        var nameArr =new Array();
        for(var i = 0; i < data.length; i++)
        {
            nameArr.push(data[i][0]);
        }
        option.legend={ orient : 'vertical', x : 'left', data: nameArr };

    switch (subGenre) {
      case "pie_basic":

          var seriesArr =new Array();
          for(var i=0 ;i < data.length; i++) {
            var obj = new Object();
              obj.name=data[i][0];
              obj.value = data[i][1];
              seriesArr.push(obj);
          }


        option.series=[{name:'蒸发量',type:'pie',  radius : '55%', center: ['50%', '60%'],
        data:seriesArr}];

        break;

        case "pie_doughnut":

            var seriesArr =new Array();
            for(var i=0 ;i < data.length; i++) {
                var obj = new Object();
                obj.name=data[i][0];
                obj.value = data[i][1];
                seriesArr.push(obj);
            }
        option.series = [
        {
            name:'蒸发量',
            type:'pie',
            radius : ['50%', '70%'],
            itemStyle : {
                normal : {
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            fontSize : '30',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:seriesArr}];



        break;

      default:

    }
        mycharts.setOption(option);
    // switch(theme) {
    //   case "roma":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/roma')).setOption(data);
    //   break;
    //   case "sakura":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/sakura')).setOption(data);
    //   break;
    //   case "shine":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/shine')).setOption(data);
    //   break;
    //   case "default":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/default')).setOption(data);
    //   break;
    //
    //   case "infographic":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/infographic')).setOption(data);
    //   break;
    //
    //   case "macarons":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/macarons')).setOption(data);
    //   break;
    //
    //   case "blue":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/blue')).setOption(data);
    //   break;
    //
    //   case "dark":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/dark')).setOption(data);
    //   break;
    //
    //   case "gray":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/gray')).setOption(data);
    //   break;
    //
    //   case "green":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/green')).setOption(data);
    //   break;
    //
    //   case "helianthus":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/helianthus')).setOption(data);
    //   break;
    //
    //   case "mint":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/mint')).setOption(data);
    //   break;
    //
    //   case "red":
    //     echarts.init(document.getElementById('container'),require('../../static/echarttheme/red')).setOption(data);
    //   break;
    //   default:
    // }
        return mycharts;
  }

}



GenreMaker.pie = PieChart;

export var PieChart;