echarts value配置项内容和展示
配置项如下
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);
});
});
截图如下
