需求如图:
用 echarts 实现,代码如下,无注释。
var myChart = echarts.init(document.getElementById('main'));
var x = new Array();
var optionx = new Array();
var y = new Array();
for(var i = 0; i < chartData.length; i++){for (item in chartData[i]){x.push(item);
y.push(chartData[i][item]);
}
}
for(var i = 0; i < x.length; i++){var index1 = x[i].indexOf('-') + 1;
optionx.push(x[i].substring(index1,x[i].length));
}
// 指定图表的配置项和数据
var option = {
backgroundColor: "#FCFCFC",
tooltip : {
backgroundColor: "#17191D",
trigger: 'axis',
axisPointer: {
type: "none",
label: {backgroundColor: '#6a7985'}
},
formatter: function(params, ticket, callback) {return '<div style="padding: 5px;overflow: hidden;"><div style="display: block;font-size: 12px;line-height: 14px;margin-bottom: 6px;">'+x[params[0].dataIndex]+'</div><div style="display: block;width: 1px;height: 9px;border-radius: 3px;background-color: #1890FF;margin-top: 2.5px;float: left;"></div><div style="display: block;float: left;margin-left: 7px;font-size: 12px;line-height: 14px;">'+params[0].data+'</div></div>';
}
},
grid: {
top: 0,
bottom: 36,
left: -20,
right: -20
},
xAxis :{
type : 'category',
boundaryGap : false,
axisLine : {
show: false,
lineStyle :{color : "#C6D2DD"}
},
axisLabel: {color : "#666"},
splitLine : {
show: true,
lineStyle :{
color : "#D7D8DA",
type : "dashed"
}
},
axisTick : {
show: false,
lineStyle :{color : "#EBEBEB"}
},
data : optionx
},
yAxis : {
type : 'value',
axisLine :{show: false},
axisLabel : {show: false},
splitLine : {show: false},
axisTick : {show: false}
},
series : [
{
type:'line',
stack: '总量',
smooth : true, // 是否平滑显示
symbolSize : 6,
itemStyle : {
color: "#FFD205",
borderColor : "#FFD205",
borderWidth : 2
},
lineStyle : {
color : "#FFD205",
width : 4
},
areaStyle : {
color : "#FFF",
origin : "end",
opacity : 1
},
data:y
}
]
};
myChart.setOption(option);