ECharts Gallery

20:11:45图表已生成
代码
var data = [
    [1,10,3,'北京',2015],
    [2,11,3,'天津',2015],
    [3,12,3,'河北',2015],
    [4,13,3,'山西',2015],
    [5,14,3,'内蒙古',2015],
    [6,15,3,'辽宁',2015],
    [7,16,3,'吉林',2015],
    [8,17,3,'黑龙江',2015],
    [9,18,3,'上海',2015],
    [10,19,3,'江苏',2015],
    [11,20,3,'浙江',2015],
    [12,21,3,'安徽',2015],
    [13,22,3,'福建',2015],
    [14,23,3,'江西',2015],
    [15,24,3,'山东',2015],
    [16,25,3,'河南',2015],
    [17,26,3,'湖北',2015],
    [18,27,3,'湖南',2015],
    [19,28,3,'广东',2015],
    [20,29,3,'广西',2015],
    [21,30,3,'海南',2015],
    [22,31,3,'重庆',2015],
    [23,32,3,'四川',2015],
    [24,33,3,'贵州',2015],
    [25,34,3,'云南',2015],
    [26,35,3,'西藏',2015],
    [27,36,3,'陕西',2015],
    [28,37,3,'甘肃',2015],
    [29,38,3,'青海',2015],
    [30,39,3,'宁夏',2015],
    [31,40,3,'新疆',2015],
    [1,20,5,'北京',2016],
    [2,21,5,'天津',2016],
    [3,22,5,'河北',2016],
    [4,23,5,'山西',2016],
    [5,24,5,'内蒙古',2016],
    [6,25,5,'辽宁',2016],
    [7,26,5,'吉林',2016],
    [8,27,5,'黑龙江',2016],
    [9,28,5,'上海',2016],
    [10,29,5,'江苏',2016],
    [11,30,5,'浙江',2016],
    [12,31,5,'安徽',2016],
    [13,32,5,'福建',2016],
    [14,33,5,'江西',2016],
    [15,34,5,'山东',2016],
    [16,35,5,'河南',2016],
    [17,36,5,'湖北',2016],
    [18,37,5,'湖南',2016],
    [19,38,5,'广东',2016],
    [20,39,5,'广西',2016],
    [21,40,5,'海南',2016],
    [22,41,5,'重庆',2016],
    [23,42,5,'四川',2016],
    [24,43,5,'贵州',2016],
    [25,44,5,'云南',2016],
    [26,45,5,'西藏',2016],
    [27,46,5,'陕西',2016],
    [28,47,5,'甘肃',2016],
    [29,48,5,'青海',2016],
    [30,49,5,'宁夏',2016],
    [31,50,5,'新疆',2016]
];

var data1=[];
var data2=[];
for(var i=0;i<data.length;i++){
	if(data[i][4]==2015){
       data1.push(data[i]);
    }else{
      data2.push(data[i]); 
    }
}

var schema = [
    {name: 'date', index: 0, text: '日'},
    {name: 'AQIindex', index: 1, text: 'GDP'},
    {name: 'PM25', index: 2, text: '单位污染物'},
    {name: 'PM10', index: 3, text: 'PM10'},
    {name: 'CO', index: 4, text: '一氧化碳（CO）'},
    {name: 'NO2', index: 5, text: '二氧化氮（NO2）'},
    {name: 'SO2', index: 6, text: '二氧化硫（SO2）'}
];


var itemStyle = {
    normal: {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
};

option = {
    backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
        offset: 0,
        color: '#f7f8fa'
    }, {
        offset: 1,
        color: '#cdd0d5'
    }]),
    color: [
        //'#70D1E0', '#E47078'
    ],
    legend: {
        y: '10%',
        data: ['2015', '2016'],
        textStyle: {
            //color: '#fff',
            fontSize: 16
        }
    },
    grid: {
        x: '10%',
        x2: 150,
        y: '18%',
        y2: '10%'
    },
    tooltip: {
        padding: 10,
        //backgroundColor: '#222',
        borderColor: '#777',
        borderWidth: 1,
        formatter: function (obj) {
            var value = obj.value;
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + obj.seriesName +' '+ value[3] +'：'
                + '</div>'
                + schema[1].text + '：' + value[1] + '<br>'
                + schema[2].text + '：' + value[0] + '<br>';
        }
    },
    xAxis: {
        type: 'value',
        name: '单位污染物\n（吨/万元）',
        nameGap: 16,
        nameTextStyle: {
            //color: '#fff',
            fontSize: 14
        },
      	min: 0,
        //max: 31,
        splitLine: {
            lineStyle: {
              	color: ['#ccc'],
                type: 'dashed'
            }
        },
        axisLine: {
            lineStyle: {
              	color: '#777'
            }
        },
        axisTick: {
            lineStyle: {
              	color: '#777'
            }
        },
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                //color: '#fff'
            }
        }
    },
    yAxis: {
        type: 'value',
        name: 'GDP（亿元）',
        nameLocation: 'end',
        nameGap: 20,
      	scale: true,
        nameTextStyle: {
            //color: '#fff',
            fontSize: 16
        },
      	min: 0,
        axisLine: {
            lineStyle: {
                color: '#777'
            }
        },
        axisTick: {
            lineStyle: {
                color: '#777'
            }
        },
        splitLine: {
            lineStyle: {
              	color: ['#ccc'],
                type: 'dashed'
            }
        },
        axisLabel: {
            textStyle: {
                //color: '#fff'
            }
        }
    },
    visualMap: [
        {
            left: 'right',
            top: '10%',
            dimension: 2,
            min: 0,
            max: 250,
            itemWidth: 30,
            itemHeight: 120,
            calculable: true,
            precision: 0.1,
            text: ['圆形大小：项目个数'],
            textGap: 30,
            textStyle: {
                //color: '#fff'
            },
            inRange: {
                symbolSize: [10, 70]
            },
            outOfRange: {
                symbolSize: [10, 70],
                //color: ['rgba(255,255,255,.2)']
            },
            controller: {
                inRange: {
                    //color: ['#c23531']
                },
                outOfRange: {
                    //color: ['#444']
                }
            }
        },
        {
            left: 'right',
            bottom: '10%',
            dimension: 1,
            min: 0,
            max: 50,
            itemHeight: 120,
            calculable: true,
            precision: 0.1,
            text: ['明暗：GDP'],
            textGap: 30,
            textStyle: {
                //color: '#fff'
            },
            inRange: {
                colorLightness: [1, 0.5]
            },
            outOfRange: {
                //color: ['rgba(255,255,255,.2)']
            },
            controller: {
                inRange: {
                    //color: ['#c23531']
                },
                outOfRange: {
                    //color: ['#444']
                }
            }
        }
    ],
    series: [
        {
            name: '2015',
            type: 'scatter',
            data: data1,
          	symbolSize: function (data) {
              	return Math.sqrt(data[2]) / 5e2;
            },
            label: {
              	emphasis: {
                show: true,
                formatter: function (param) {
                  	return param.data[3];
                },
                position: 'top'
              }
            },
            itemStyle: {
              	normal: {
                	shadowBlur: 10,
                	shadowColor: 'rgba(25, 100, 150, 0.5)',
                	shadowOffsetY: 5,
                	/*color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                  		offset: 0,
                  		color: 'rgb(129, 227, 238)'
                		}, {
                  		offset: 1,
                  		color: 'rgb(25, 183, 207)'
                	}])*/
              }
            }
        },
        {
            name: '2016',
            type: 'scatter',
            data: data2,
            symbolSize: function (data) {
                return Math.sqrt(data[2]) / 5e2;
            },
            label: {
                emphasis: {
                    show: true,
                    formatter: function (param) {
                        return param.data[3];
                    },
                    position: 'top'
                }
            },
            itemStyle: {
                normal: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(120, 36, 50, 0.5)',
                    shadowOffsetY: 5,
                    /*color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                        offset: 0,
                        color: 'rgb(251, 118, 123)'
                    }, {
                        offset: 1,
                        color: 'rgb(204, 46, 72)'
                    }])*/
                }
            }
        }
    ]
};


myChart.clear();
setTimeout(function () {
    
    // $(myChart.getDom()).css('background', 'radial-gradient(circle at 50% 0, #475b7a 0%, #3c4656 100%)');
    
    var zr = myChart.getZr();
    myChart.off('click');
    myChart.on('click', function (param) {
        var seriesModel = myChart.getModel().getSeriesByIndex(param.seriesIndex);
        var data = seriesModel.getData();
        var coordSys = seriesModel.coordinateSystem;
        var color = data.getItemVisual(param.dataIndex, 'color');
        var symbolSize = data.getItemVisual(param.dataIndex, 'symbolSize');
        var pt1 = coordSys.dataToPoint(param.value);
        var pt2 = coordSys.dataToPoint([param.value[0], 0]);
        var line = new echarts.graphic.Line({
            shape: {
                x1: pt1[0],
                y1: pt1[1],
                x2: pt1[0],
                y2: pt1[1]
            },
            style: {
                stroke: color,
                opacity: 0.6
            },
            z: 100
        });
        
        line.animate('shape')
            .when(300, {
                y1: pt1[1]
            })
            .when(500, {
                y1: pt1[1] * 0.7 + 0.3 * pt2[1],
                y2: pt2[1]
            })
            .when(1000, {
                y1: pt1[1],
                y2: pt1[1]
            })
            .done(function () {
                zr.remove(line);
            })
            .start(function (t) {
                var y = Math.sin(t * Math.PI) * 0.5;
                if (t >= 0.5) {
                    y = 1 - y;
                }
                return y;
            });
            
        var circle = new echarts.graphic.Circle({
            shape: {
                cx: pt2[0],
                cy: pt2[1],
                r: 0
            },
            style: {
                fill: color
            },
            z: 100
        });
        var circle2 = new echarts.graphic.Circle({
            shape: {
                cx: pt1[0],
                cy: pt1[1],
                r: symbolSize
            },
            style: {
                fill: color,
                opacity: 0.4
            }
        });
        circle2.animateTo({
            shape: {
                r: symbolSize * 1.5
            },
            style: {
                opacity: 0
            }
        }, 400, function () {
            zr.remove(circle2);
        })
        
        circle.animate('shape')
            .when(250, {
                r: 6
            })
            .when(500, {
                r: 0
            })
            .delay(500)
            .done(function () {
                zr.remove(circle);
            })
            .start(function (t) {
                var y = Math.sin(t * Math.PI) * 0.5;
                if (t >= 0.5) {
                    y = 1 - y;
                }
                return y;
            });
            
        
        zr.add(circle);
        zr.add(circle2);
        zr.add(line);
    });
});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
