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

chart components built with Vue.js

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


var ColumnChart = class ColumnChart extends GenreMaker {



    getChart(stage,subGenre,data,theme){

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

      // mycharts.dispose();

      var option = new Object();
      option.chart = new Object();
      option.title={text:"图形预览",x:'center'};
      option.tooltip={trigger:"axis"};
      option.yAxis=[{type:'value'}];


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

      switch (subGenre) {
        case "column_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;//getChartData("column_basic",data);//[{name:'蒸发量',type:'bar',data:[10000, 12000, 18000, 11000, 9000]}];
          break;
        case "column_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;
    }



}




GenreMaker.column = ColumnChart;

export var ColumnChart;