var colors = ['rgba(251,210,73,0.7)', 'rgba(124,213,253,0.7)', '#7958de', '#01d3e3'];
var aCategorys = ['', '常住人口', ' 农村脱贫', ' 基本养老保险参保', '新增就业
人数', ''];
var topdata = [0, 96, 96, 97, 95, 98, 94, 89, 94, 80, 67, 90, 94, 90, 89]; //峰值data
var aSeries = [{
name: '2016-2017年人口数量',
type: 'line',
symbol: 'circle',
symbolSize: 12,
itemStyle: {
normal: {
color: '#F6A623',
borderColor: "#ffffff",
borderWidth: 2
}
},
lineStyle: {
normal: {
opacity: 0
}
},
data: ['-', 96, 96, 97, 95, '-']
}, {
name: '2020年目标值',
type: 'line',
symbol: 'circle',
symbolSize: 12,
lineStyle: {
normal: {
opacity: 0
}
},
itemStyle: {
normal: {
color: '#57ca2c',
borderColor: "#ffffff",
borderWidth: 2
}
},
data: ['-', 77, 89, 79, 70, '-']
}];
aCategorys.forEach(function(v, i, a) {
var name = v;
if (v !== '') {
var data = [];
for (var j = 0; j < aCategorys.length; j++) {
data.push('-');
}
data[i - 1] = 0;
data[i] = topdata[i];
data[i + 1] = 0;
aSeries.push({
name: name,
type: 'pictorialBar',
smooth: false,
legendHoverLink: false,
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
barCategoryGap: '-130%',
barWidth:'90',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: colors[i - 1] // 0% 处的颜色
}, {
offset: 1,
color: colors[i - 1] // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
data: data,
});
}
});
var option = null;
option = {
backgroundColor: '#33477F',
color: colors,
tooltip: {
trigger: 'axis',
formatter: function(params) {
console.log(params)
var rValue = params[0].name + '<br>';
params.forEach(function(v, i, a) {
if (v.data !== 0 && v.data !== "-" && v.seriesType == "line") {
rValue += '<span style="display:inline-block;margin-right:5px;border-radius:10px;9px;height:9px;background-color:' + v.color + '"></span>' + v.seriesName + ':' + v.data + '<br>';
}
})
return rValue;
}
},
legend: {
icon: 'circle',
itemWidth: 14,
itemHeight: 14,
itemGap: 15,
data: ['2016-2017年人口数量', '2020年目标值'],
// right: '4%',
textStyle: {
fontSize: 14,
color: '#fff'
}
},
xAxis: [{
type: 'category',
boundaryGap: false,
data: aCategorys,
axisLabel: {
textStyle: {
fontSize: 14
}
},
splitLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
axisLine: {
lineStyle: {
color: '#ccc',
1, //这里是为了突出显示加上的
}
},
}],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: [{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: '#455b8e'
}
},
axisLine: {
lineStyle: {
color: '#ccc',
1, //这里是为了突出显示加上的
}
},
}],
series: aSeries
};
$(window).resize(function() {
myChart.resize();
})