8 changed files with 237 additions and 20 deletions
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,91 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
export const lineChartOption = { |
|||
color: ["#2AD9FD"], |
|||
xAxis: { |
|||
type: "category", |
|||
// boundaryGap: ["15%", "15%"],
|
|||
boundaryGap: false, |
|||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
backgroundColor: "rgba(0,0,0,0.36)", |
|||
|
|||
borderWidth: 0, |
|||
formatter: "{b}: {c} 量", |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
// formatter: function([axisData]) {
|
|||
// console.log(axisData)
|
|||
// let str = axisData.name + ' ' + axisData.data + '辆</br>';
|
|||
// // params.forEach(item => {
|
|||
// // if (item.seriesName === '供温' || item.seriesName === '回温') {
|
|||
// // str += item.marker + item.seriesName + ' : ' + item.data.value + ' ℃' + '</br>';
|
|||
// // } else if (item.seriesName === '压力值(Mpa)') {
|
|||
// // // 柱状图渐变时设置marker
|
|||
// // item.marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#6C50F3;"></span>';
|
|||
// // str += item.marker + item.seriesName + ' : ' + item.data.value + ' m';
|
|||
// // }
|
|||
// // });
|
|||
// return str;
|
|||
// }
|
|||
}, |
|||
yAxis: { |
|||
name: "辆", |
|||
type: "value", |
|||
// nameGap: 24,
|
|||
nameTextStyle: { |
|||
color: "#2AD9FD", |
|||
width: 200, |
|||
align: "right", |
|||
fontSize: 12, |
|||
padding: [0, 12, 0, 0], |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
type: [6, 9], |
|||
color: "#aaa", |
|||
// dashOffset: [10, 10],
|
|||
// cap: 21,
|
|||
// width: 2
|
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
color: "#fff", |
|||
fontSize: 12, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [820, 932, 901, 934, 1290, 1330, 1320], |
|||
type: "line", |
|||
showSymbol: false, |
|||
smooth: true, |
|||
lineStyle: { |
|||
color: "#2AD9FD", |
|||
}, |
|||
areaStyle: { |
|||
opacity: 0.8, |
|||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|||
{ |
|||
offset: 0, |
|||
color: "#2AD9FD", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(42,217,253,0)", |
|||
}, |
|||
]), |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
@ -0,0 +1,47 @@ |
|||
<template> |
|||
<div class='LineChart'> |
|||
<div class="title"> |
|||
断面车流量 |
|||
</div> |
|||
|
|||
<div class="chart" ref="LineChartRef" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import { lineChartOption } from "./chart" |
|||
|
|||
export default { |
|||
name: 'LineChart', |
|||
mounted() { |
|||
const chartIns = echarts.init(this.$refs.LineChartRef); |
|||
chartIns.setOption(lineChartOption); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.LineChart { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 9px; |
|||
|
|||
.title { |
|||
background-image: url("~@screen/images/title-dec.svg"); |
|||
// background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
|
|||
font-size: 15px; |
|||
font-family: Source Han Sans SC, Source Han Sans SC; |
|||
font-weight: 500; |
|||
color: #FFFFFF; |
|||
padding-left: 24px; |
|||
} |
|||
|
|||
.chart { |
|||
flex: 1; |
|||
height: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue