在项目统计界面，我们离不开对Echarts的使用，接下来是我在做项目过程中做的一个关于温湿度统计的好看折线图，统计的是温度蓝色和湿度绿色，它们还会有告警和断电，分别用橘黄色和红色区分，以下是示例：
下载Echarts
//npm
npm install echarts --save
//淘宝镜像cnpm(安装速度快)
cnpm install echarts --save
//yarn
yarn add echarts代码案例
<template>
<div id="echartsOne" style="width: 100%;height: 100%;"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted,ref } from 'vue';
onMounted(()=>{
getEcharts();
})
const getEcharts = () => {
let chartDom = document.getElementById("echartsOne");
let myChart = echarts.init(chartDom);
let wsdList = [{
createTime: "10:20",
humStatus: 0,
humidity: "59.4",
isOff: 0,
tempStatus: 0,
temperature: "28.8",
}, {
createTime: "10:21",
humStatus: 0,
humidity: "59.4",
isOff: 1,
tempStatus: 0,
temperature: "28.8",
}, {
createTime: "10:22",
humStatus: 0,
humidity: "59.4",
isOff: 0,
tempStatus: 1,
temperature: "28.8",
}, {
createTime: "10:23",
humStatus: 0,
humidity: "59.4",
isOff: 0,
tempStatus: 0,
temperature: "28.8",
}, {
createTime: "10:24",
humStatus: 1,
humidity: "59.4",
isOff: 0,
tempStatus: 0,
temperature: "28.8",
}, {
createTime: "10:25",
humStatus: 0,
humidity: "59.4",
isOff: 1,
tempStatus: 0,
temperature: "28.8",
}, {
createTime: "10:26",
humStatus: 1,
humidity: "59.4",
isOff: 0,
tempStatus: 0,
temperature: "28.8",
},]
let rq = []
rq = wsdList.map(val => {
return val.createTime
})
let seriesArr = []
let list = [{
name: "温度",
children: wsdList.map(val => {
let temp0 = val.tempStatus == 0 ? `rgb(68, 247, 227)` : `rgb(240, 128, 19)`;
return {
name: val.createTime,
value: val.isOff == 1 ? 6 : val.temperature,
isOff: val.isOff,
offTime: val.offTime ? val.offTime : "",
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: val.isOff == 1 ? 'rgb(191, 53, 44)' : temp0, //中心颜色
},
{
offset: 0.4,
color: val.isOff == 1 ? 'rgb(191, 53, 44)' : temp0,
},
{
offset: 0.5,
color: '#ffffff00',
},
{
offset: 1,
color: '#ffffff00',
},
],
},
borderColor: val.isOff == 1 ? 'rgb(191, 53, 44)' : temp0,
borderWidth: 2,
},
lineStyle: {
type: "dashed",
color: val.isOff == 1 ? 'rgb(191, 53, 44)' : temp0,
width: 2,
},
label: {
show: false,
// show: val.isOff == 1 ? false : true
}
}
})
},
{
name: "湿度",
children: wsdList.map(val => {
let hum0 = val.humStatus == 0 ? `rgb(36, 214, 129)` : `rgb(240, 128, 19)`;
return {
name: val.createTime,
value: val.isOff == 1 ? 10 : val.humidity,
isOff: val.isOff,
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: val.isOff == 1 ? 'rgb(191, 53, 44)' : hum0, //中心颜色
},
{
offset: 0.4,
color: val.isOff == 1 ? 'rgb(191, 53, 44)' : hum0,
},
{
offset: 0.5,
color: '#ffffff00',
},
{
offset: 1,
color: '#ffffff00',
},
],
},
borderColor: val.isOff == 1 ? 'rgb(191, 53, 44)' : hum0,
borderWidth: 2,
},
// lineStyle: {
// type: "dashed",
// color: val.isOff==1?'rgb(191, 53, 44)':hum0,
// width: 2,
// },
label: {
show: false,
// show: val.isOff == 1 ? false : true,
}
}
})
}
]
let colorArr = ["68, 247, 227", "36, 214, 129", "191, 53, 44"]
list.forEach((val, index) => {
seriesArr.push({
yAxisIndex: val.name == "温度" ? 1 : 0,
xAxisIndex: 0,
name: val.name,
type: 'line',
data: val.children,
markLine: {
symbol: ['none', 'none'],
label: {
formatter: '{b}',
show: true,
},
data: [{
lineStyle: {
type: 'dashed',
color: "rgba(191, 53, 44,0)",
width: 2,
},
name: '断电',
label: {
color: "rgb(191, 53, 44)",
fontWeight: 600,
fontFamily: "黑体",
fontSize: 14,
},
yAxis: val.name == "湿度" ? 10 : 6,
}],
},
smooth: false,
symbolSize: 15,
symbol: 'circle',
showAllSymbol: true,
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: `rgb(${colorArr[index]})`, //中心颜色
},
{
offset: 0.4,
color: `rgb(${colorArr[index]})`,
},
{
offset: 0.5,
color: '#ffffff00',
},
{
offset: 1,
color: '#ffffff00',
},
],
},
borderColor: `rgb(${colorArr[index]})`,
borderWidth: 2,
},
label: {
show: true,
position: val.name == "湿度" ? 'top' : "bottom",
textStyle: {
color: '#fff',
fontSize: 12
},
formatter: function(arr) {
return val.name == "温度" ? arr.value : arr.value + '%'
}
},
lineStyle: {
type: "dashed",
color: `rgb(${colorArr[index]})`,
width: 2,
}
})
})
let endNum = 5 / wsdList.length * 100
let option = {
backgroundColor: "#06444a",
dataZoom: [{
type: 'inside',
start: 100 - (endNum > 100 ? 100 : endNum),
end: 100,
zoomLock: true, //定当前窗口，将缩放修改为左右偏移窗口
},
{
type: 'slider',
start: 100 - (endNum > 100 ? 100 : endNum),
end: 100,
zoomLock: true, //定当前窗口，将缩放修改为左右偏移窗口
height: 20,
showDetail: false,
brushSelect: false,
},
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#ddd'
}
},
backgroundColor: 'rgba(255,255,255,1)',
padding: [5, 10],
textStyle: {
color: '#000',
},
formatter: function(params) {
return params[0].data.isOff == 1 ? `<div style='color:red;'>断电开始时间<br/>
${params[0].data.offTime.split(' ')[0]}<br/>
${params[0].data.offTime.split(' ')[1]}</div>` : `<div>
<div>${params[0].data.name}</div>
<div style='display:flex;align-items:center;'>
温度：<b>${params[0].data.value}℃</b>
</div>
<div style='display:flex;align-items:center;'>
湿度：<b>${params[1].data.value}%</b>
</div>
</div>`
}
},
legend: {
left: "center",
top: "0%",
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 600
},
data: ["湿度", "温度", "告警", "断电"]
},
grid: {
left: '2%',
right: '3%',
bottom: '10%',
top: '10%',
containLabel: true
},
xAxis: [{
type: 'category',
data: rq,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#bbdce0'
}
},
axisLabel: {
// margin: 10,
textStyle: {
fontSize: 12,
color: "#bbdce0",
fontWeight: 600
}
},
splitArea: {
show: true,
areaStyle: {
color: ["rgba(250,250,250,0.08)", "rgba(250,250,250,0)"]
}
}
}, {
type: 'category',
boundaryGap: false,
axisLabel: {
show: false
}
}],
yAxis: [{
name: "(%)",
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: ['rgba(58, 129, 132,.6)']
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
fontSize: 12,
color: '#bbdce0',
}
},
axisLabel: {
textStyle: {
fontSize: 12,
color: "#bbdce0",
fontWeight: 600
}
},
max: 100
}, {
name: "(℃)",
type: 'value',
splitLine: {
show: false,
lineStyle: {
type: "dashed",
color: ['#39868a']
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
fontSize: 12,
color: '#bbdce0',
}
},
axisLabel: {
textStyle: {
fontSize: 12,
color: "#bbdce0",
fontWeight: 600
}
},
max: 60
}],
series: [...seriesArr, {
name: "告警",
type: 'line',
data: [],
smooth: false,
symbolSize: 15,
symbol: 'circle',
showAllSymbol: true,
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: `rgb(240, 128, 19)`, //中心颜色
},
{
offset: 0.4,
color: `rgb(240, 128, 19)`,
},
{
offset: 0.5,
color: '#ffffff00',
},
{
offset: 1,
color: '#ffffff00',
},
],
},
borderColor: `rgb(240, 128, 19)`,
borderWidth: 2,
},
label: {
show: false
},
lineStyle: {
type: "dashed",
color: `rgb(240, 128, 19)`,
width: 2,
}
}, {
name: "断电",
type: 'line',
data: [],
smooth: false,
symbolSize: 15,
symbol: 'circle',
showAllSymbol: true,
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: `rgb(191, 53, 44)`, //中心颜色
},
{
offset: 0.4,
color: `rgb(191, 53, 44)`,
},
{
offset: 0.5,
color: '#ffffff00',
},
{
offset: 1,
color: '#ffffff00',
},
],
},
borderColor: `rgb(191, 53, 44)`,
borderWidth: 2,
},
label: {
show: false
},
lineStyle: {
type: "dashed",
color: `rgb(191, 53, 44)`,
width: 2,
}
}]
};
myChart.setOption(option);
}
</script>运行结果
