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

chart components built with Vue.js

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


var BubbleChart = class BubbleChart 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: 'axis', showDelay : 0, axisPointer:{ show: true, type : 'cross', lineStyle: { type : 'dashed', width : 1 } } };

    option.xAxis=[{type : 'value',scale:true,axisLabel : {formatter: '{value}'}}];
    option.yAxis=[{type : 'value',scale:true,axisLabel : {formatter: '{value}'}}];

    // var data = option;
    switch (subGenre) {
      case "bubble_basic":
        var seriesArr =new Array();
        for(var i=0 ;i < data.length; i++) {
          var obj = new Array();
          obj.push(data[i][0]);
          obj.push(data[i][1]);
          obj.push(data[i][2]);
          seriesArr.push(obj);
        }

            option.series=[{name:'scatter1',type:'scatter',
                  symbolSize: function (value){
                      return Math.round(value[2] / 1);
                  },
                  data:  seriesArr}]




        // data = option;
        // option.series=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;//echarts.init(document.getElementById('container'));
  }

}



GenreMaker.bubble = BubbleChart;

export var BubbleChart;