需求如图:
用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);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。