option = { color: ['#458FE3', '#48C964', '#FFAE37', '#FB8989', '#CA89FB'], title: { text: '2017年1月1日-2018年12月31日短时强降水个例统计图', x: 'center', top: '10%', textStyle: { color: '#2D527C', fontSize: '16', fontWeight: 'bold' } }, legend: { // type: 'scroll', top: '14%', // formatter: (name) => { // return name.length > 4 ? name.substr(0, 2) + '...' : name; // } }, grid: { left: '10%', right: '10%', top: '20%', bottom: '20%', containLabel: true }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, // cross 十字准星指示器 / shadow 阴影指示器 backgroundColor: 'rgba(255, 255, 255, 0.8)', formatter: (params) => { let Htm = `${params[0].name}
`; params.forEach((item, index) => { let { marker, seriesName, value } = item; Htm += `${marker} ${seriesName} ${String(value) == 'NaN' ? '-' : value} ${(index + 1) % 2 === 0 ? '
' : ''}`; }) return Htm } }, toolbox: { show: true, top: '10%', right: '4%', feature: { dataView: { // 数据视图 optionToContent: (opt) => { var axisData = opt.xAxis[0].data; var series = opt.series; var table = `

`; series.forEach((element, index) => { table += ``; }); table += ``; axisData.forEach((date, index) => { table += ``; series.forEach((series_, index_) => { table += ``; }); table += ``; }); table += '

时间	${element.name}
${date}	${series_.data[index]}

'; return table; }, }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} }, }, xAxis: { axisTick: { show: false }, axisLabel: { textStyle: { color: '#707070', fontSize: 14 } }, axisLine: { // onZero: false, // X轴脱离Y轴0刻度 lineStyle: { color: '#707070', type: 'dashed'} }, data: ['2017/1/1', '2017/2/1', '2017/3/1', '2017/4/1', '2017/5/1'] }, yAxis: { name: '气温（℃）', nameTextStyle: { color: '#707070', fontSize: 14 }, axisLabel: { textStyle: { color: '#707070', fontSize: 14 }, // 箭头旁y轴不显示最大值 showMaxLabel: false }, axisLine: { show: true, symbol: ['none', 'arrow'], symbolOffset: [0, 4], lineStyle: { color: '#707070' } }, splitLine: { show:false }, boundaryGap: [0, 0.1] }, series: [ { name: '500hPa', type: 'line', symbolSize: 14, data: [-10, -2, 12, 0, 5] }, { name: '700hPa', type: 'line', symbolSize: 14, data: [7, 8, 9, 7, 19] }, { name: '850hPa', type: 'line', symbolSize: 14, data: [5, 3, 6, 5, 14] }, { name: '925hPa', type: 'line', symbolSize: 14, data: [0, -3, 0, 5, 10] }, { name: '地面', type: 'line', symbolSize: 14, data: [1, 5, 5, 9, 4] }, ], }; /* */

折线图(表格数据视图)