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