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

chart components built with Vue.js

import GenreMaker from '../echart/genreMaker';

var LineChart = class LineChart 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.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 "line_basic":

        var seriesArr =new Array();

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

          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 "line_spline":

        var seriesArr =new Array();

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

          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 "series_line":
      //   option.xAxis=[{type:'category',data:['QTR1','QTR2','QTR3','QTR4']}];
      //   option.series=[{name:'A',type:'line',data:[3.8,5.5,9.9,5.7]},{name:'b',type:'line',data:[5.5,7.0,9.7,7.6]},{name:'c',type:'line',data:[6.9,9.6,8.3,9.7]}];
      //   break;
      // case "series_spline":
      //   option.xAxis=[{type:'category',data:['QTR1','QTR2','QTR3','QTR4']}];
      //   option.series=[{name:'A',type:'line',smooth:true,data:[3.8,5.5,9.9,5.7]},{name:'b',type:'line',smooth:true,data:[5.5,7.0,9.7,7.6]},{name:'c',type:'line',smooth:true,data:[6.9,9.6,8.3,9.7]}];
      //   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.line = LineChart;

export var LineChart;