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

chart components built with Vue.js

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


var BarChart = class BarChart 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"};
    option.xAxis=[{type:'value'}];

    var nameArr =new Array();
    for(var i = 0; i < data.length; i++)
    {
      nameArr.push(data[i][0]);
    }
    option.yAxis=[{type:'category',data:nameArr}];

     // var data = option;
    switch (subGenre) {
      case "bar_basic":

        var seriesArr =new Array();

        for(var i=1 ;i < data[0][0].length; i++)
        {
          var obj = new Object();
          obj.name="a";
          obj.type="bar";

          var darr = new Array();
          for(var j= 0 ; j < data.length; j++)
          {
            darr.push(data[j][i]);
          }

          obj.data =darr;
          seriesArr.push(obj);
        }

        option.series=seriesArr;
        break;

      case "bar_stacked":
        var seriesArr =new Array();

        for(var i=1 ;i < data[0][0].length; i++) {
          var obj = new Object();
          obj.name = i;
          obj.stack = "1";
          obj.type = "bar";

          var darr = new Array();
          for (var j = 0; j < data.length; j++) {
            darr.push(data[j][i]);
          }

          obj.data = darr;
          seriesArr.push(obj);
        }

        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.bar = BarChart;

export var BarChart;