vue-chart-engine/src/highchart/highchartData.js

chart components built with Vue.js

export var getData = function(typeChart,typeKey,container,showData){
      var option = new Object();
      option.chart = new Object();
      option.chart.type = typeChart;
      option.chart.renderTo = container;

      if(typeChart == "line" || typeChart == "column" || typeChart == "bar" || typeChart == "area" || typeChart == "pie") {

        //给X轴横坐标赋值
        var xAxisContent = new Array();
        for( var n=0;n < showData.length;n++ )
          {
            xAxisContent[n]=showData[n][0];
          }
        option.xAxis={categories:xAxisContent};


        option.series = new Array();
        //获取前台数据后，进行转换
       for( var i=0;i < showData[0].length - 1;i++ ){
          var dataContent = new Array();
          option.series[i] = new Object();
          for( var n=0;n < showData.length;n++ ){
            dataContent[n]=showData[n][i+1];
          }
          option.series[i].data = dataContent;
        }
      }
      else if( typeChart == "bubble" ) {
          //单系列数据
          if (showData.length == 1) {
            option.series = new Array();
            option.series[0] = new Object();
            for( var i=0;i < showData[0].length;i++ ){
              var dataF = parseFloat(showData[0][i])
              showData[0][i][0] = dataF;
            }
            option.series[0].data = showData[0];
          }
          else{
            //气泡图中的多系列数据转换
            option.series = new Array();
            for( var i=0;i < showData.length;i++ ){
              option.series[i] = new Object();
              for( var n=0;n < showData[0].length;n++ ){
                var dataF = parseFloat(showData[i][n])
                showData[i][n][0] = dataF;
              }
              option.series[i].data = showData[i];
            }
          }
      }
      else if( typeChart == "scatter") {
        //获取前台数据后，进行转换
        if (showData[0].length == 2) {
            option.series = new Array();
            option.series[0] = new Object();
            // option.series[0].data = [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8]];
            option.series[0].data = showData;
        }else if (showData[0][0].length == 3) {
          option.series = new Array();
          option.series[0] = new Object();
          option.series[0].data = showData[0];

        }
      }
      else if(typeChart == "funnel" || typeChart == "pyramid" ){

        option.series = new Array();
        option.series[0] = new Object();
        option.series[0].data = showData;
      }
      else if(typeChart == "heatmap"){

        option.series = new Array();
        option.series[0] = new Object();
        option.series[0].data = [[0, 0, 15], [0, 1, 17], [0, 2, 21], [0, 3, 23],
                                 [1, 0, 34], [1, 1, 33], [1, 2, 32], [1, 3, 30],
                                 [2, 1, 43], [2, 2, 42], [2, 3, 40], [2, 4, 38],
                                 [3, 0, 8], [3, 1, 8], [3, 2, 7], [3, 3, 8]];
        // option.series[0].dataLabels.enabled=true;
      }
      else if(typeChart == "wordcloud"){
        var text = showData[0];
var data = text
    .split(/[,\. ]+/g)
    .reduce(function (arr, word) {
        var obj = arr.find(function (obj) {
            return obj.name === word;
        });
        if (obj) {
            obj.weight += 1;
        } else {
            obj = {
                name: word,
                weight: 1
            };
            arr.push(obj);
        }
        return arr;
    }, []);
    option.series = new Array();
    option.series[0] = new Object();
    option.series[0].data = data;

      }
      else {

        alert("未知图形类型");

      }

      option.title={title:""};

      option.yAxis={title:{text:""}};

       var data = option;

    switch(typeKey)
    {
      //普通线图
    case "line_basic":
    option.chart.type="line";
    data = option;
      break;

      //普通曲线图
    case "line_spline":
    option.chart.type="spline";
    data = option;
      break;

      //普通柱状图
    case "column_basic":
      option.chart.type="column";
      data = option;
      break;

      //堆叠柱状图
    case "column_stacked":
      option.chart.type="column";
      option.plotOptions={series:{stacking:'normal'}};
      data = option;
      break;

      //百分比堆叠柱状图
    case "column_percent_stacked":
      option.chart.type="column";
      option.plotOptions={column:{stacking:'percent'}};
      data = option;
      break;

      //普通条形图
    case "bar_basic":
      option.chart.type="bar";
      data = option;
      break;

      //堆叠条形图
    case "bar_stacked":
      option.chart.type="bar";
      option.plotOptions={series:{stacking:'normal'}};
      data = option;
      break;

      //百分比堆叠条形图
    case "bar_percent_stacked":
      option.chart.type="bar";
      option.plotOptions={bar:{stacking:'percent'}};
      data = option;
      break;

      //基础面积图
    case "area_basic":
      option.chart.type="area";
      option.plotOptions={area:{pointStart:1000,marker:{enabled:false,symbol:'circle',radius:2,depth:35}}};
      data = option;
      break;

      //面积堆叠图
    case "area_stacked":
      option.chart.type="area";
      option.plotOptions={area:{stacking:'normal'}};
      data = option;
      break;

      //百分比堆叠面积图
    case "area_percent_stacked":
      option.chart.type="area";
      option.plotOptions={area:{stacking:'percent'}};
      data = option;
      break;

      //面积平滑图
    case "area_spline":
      option.chart.type="areaspline";
      option.plotOptions={areaspline:{stacking:'normal',fillOpacity: 0.5}};
      data = option;
      break;

      //面积平滑堆叠图
    case "area_stacked_spline":
      option.chart.type="areaspline";
      option.plotOptions={areaspline:{stacking:'percent',fillOpacity: 0.5}};
      data = option;
      break;

      //基础饼图
    case "pie_basic":
        option.chart.type="pie";
        data = option;
        break;

      //基础散点图
    case "scatter_basic":
        option.chart.type="scatter";
        data = option;
        break;

      //散点气泡图
    case "scatter_bubble":
        option.chart.type="bubble";
        data = option;
        break;

      //基础气泡图
    case "bubble_basic":
        option.chart.type="bubble";
        data = option;
        break;

      //基础漏斗图
    case "funnel_basic":
        option.chart.type="funnel";
        data = option;
        break;

      //基础金字塔图
    case "pyramid_basic":
        option.chart.type="pyramid";
        data = option;
        break;

      //基础热区图
    case "heatmap_basic":
        option.chart.type="heatmap";

        option.chart={series:[{borderWidth: 1,data:[[0, 0, 15], [0, 1, 17], [0, 2, 21], [0, 3, 23],
                                 [1, 0, 34], [1, 1, 33], [1, 2, 32], [1, 3, 30],
                                 [2, 1, 43], [2, 2, 42], [2, 3, 40], [2, 4, 38],
                                 [3, 0, 8], [3, 1, 8], [3, 2, 7], [3, 3, 8]]}],renderTo:container};
        data = option;
        break;

      //立体堆叠柱图
    case "column_3d_stacked":
        option.chart={type:'column',options3d:{enabled:true,alpha:10,beta:25,depth:35},renderTo:container};
        option.plotOptions={column:{depth:25}};
        data = option;
        break;

      //立体堆叠百分比柱图
    case "column_3d_percent_stacked":
        option.chart={type:'column',options3d:{enabled:true,alpha:10,beta:25,depth:35},renderTo:container};
        option.plotOptions={column:{depth:25,stacking:'percent'}};
        data = option;
        break;

      //立体堆叠柱图
    case "bar_3d_stacked":
        option.chart={type:'bar',options3d:{enabled:true,alpha:10,beta:25,depth:35},renderTo:container};
        option.plotOptions={bar:{depth:25}};
        data = option;
        break;

      //立体堆叠百分比柱图
    case "bar_3d_percent_stacked":
        option.chart={type:'bar',options3d:{enabled:true,alpha:10,beta:25,depth:35},renderTo:container};
        option.plotOptions={bar:{depth:25,stacking:'percent'}};
        data = option;
        break;

      //基础桑基图（不能显示）
    case "sankey_basic":
        // option.chart.type="sankey";
        option.chart={series:{keys:['from', 'to', 'weight'],type:'sankey',data:[['Brazil', 'Portugal', 5 ],['Brazil', 'France', 1 ],['Brazil', 'Spain', 1]
      ]},renderTo:container};
        data = option;
        break;

      //基础词云图
    case "wordcloud_basic":
        option.chart.type="wordcloud";
        data = option;
        break;
//$$$$$$$$$$$$$$$$$$$$$$$$$$分割线上面的是配合数据字典新整理添加的2017年09月26日



      //分组柱状图
    case "series":
      data = option;
      break;





    case "simpleline":
        option.chart.type="line";
        data = option;
        break;

    case "spline":
        option.chart.type="spline";
        data = option;
        break;

    case "series_line":
        option.chart.type="line";
        data = option;
        break;

    case "series_spline":
        option.chart.type="spline";
        data = option;
        break;

    //面积范围图（这个还存在问题，后续需要修改2017年07月21日 by Mark）
    case "arearange":
    // function(){
    // $.ajax({
    //   async: false,
    //   type:'get',
    //   url:'https://data.jianshukeji.com/jsonp?filename=json/range.json&callback=?',
    //   success: function test(data){
    //     alert("ddd");
    //     option.chart.type="arearange";
    //     option.series={name:'气温',data: data};
    //     data = option;
    //   }
    //   });
    // };
    $.ajaxSettings.async = false;
    $.getJSON('../../static/arearange.json', function(data){
        option.series = new Array();
        option.series[0] = new Object();
        option.series[0].name="气温";
        option.series[0].data=data;
        option.chart.type="arearange";
        data = option;
    });
    $.ajaxSettings.async = true;

        break;


    default:

    }
    return data;
}

var getSeriesData = function(){

}