const time = ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12'] const data = [ { name: '新订单', data: [150, 160, 210, 100, 350, 110, 300, 200, 180, 170, 330, 260] }, { name: '长险新单', data: [110, 300, 200, 180, 170, 330, 260, 160, 210, 100, 350, 110] }, { name: '短险新单', data: [130, 290, 260, 330, 210, 220, 120, 250, 220, 240, 180, 190] } ] option = { backgroundColor: 'rgba(0, 55, 107)', color: ['rgba(28, 205, 255)', 'rgba(47, 255, 208)', 'rgba(255,228,181)'], tooltip: { trigger: 'axis', borderWidth: 0, backgroundColor: 'rgba(1, 65, 122,0.5)', textStyle: { // 添加 textStyle 属性 color: '#fff' // 设置字体颜色 }, formatter: function (params) { const time = params[0].name || '' const tem = params[0] || '' const hum = params[1] || '' const short = params[2] || '' // 使用CSS样式来设置marker的形状为方形 const temMarkerStyle = 'display: inline-block; width: 5px; height: 14px; margin-right:3px; background-color: ' + tem.color + ';'; const humMarkerStyle = 'display: inline-block; width: 5px; height: 14px; margin-right:3px; background-color: ' + hum.color + ';'; const shortMarkerStyle = 'display: inline-block; width: 5px; height: 14px; margin-right:3px; background-color: ' + short.color + ';'; const temContent = tem ? `${''} 新订单: ${tem.value ?? ''}元
` : '' const humContent = hum ? `${''} 长险新单: ${hum.value ?? ''}元
` : '' const shortContent = short ? `${''} 短险新单: ${short.value ?? ''}元
` : '' return `${time}
${temContent}${humContent}${shortContent}` }, }, legend: { icon: 'stack', itemWidth: 10, itemHeight: 5, textStyle: { fontSize: 14, color: '#e0e1e2', // 设置字体颜色 padding: [10, 10] // 设置文字与图例的距离 }, itemStyle: { borderWidth: 0 }, formatter: function (name) { // 添加 if (name == '新订单') { return name + ' （元）' } else if (name == '长险新单') { return name + ' （元）' } else if (name == '短险新单') { return name + ' （元）' } }, itemGap: 20 // 设置图例项之间的间距 }, grid: { left: '6%', right: '4%', bottom: '20%', top: '10%', containLabel: true, }, xAxis: { type: 'category', boundaryGap: true,//两侧留白 axisLine: { lineStyle: { color: 'rgba(2, 119, 175)', width: 2, type: 'solid', }, show: true, onZero: false // 将 x 轴坐标轴置于最低刻度上 }, axisPointer: { type: 'line', lineStyle: { color: { type: 'line', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: 'rgba(38, 159, 193,.5)' // 100% 处的颜色 }, { offset: 1, color: 'rgba(38, 159, 193,.5)' // 0% 处的颜色 #000613','#00334f', '#77f0ff' }], }, type: 'solid', width: 24 }, }, axisLabel: { interval: 1, color: 'rgba(255,255,255)', //更改坐标轴文字颜色 fontSize: 12, //更改坐标轴文字大小 margin: 20 }, axisTick: { show: true, alignWithLabel: true, lineStyle: { color: 'rgba(2, 119, 175)', // 刻度线颜色 width: 2, // 刻度线宽度 }, length: 6, // 刻度线的长度 }, data: time, }, yAxis: [ { // name: '温度', type: 'value', min: "dataMin", splitLine: { interval: 0, show: true, // 开启分割线 lineStyle: { color: 'rgba(6, 88, 142)', width: 2, type: [6, 3], }, }, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { color: 'rgba(207, 219, 230)' }, position: 'left', } ], series: [{ name: '新订单', type: 'line', symbol: 'circle', symbolSize: 8, emphasis: { focus: 'series', }, itemStyle: { //折线拐点标志的样式 borderColor: 'rgba(255,255,255)', borderWidth: 2 }, data: data[0].data, smooth: true, }, { name: '长险新单', type: 'line', symbol: 'circle', symbolSize: 8, emphasis: { focus: 'series', }, itemStyle: { //折线拐点标志的样式 borderColor: 'rgba(255,255,255)', borderWidth: 2 }, data: data[1].data, smooth: true, }, { name: '短险新单', type: 'line', symbol: 'circle', symbolSize: 8, emphasis: { focus: 'series', }, itemStyle: { //折线拐点标志的样式 borderColor: 'rgba(255,255,255)', borderWidth: 2 }, data: data[2].data, smooth: true, }, ] };

保费趋势