需求如图：
用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);