多曲线图
function (data,params){ // const myChart = this.myChart; const yearData = [2020, 2021, 2022, 2023, 2024, 2025] const personData3 = [1020, 1132, 1101, 1134, 1490, 1530, 1520] const personData = [820, 932, 901, 934, 1290, 1330, 1320] const personData2 = [620, 732, 701, 734, 1090, 1130, 1120] const option = { tooltip: { trigger: 'axis' }, xAxis: { name: '年', nameTextStyle: { color: '#9AA6B8', fontSize: 16 }, type: 'category', boundaryGap: false, data: yearData, axisLabel: { show: true, fontSize: 16, textStyle: { color: '#9AA6B8', } }, }, yAxis: { name: '单位: 人', nameTextStyle: { color: '#9AA6B8', fontSize: 16 }, type: 'value', splitLine: { show: true, lineStyle: { type: 'dashed', // 设置刻度线为虚线个数 } }, axisLabel: { show: true, fontSize: 16, textStyle: { color: '#9AA6B8', } } }, series: [ { data: personData3, type: 'line', smooth: true, symbol: 'circle', // 设置曲线两头的形状为圆形 symbolSize: 4, // 大小 showSymbol: false, // 默认不显示圆点 emphasis: { // 鼠标悬浮时显示原点【要配合tooltip: trigger: 'xxx'使用】 focus: 'series', itemStyle: { color: '#FFFFFF', // 鼠标悬浮时折线点的颜色 borderColor: '#FFE04D', borderWidth: 3 } }, lineStyle: { width: 2, color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: 'rgba(0, 176, 253, 1)' }, // %0 处的颜色 { offset: 0.5, color: 'rgba(0, 248, 255, 1)' }, // %50 处的颜色 { offset: 1, color: 'rgba(0, 176, 253, 1)' }, // 100% 处的颜色 ], global: false // 缺省为 false } }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: 'rgba(0, 176, 253, 0.75)' }, // 0% 处的颜色 { offset: 1, color: 'rgba(0, 176, 253, 1)' } // 100% 处的颜色 ], global: false // 缺省为 false } }, }, { data: personData, type: 'line', smooth: true, symbol: 'circle', // 设置曲线两头的形状为圆形 symbolSize: 4, // 大小 showSymbol: false, // 默认不显示圆点 emphasis: { // 鼠标悬浮时显示原点【要配合tooltip: trigger: 'xxx'使用】 focus: 'series', itemStyle: { color: '#FFFFFF', // 鼠标悬浮时折线点的颜色 borderColor: '#FFE04D', borderWidth: 3 } }, lineStyle: { width: 2, color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#F45A23' }, // %0 处的颜色 { offset: 0.5, color: '#FFE04D' }, // %50 处的颜色 { offset: 1, color: '#F45A23' }, // 100% 处的颜色 ], global: false // 缺省为 false } }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: 'rgba(255, 224, 77, 0.75)' }, // 0% 处的颜色 { offset: 1, color: 'rgba(255, 224, 77, 0)' } // 100% 处的颜色 ], global: false // 缺省为 false } }, }, { data: personData2, type: 'line', smooth: true, symbol: 'circle', // 设置曲线两头的形状为圆形 symbolSize: 4, // 大小 showSymbol: false, // 默认不显示圆点 emphasis: { // 鼠标悬浮时显示原点【要配合tooltip: trigger: 'xxx'使用】 focus: 'series', itemStyle: { color: '#FFFFFF', // 鼠标悬浮时折线点的颜色 borderColor: '#FFE04D', borderWidth: 3 } }, lineStyle: { width: 2, color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: '#B4F856FF' }, // %0 处的颜色 { offset: 0.5, color: '#00FF96FF' }, // %50 处的颜色 { offset: 1, color: '#B6F955FF' }, // 100% 处的颜色 ], global: false // 缺省为 false } }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: 'rgba(0, 255, 150, 0.75)' }, // 0% 处的颜色 { offset: 1, color: 'rgba(0, 255, 150, 0)' } // 100% 处的颜色 ], global: false // 缺省为 false } }, } ] }; return option; }