1. 程式人生 > >echarts散點圖整理

echarts散點圖整理

 引入js

<script type="text/javascript" src="jquery.min.js"></script>

 <script type="text/javascript" src="echarts.js"></script>

 <script type="text/javascript" src="ecStat.min.js"></script>

<script>

    var chart = document.getElementById('column');
    var echart = echarts.init(chart);
    var data = [[1, 4862.4], [2, 5294.7], [3, 5934.5], [4, 7171.0], [5, 8964.4], [6, 10202.2], [7, 11962.5], [8, 14928.3], [9, 16909.2], [10, 18547.9], [11, 21617.8], [12, 26638.1], [13, 34634.4], [14, 46759.4], [15, 58478.1], [16, 67884.6], [17, 74462.6], [18, 79395.7]];
    var myRegression = ecStat.regression('exponential', data);
    myRegression.points.sort(function(a, b) {
         return a[0] - b[0];
    });
    var option = {
        title: {
           text: '主標題',
           subtext: '副標題',
           sublink: 'https://github.com/ecomfe/echarts-stat',
           left: 'center'
         },
         tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross'
         }
       },
      xAxis: {
          type: 'value',
          splitLine: {
              lineStyle: {
                 type: 'dashed'
               }
             },
          splitNumber: 2 
        },
        yAxis: {
            type: 'value',
            name: "地鐵",
            axisLabel: {
               show: false
            },
            splitLine: {
               lineStyle: {
                 type: 'dashed'
                }
              }
            },
            series: [

              {
                name: 'scatter',
                type: 'scatter',
                symbolSize: function(value, param) {
                   if (value[0] == 1) {
                      return 10;
                   } else if (value[0] == 10) {
                       return 20;
                   } else if (value[0] == 3) {
                       return 15;
                   } else if (value[0] == 18) {
                       return 10;
                   }
                },
                label: {
                  emphasis: {
                      show: true,
                      position: 'left',
                      textStyle: {
                         color: 'blue',
                         fontSize: 16
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                       color: function(params) {
                       var colorList = ['#C1232B', '#B5C334', '#FCCE10'];
                        // return colorList[params.dataIndex]
                       if (params.dataIndex === 2) {
                            return colorList[2]
                        } else {
                            return colorList[1]
                        }
                     }
                  }
               },
              data: data
          }]
       };
      echart.setOption(option);

</script>