1. Realize a line chart with shadows, and switch the year, month and day to display different data
Show results:
Line chart/curve chart with shadow and switchable year, month and day
HTML
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>报警趋势统计</span>
<div class="select_time" >
<span class="active" data-type="年">年</span>
<span data-type="月">月</span>
<span data-type="日">日</span>
</div>
</div>
<div id="alarm_trend"></div>
</el-card>
CSS: The style can be written according to your own situation, and the "year, month, day" is positioned by the son and father
.el-card {
font-size: 20px;
width: 90%;
margin: 30px auto;
border: none;
background-color: #051a38;
overflow: hidden;
color: #fff;
-webkit-transition: .3s;
transition: .3s;
}
.el-card__header {
border-bottom: 1px solid #5dd2f1;
box-sizing: border-box;
padding: 10px 10px;
}
#alarm_trend {
width: 100%;
height: 400px;
/* background:pink; */
}
.clearfix {
position: relative;
}
.select_time {
width: 210px;
/* border-radius: 5px; */
float: right;
background: #1e3d64;
left: 74%;
top: 221%;
position: absolute;
z-index: 11;
}
.select_time span {
display: block;
width: 70px;
height: 35px;
float: left;
/* background: #4095e5; */
text-align: center;
line-height: 35px;
color: #1677df;
}
.select_time .active {
background-color: #4c9bfd;
color: #74f8fd;
}
JS: Draw the template of the line chart, call this function directly after getting the data to render the chart
// 折线图
gradientChart(id, xData,serialData) {
echarts.dispose(document.getElementById(id));
let myChart = echarts.init(document.getElementById(id));
myChart.setOption({
color:['#88ffc3','#4992ff'],
tooltip: {
// 通过坐标轴来触发
trigger: "axis"
},
legend: {
// 距离容器
// right: "50%",
// left:center,
// 修饰图例文字的颜色
textStyle: {
color: "#fff"
}
},
grid: {
top: "20%",
left: "5%",
right: "5%",
bottom: "3%",
show: true,
borderColor: "#012f4a",
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: true,
length:5,
},
interval: 1,
axisLabel: {
color: "#62b292",
fontSize:"1rem"
},
axisLine: {
show: false
},
data: xData,
},
yAxis: {
type: 'value',
name: '',
axisLabel: {
textStyle: {
//坐标轴颜色
color: "#62b292",
fontSize:"1rem"
}
},
//坐标轴线样式
splitLine: {
show: true,
lineStyle: {
type: 'solid', //solid实线;dashed虚线
color: "#2b5da7"
}
},
},
series: [
{
name: "终端",
type: 'line',
smooth: true, //true曲线; false折线
itemStyle: {
normal: {
label : {
show: true,
color:'#4992ff'
},
}
},
areaStyle: {
//折线图颜色半透明
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(134, 251, 192, 0.5)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(134, 251, 192, 0.1)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
data: serialData[0]
},
{
name: "辅控",
type: 'line',
smooth: true, //true曲线; false折线
itemStyle: {
normal: {
label: {
show: true,
color:'rgba(134, 251, 192)'
},
}
},
areaStyle: {
//折线图颜色半透明
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(36,173,254, 0.5)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(52,112,252, 0.1)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
data: serialData[1]
}
]
});
// 当我们浏览器缩放的时候，图表也等比例缩放
window.addEventListener("resize", function() {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
},
JS: Get chart data, render the chart
// 报警趋势统计
alarmTrendChart(type) {
if(type) {
this.time_type = type
} else {
this.time_type = '年'
}
var that = this;
this.httpPost('admin-alarm-api/alarm-trend-statistics', {
admin_user_id: admin_user_id,
admin_user_token: admin_user_token,
time_type: this.time_type
}, function(msg, data) {
that.gradientChart('alarm_trend',data.x_data,data.needData)
})
},
JS: switch between year, month and day
mounted: function() {
this.alarmTrendChart()
// 年月日的切换
var that = this
$(".select_time").on("click", "span", function() {
// 此时要注意这个索引号的问题
index = $(this).index() - 1;
// 点击当前a 高亮显示 调用active
$(this)
.addClass("active")
.siblings("span")
.removeClass("active");
that.alarmTrendChart(this.dataset.type)
});
},