echarts双折线图 ，两年不同预警类别数据对比并且最近一个月显示为虚线
<div>
<a-select
size="small"
default-value="全部"
style="width: 120px;"
@change="selectTypeChange"
>
<a-select-option :value="item.value" v-for="(item, index) in selectType" :key="index">
{{ item.RiskCategoryText }}
</a-select-option>
</a-select>
<EchartsModule :echartsData="lineEchartsData"></EchartsModule>
</div>
const lineEchartsDataArr = (function () {
var lineEchartsData = [
[
[1590, 3023, 1900, 1680, 1506, 1200, 606, 500, 1707, 1450, 1106, 808],
[1330, 4012, 1500, 2310, 1806, 800, 806, 600, 1907, 1050, 1806, 605],
],
[
[398, 353, 578, 543, 506, 412, 386, 351, 562, 518, 475, 421],
[208, 253, 298, 543, 506, 410, 356, 300, 499, 498, 405, 321],
],
[
[162, 133, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[262, 103, 240, 255, 211, 210, 199, 165, 205, 290, 230, 98],
],
[
[162, 133, 110, 268, 256, 333, 211, 184, 112, 245, 111, 188],
[152, 122, 100, 261, 206, 303, 111, 104, 109, 195, 101, 157],
],
[
[98, 353, 578, 543, 506, 412, 386, 351, 562, 518, 475, 421],
[108, 253, 468, 443, 607, 292, 266, 390, 492, 478, 375, 291],
],
[
[122, 133, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[322, 259, 248, 278, 200, 190, 311, 154, 197, 195, 136, 234],
],
[
[152, 153, 290, 333, 256, 220, 211, 184, 277, 245, 216, 188],
[288, 150, 190, 293, 296, 350, 91, 354, 197, 305, 333, 222],
],
[
[12, 133, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[52, 153, 200, 198, 376, 250, 199, 226, 265, 188, 197, 208],
],
[
[160, 133, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[460, 143, 160, 198, 256, 310, 411, 164, 197, 185, 306, 201],
],
[
[182, 156, 166, 222, 256, 177, 155, 184, 277, 245, 216, 188],
[282, 176, 169, 302, 156, 275, 167, 195, 226, 286, 305, 296],
],
[
[141, 133, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[222, 233, 300, 256, 263, 275, 191, 254, 357, 305, 304, 231],
],
[
[111, 133, 290, 369, 256, 188, 222, 184, 277, 245, 216, 188],
[182, 156, 166, 222, 256, 177, 155, 184, 277, 245, 216, 188],
],
[
[198, 353, 578, 543, 506, 412, 386, 351, 562, 518, 475, 421],
[152, 153, 290, 333, 256, 220, 211, 184, 277, 245, 216, 188],
],
[
[136, 133, 290, 268, 256, 220, 256, 184, 277, 245, 216, 188],
[95, 163, 277, 222, 232, 213, 205, 177, 209, 219, 214, 108],
],
[
[182, 193, 277, 49, 256, 220, 211, 184, 277, 245, 216, 188],
[272, 183, 304, 111, 163, 169, 198, 209, 198, 163, 189, 167],
],
[
[136, 133, 290, 785, 256, 220, 211, 184, 277, 245, 216, 188],
[234, 93, 169, 565, 207, 301, 199, 205, 305, 307, 306, 201],
],
[
[100, 166, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[230, 156, 169, 156, 158, 164, 178, 136, 195, 241, 189, 126],
],
[
[78, 133, 246, 785, 256, 220, 211, 184, 277, 245, 216, 188],
[175, 197, 201, 716, 242, 209, 254, 208, 167, 200, 196, 208],
],
[
[250, 133, 152, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[100, 166, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
],
[
[213, 133, 290, 88, 256, 220, 211, 184, 266, 245, 216, 188],
[230, 156, 169, 156, 158, 164, 178, 136, 195, 241, 189, 126],
],
[
[156, 177, 290, 152, 77, 220, 211, 184, 277, 222, 216, 188],
[256, 149, 202, 155, 177, 105, 288, 169, 222, 119, 143, 196],
],
[
[142, 133, 88, 78, 256, 220, 211, 184, 277, 245, 216, 188],
[242, 103, 218, 158, 166, 130, 199, 175, 157, 185, 196, 178],
],
[
[140, 199, 290, 268, 256, 220, 211, 230, 277, 245, 216, 188],
[240, 249, 170, 358, 156, 185, 151, 190, 207, 196, 256, 287],
],
[
[119, 133, 290, 230, 256, 220, 211, 184, 277, 245, 216, 188],
[219, 183, 200, 190, 199, 281, 311, 194, 157, 165, 196, 218],
],
[
[114, 133, 290, 268, 256, 59, 211, 184, 277, 245, 216, 188],
[301, 163, 195, 222, 159, 250, 294, 153, 301, 269, 248, 222],
],
]
var data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const today = new Date()
var month = today.getMonth() //获取当前月份 关键点：month值为当前月份减去1
for (let i = 0; i < data.length; i++) {
if (i === month) {
lineEchartsData.map((item) => {
item[1].splice(0, item[1].length, ...item[1].slice(0, i + 1))
return item
})
}
}
return lineEchartsData
})()
const lineEchartsDataArr2 = (function () {
var lineEchartsData2 = [
[
[1590, 3023, 1900, 1680, 1506, 1200, 606, 500, 1707, 1450, 1106, 808],
[1330, 4012, 1500, 2310, 1806, 800, 806, 600, 1907, 1050, 1806, 605],
],
[
[398, 353, 578, 543, 506, 412, 386, 351, 562, 518, 475, 421],
[208, 253, 298, 543, 506, 410, 356, 300, 499, 498, 405, 321],
],
[
[162, 133, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[262, 103, 240, 255, 211, 210, 199, 165, 205, 290, 230, 98],
],
[
[162, 133, 110, 268, 256, 333, 211, 184, 112, 245, 111, 188],
[152, 122, 100, 261, 206, 303, 111, 104, 109, 195, 101, 157],
],
[
[98, 353, 578, 543, 506, 412, 386, 351, 562, 518, 475, 421],
[108, 253, 468, 443, 607, 292, 266, 390, 492, 478, 375, 291],
],
[
[122, 133, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[322, 259, 248, 278, 200, 190, 311, 154, 197, 195, 136, 234],
],
[
[152, 153, 290, 333, 256, 220, 211, 184, 277, 245, 216, 188],
[288, 150, 190, 293, 296, 350, 91, 354, 197, 305, 333, 222],
],
[
[12, 133, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[52, 153, 200, 198, 376, 250, 199, 226, 265, 188, 197, 208],
],
[
[160, 133, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[460, 143, 160, 198, 256, 310, 411, 164, 197, 185, 306, 201],
],
[
[182, 156, 166, 222, 256, 177, 155, 184, 277, 245, 216, 188],
[282, 176, 169, 302, 156, 275, 167, 195, 226, 286, 305, 296],
],
[
[141, 133, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[222, 233, 300, 256, 263, 275, 191, 254, 357, 305, 304, 231],
],
[
[111, 133, 290, 369, 256, 188, 222, 184, 277, 245, 216, 188],
[182, 156, 166, 222, 256, 177, 155, 184, 277, 245, 216, 188],
],
[
[198, 353, 578, 543, 506, 412, 386, 351, 562, 518, 475, 421],
[152, 153, 290, 333, 256, 220, 211, 184, 277, 245, 216, 188],
],
[
[136, 133, 290, 268, 256, 220, 256, 184, 277, 245, 216, 188],
[95, 163, 277, 222, 232, 213, 205, 177, 209, 219, 214, 108],
],
[
[182, 193, 277, 49, 256, 220, 211, 184, 277, 245, 216, 188],
[272, 183, 304, 111, 163, 169, 198, 209, 198, 163, 189, 167],
],
[
[136, 133, 290, 785, 256, 220, 211, 184, 277, 245, 216, 188],
[234, 93, 169, 565, 207, 301, 199, 205, 305, 307, 306, 201],
],
[
[100, 166, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[230, 156, 169, 156, 158, 164, 178, 136, 195, 241, 189, 126],
],
[
[78, 133, 246, 785, 256, 220, 211, 184, 277, 245, 216, 188],
[175, 197, 201, 716, 242, 209, 254, 208, 167, 200, 196, 208],
],
[
[250, 133, 152, 268, 256, 220, 211, 184, 277, 245, 216, 188],
[100, 166, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
],
[
[213, 133, 290, 88, 256, 220, 211, 184, 266, 245, 216, 188],
[230, 156, 169, 156, 158, 164, 178, 136, 195, 241, 189, 126],
],
[
[156, 177, 290, 152, 77, 220, 211, 184, 277, 222, 216, 188],
[256, 149, 202, 155, 177, 105, 288, 169, 222, 119, 143, 196],
],
[
[142, 133, 88, 78, 256, 220, 211, 184, 277, 245, 216, 188],
[242, 103, 218, 158, 166, 130, 199, 175, 157, 185, 196, 178],
],
[
[140, 199, 290, 268, 256, 220, 211, 230, 277, 245, 216, 188],
[240, 249, 170, 358, 156, 185, 151, 190, 207, 196, 256, 287],
],
[
[119, 133, 290, 230, 256, 220, 211, 184, 277, 245, 216, 188],
[219, 183, 200, 190, 199, 281, 311, 194, 157, 165, 196, 218],
],
[
[114, 133, 290, 268, 256, 59, 211, 184, 277, 245, 216, 188],
[301, 163, 195, 222, 159, 250, 294, 153, 301, 269, 248, 222],
],
]
var data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const today = new Date()
var month = today.getMonth()
for (let i = 0; i < data.length; i++) {
if (i === month) {
lineEchartsData2.map((item) => {
item[1].splice(0, item[1].length, ...item[1].slice(1, i + 2))
item[1].unshift('')
return item
})
}
}
return lineEchartsData2
})()
const lineEchartsData = {
id: 'radar',
width: '90%',
height: '308px',
option: {
title: {
text: '',
textStyle: {
color: '#01C5D3',
fontWeight: '100',
fontSize: '14',
},
},
tooltip: { //提示框组件。
trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
formatter: function (params) {// formatter stringFunction提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
const today = new Date()
var month = today.getMonth()//2月
if(params.length==3){
params.splice(month+1,1)
}
let str=''
params.forEach((item) => {
str +=item.seriesName+item.axisValue+':'+
'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
item.color +
'"></span>' +item.data+
'<br />'
})
return str
},
},
legend: {
data: ['2021', '2022'],//图例的数据数组
bottom: '0',//图例组件离容器下侧的距离
textStyle: {//图例的公用文本样式
color: '#fff',
},
},
xAxis: {//直角坐标系 grid 中的 x 轴
type: 'category',//'category' 类目轴，适用于离散的类目数据
boundaryGap: false,//坐标轴两边留白策略
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
lineStyle: {
color: '#fff',
},
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#fff',
},
},
},
series: [
{
name: '2021年',
type: 'line',
// stack: 'Total', //3月 9月
// data: [1590, 3023, 1900, 1680, 1506, 1200, 606, 500, 1707, 1450, 1106, 808],
data: lineEchartsDataArr[0][0],
itemStyle: {
color: '#91cc75',
},
},
{
name: '2022年',
type: 'line',
// stack: 'Total',
// data: [162, 133, 290, 268, 256, 220, 211, 184, 277, 245, 216, 188],
data: lineEchartsDataArr[0][1],
itemStyle: {
color: '#5470c6',
},
},
{
name:'2022年',
type:'line',
smooth:false, //关键点，为true是不支持虚线，实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
// data:['',4012, 330]
data:lineEchartsDataArr2[0][1]
},
],
textStyle: {
color: '#fff',
},
},
}
selectTypeChange(e) {
this.lineEchartsData.option.series[0].data = lineEchartsDataArr[e][0]
this.lineEchartsData.option.series[1].data = lineEchartsDataArr[e][1]
this.lineEchartsData.option.series[2].data = lineEchartsDataArr2[e][1]
},
selectType数据: [
{
"RiskCategoryId": "23434334324434234324343434324324343",
RiskCategoryText: '全部',
},
{
"RiskCategoryId": "0cc6cce8-7a65-4475-991b-afb8753d09cc",
"RiskCategoryText": "未佩戴口罩",
},
{
"RiskCategoryId": "725d1ad2-b7e6-48fd-a635-3303e716e45c",
"RiskCategoryText": "摄像设备角度或遮挡问题",
},
{
"RiskCategoryId": "b79f72f6-5f94-4f3c-a3a2-2b25809657a9",
"RiskCategoryText": "未戴帽",
},
{
"RiskCategoryId": "b83bd88f-6074-43c6-84c8-0b8b08f9ad2c",
"RiskCategoryText": "视频离线",
},
{
"RiskCategoryId": "fd9e082d-266a-4616-b5c9-eb672451853e",
"RiskCategoryText": "使用手机",
},
{
"RiskCategoryId": "c5e9d1a8-f7ea-4c9a-b028-007dc2f664fe",
"RiskCategoryText": "吸烟",
}
],
效果图：
如有帮助，帮忙点个赞吧！如果错误，欢迎指出！转载请标明出处。