let timeData = [ '2009/6/11', '2009/6/12', '2009/6/13', '2009/6/14', '2009/6/15', '2009/6/16', '2009/6/17']; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', shadowStyle: { color: 'transparent' } }, formatter: function (params) { // console.log(params); let htmlStr = ''; htmlStr += `

`; htmlStr += `${timeData[params[0].dataIndex]}`; for (let i = 0; i < params.length; i++) { let param = params[i]; let seriesName = param.seriesType == "scatter" ? '满载率' : param.seriesName;//图例名称 let unit = seriesName == '客流' || seriesName == '客流预测' ? '(人次)' : seriesName == '公交' || seriesName == '公交预测' ? '(辆)' : '(%)'; let value = param.value;//y轴值 let color = typeof param.color == 'string' ? param.color : param.color.colorStops[0].color;//图例颜色 let marker = param.marker;//圆点 htmlStr += `

`; htmlStr += marker; //圆点后面显示的文本 htmlStr += `${seriesName}${unit}${value}`; htmlStr += '

'; } return htmlStr; }, }, // legend: { // show: true, // right: 5, // top: 8, // textStyle: { // fontSize: 12, // color: '#666666' // }, // selectedMode: false, // itemWidth: 20, // itemHeight: 10, // data: [{ // name: '公交', // icon: 'circle', // color: 'inherit' // }, { // name: '客流', // icon: 'circle', // color: 'inherit' // }] // }, axisPointer: { link: [ { xAxisIndex: 'all' } ] }, grid: [{ left: '5%', top: '15%', right: 50, height: '25%' }, { left: '5%', right: 50, top: '40%', height: '25%' }, { left: '5%', right: 50, bottom: '35%', height: '15%', }, { left: '5%', right: 50, bottom: '10%', height: '9%', }], xAxis: [{ gridIndex: 0, type: 'category', boundaryGap: true, axisLine: { onZero: false, show: false }, axisTick: { show: false }, axisLabel: { show: false }, data: timeData, }, { gridIndex: 1, type: 'category', boundaryGap: true, axisLine: { onZero: false, lineStyle: { color: '#EB5D00', width: 1, type: [8, 6], dashOffset: 10, }, }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { lineStyle: { color: '#E6E9ED', type: 'dashed' } }, data: timeData, position: 'top' }, { gridIndex: 2, type: 'category', boundaryGap: true, axisLine: { onZero: false }, axisTick: { show: false }, axisLabel: { show: true }, data: timeData, position: 'bottom' }, { gridIndex: 3, type: 'category', boundaryGap: true, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false, }, position: 'bottom' }], yAxis: [ { name: '(辆)', type: 'value', gridIndex: 0, splitLine: { lineStyle: { color: '#E6E9ED', type: 'dashed' } }, // max: 500 }, { gridIndex: 1, name: '(人次)', type: 'value', inverse: true, splitLine: { lineStyle: { color: '#E6E9ED', type: 'dashed' } }, }, { gridIndex: 2, type: 'value', }, { gridIndex: 3, name: '满载率', nameLocation: 'center', // nameRotate: 90, // verticalAlign: 'middle', nameTextStyle: { width: 14, overflow: 'break', fontSize: 14, color: '#333333', label: { formatter: [ '{a|满}', '{a|载}', '{a|率}' ].join('\n'), rich: { a: { fontSize: '14px', color: 'red' }, } } }, type: 'value', splitLine: { show: false, }, axisLabel: { show: false }, } ], series: [{ name: '公交', type: 'bar', barWidth: 10, xAxisIndex: 0, yAxisIndex: 0, itemStyle: { color: '#3AA1FF', borderWidth: 1, borderColor: '#ffffff', borderRadius: [10, 10, 0, 0] }, // prettier-ignore data: [97, 96, 96, 95, 95,] }, { name: '公交预测', type: 'bar', barWidth: 10, xAxisIndex: 0, yAxisIndex: 0, itemStyle: { color: ' rgba(58,161,255,0.3)', borderWidth: 1, borderColor: '#ffffff', borderRadius: [10, 10, 0, 0] }, // prettier-ignore data: [97, 96, 96, 95, 95, 200, 150] }, { name: '客流', type: 'bar', barWidth: 10, xAxisIndex: 1, yAxisIndex: 1, itemStyle: { color: '#35CBCA', borderWidth: 1, borderColor: '#ffffff', borderRadius: [0, 0, 10, 10] }, // prettier-ignore data: [5, 17, 17, 7, 17,] }, { name: '客流预测', type: 'bar', barWidth: 10, xAxisIndex: 1, yAxisIndex: 1, itemStyle: { color: 'rgba(53, 203, 202, 0.30)', borderWidth: 1, borderColor: '#ffffff', borderRadius: [0, 0, 10, 10] }, // prettier-ignore data: [5, 17, 17, 7, 17, 11, 26] }, { type: 'scatter', // symbolSize: 20, xAxisIndex: 3, yAxisIndex: 3, itemStyle: { color: '#FAD53A' }, label: { show: true, color: '#333333', fontSize: 14, formatter: (params) => { console.log(params) return params.value[0] } }, data: [ { value: 10.0, symbolSize: 50 }, { value: 4.2, symbolSize: 20 }, { value: 5.2, symbolSize: 30 }, { value: 6, symbolSize: 35 }, { value: 8.5, symbolSize: 40 }, { value: 4.2, symbolSize: 20 }, { value: 3.2, symbolSize: 10 }, ] }] };;

Echarts在线免费图表