var json = [10, 20, 13, 41, 25, 36, 47]; option = { tooltip: { trigger: 'axis', //功能是转换tooltip中‘undefied’和‘-’的value值为‘暂无’，未使用异步回调，tooltip样式在外部调整 formatter: function(params) { var content = ''; //两个for将params中需要的参数嵌入HTML代码块字符串content中 for (var i = 0; i < params.length; i++) { if (params[i].name) { content += "

" + params[i].name + "

"; break; } } //把上下两个相同的数据取消 var currValue; for (var i = 0, key = {}; i < params.length; i++) { key = params[i]; var flag = typeof key.value === 'undefined' || key.value === '-'; if (!flag) { if (key.value != currValue) { content += "

" + key.seriesName + " : " + key.value + "

"; } currValue = key.value; } } content += '

'; //return出去后echarts会调用html()函数将content字符串代码化 return content; } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [{ name: '人数', type: 'line', data: json.slice(0, 2) }, { name: '预测人数', type: 'line', smooth: false, //关键点，为true是不支持虚线，实线就用true itemStyle: { normal: { lineStyle: { width: 2, type: 'dotted' //'dotted'虚线 'solid'实线 } } }, data: ['-'].concat(json.slice(1, 4)) }, { name: '人数', type: 'line', data: ['-', '-', '-'].concat(json.slice(3, 6)) }, { name: '预测', type: 'line', smooth: false, //关键点，为true是不支持虚线，实线就用true itemStyle: { normal: { lineStyle: { width: 2, type: 'dotted' //'dotted'虚线 'solid'实线 } } }, data: ['-', '-', '-', '-', '-'].concat(json.slice(5, 7)) }, ] };

Echarts在线免费图表