512 lines
13 KiB
Vue
512 lines
13 KiB
Vue
<!--
|
|
filename: LineChartBase.vue
|
|
author: liubin
|
|
date: 2024-04-30 08:59:28
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<chart-container class="line-chart-base">
|
|
<div class="legend">
|
|
<span v-for="item in legend" :key="item.label" class="legend-item"
|
|
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
|
</div>
|
|
<div ref="elsChart" :style="{ height: '100%',width: width}"></div>
|
|
</chart-container>
|
|
</template>
|
|
|
|
<script>
|
|
import screenfull from "screenfull";
|
|
import { debounce } from "@/utils/debounce";
|
|
import ChartContainer from "./ChartContainer.vue";
|
|
// import chartMixin from "@/mixins/chart.js";
|
|
import * as echarts from "echarts";
|
|
export default {
|
|
name: "LineChartBase",
|
|
components: {
|
|
ChartContainer,
|
|
},
|
|
// mixins: [chartMixin],
|
|
props: {
|
|
vHeight: {
|
|
type: Number,
|
|
default: 38,
|
|
},
|
|
legend: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
xAxis: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
series: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
in: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
width: '100%',
|
|
isFullscreen: false,
|
|
actualOptions: null,
|
|
options: {
|
|
grid: {
|
|
left: "5%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
top: "15%",
|
|
containLabel: true,
|
|
},
|
|
// title: {
|
|
// text: 'Stacked Area Chart'
|
|
// },
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
// legend: {
|
|
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
|
// },
|
|
// toolbox: {
|
|
// feature: {
|
|
// saveAsImage: {}
|
|
// }
|
|
// },
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
min: function () { // 取最小值向下取整为最小刻度
|
|
return 0
|
|
},
|
|
max: function (value) { // 取最大值向上取整为最大刻度
|
|
},
|
|
scale: true,
|
|
type: 'value',
|
|
name: 'kw/h',
|
|
// max: 100,//最大值
|
|
// min: 0,//最小值
|
|
// interval: 20,//间隔
|
|
nameTextStyle: {// y轴上方单位的颜色
|
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
|
align: "right",
|
|
padding: [0, 0, 0, 2]
|
|
},
|
|
// position: 'left',
|
|
alignTicks: true,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
// type: 'solid',
|
|
color: '#25528f',
|
|
// width: '1' // 坐标线的宽度
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
|
fontSize: 12,
|
|
// formatter: '{value}'
|
|
formatter: '{value}'
|
|
// }
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#25528f'
|
|
}
|
|
}
|
|
// type: 'value'
|
|
// axisLine: {
|
|
// show: true,
|
|
// lineStyle: {
|
|
// color: colors[0]
|
|
// }
|
|
// },
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '瑞昌',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#8167F6'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(255, 234, 153, 0)'
|
|
}
|
|
])
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#8167F6', //改变折线点的颜色
|
|
lineStyle: {
|
|
color: '#8167F6' //改变折线颜色
|
|
}
|
|
}
|
|
},
|
|
// emphasis: {
|
|
// focus: 'series'
|
|
// },
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
|
},
|
|
{
|
|
name: '邯郸',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#2760FF'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(255, 234, 153, 0)'
|
|
}
|
|
])
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#2760FF', //改变折线点的颜色
|
|
lineStyle: {
|
|
color: '#2760FF' //改变折线颜色
|
|
}
|
|
}
|
|
},
|
|
// emphasis: {
|
|
// focus: 'series'
|
|
// },
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
|
},
|
|
{
|
|
name: '株洲',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#5996F7'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(255, 234, 153, 0)'
|
|
}
|
|
])
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#5996F7', //改变折线点的颜色
|
|
lineStyle: {
|
|
color: '#5996F7' //改变折线颜色
|
|
}
|
|
}
|
|
},
|
|
// emphasis: {
|
|
// focus: 'series'
|
|
// },
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
|
},
|
|
{
|
|
name: '佳木斯',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#8BC566'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(255, 234, 153, 0)'
|
|
}
|
|
])
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#8BC566', //改变折线点的颜色
|
|
lineStyle: {
|
|
color: '#8BC566' //改变折线颜色
|
|
}
|
|
}
|
|
},
|
|
// emphasis: {
|
|
// focus: 'series'
|
|
// },
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
|
},
|
|
{
|
|
name: '成都',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#11FAF0'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(255, 234, 153, 0)'
|
|
}
|
|
])
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#11FAF0', //改变折线点的颜色
|
|
lineStyle: {
|
|
color: '#11FAF0' //改变折线颜色
|
|
}
|
|
}
|
|
},
|
|
// emphasis: {
|
|
// focus: 'series'
|
|
// },
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
|
},
|
|
{
|
|
name: '凯盛',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#F3C000'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(255, 234, 153, 0)'
|
|
}
|
|
])
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#F3C000', //改变折线点的颜色
|
|
lineStyle: {
|
|
color: '#F3C000' //改变折线颜色
|
|
}
|
|
}
|
|
},
|
|
// emphasis: {
|
|
// focus: 'series'
|
|
// },
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
|
},
|
|
{
|
|
name: '蚌埠',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#F38600'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(255, 234, 153, 0)'
|
|
}
|
|
])
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#F38600', //改变折线点的颜色
|
|
lineStyle: {
|
|
color: '#F38600' //改变折线颜色
|
|
}
|
|
}
|
|
},
|
|
// emphasis: {
|
|
// focus: 'series'
|
|
// },
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
|
},
|
|
]
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
isOpen() {
|
|
return this.$store.getters.sidebar.opened
|
|
},
|
|
},
|
|
watch: {
|
|
isOpen(val) {
|
|
if (val === true) {
|
|
this.width = '99%'
|
|
this.canvasReset()
|
|
console.log(this.width)
|
|
} else {
|
|
this.watch = 100 + '%'
|
|
this.canvasReset()
|
|
}
|
|
},
|
|
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
|
isFullscreen(val) {
|
|
this.actualOptions.series.map((item) => {
|
|
item.barWidth = val ? 18 : 12;
|
|
});
|
|
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
|
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
|
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
|
this.initChart(this.actualOptions);
|
|
},
|
|
series(val) {
|
|
if (!val) {
|
|
this.initChart(this.options);
|
|
return;
|
|
}
|
|
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
|
actualOptions.series[0].data = val[0].data;
|
|
actualOptions.series[0].name = val[0].name;
|
|
actualOptions.series[1].data = val?.[1]?.data || [];
|
|
actualOptions.series[1].name = val?.[1]?.name || "";
|
|
this.actualOptions = actualOptions;
|
|
this.initChart(actualOptions);
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
// if (screenfull.isEnabled) {
|
|
// screenfull.on("change", () => {
|
|
// this.isFullscreen = screenfull.isFullscreen;
|
|
// });
|
|
// }
|
|
this.actualOptions = this.options
|
|
this.canvasReset();
|
|
window.addEventListener("resize", this.canvasReset);
|
|
},
|
|
beforeDestroy() {
|
|
if (this.chart) {
|
|
this.chart.dispose();
|
|
}
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener("resize", this.canvasReset);
|
|
},
|
|
methods: {
|
|
canvasReset() {
|
|
debounce(() => {
|
|
this.initChart();
|
|
}, 500)();
|
|
},
|
|
initChart() {
|
|
if (this.chart) {
|
|
this.chart.dispose();
|
|
}
|
|
this.chart = echarts.init(this.$refs.elsChart);
|
|
this.chart.setOption(this.actualOptions);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.line-chart-base {
|
|
// position: relative;
|
|
|
|
.legend {
|
|
position: absolute;
|
|
top: 5.2vh;
|
|
right: 1vw;
|
|
}
|
|
|
|
.legend-item {
|
|
position: relative;
|
|
// font-size: 12px;
|
|
margin-right: 2vw;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 0.432vw;
|
|
height: 0.432vw;
|
|
border-radius: 100%;
|
|
margin-right: 0.4vw;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1vw;
|
|
height: 0.125vw;
|
|
position: absolute;
|
|
top: 54%;
|
|
left: -15%;
|
|
transform: translateY(-50%);
|
|
border-radius: 100;
|
|
margin-right: 0.22vw;
|
|
}
|
|
}
|
|
|
|
.legend-item:nth-child(1):after,
|
|
.legend-item:nth-child(1):before {
|
|
background-color: #8167F6;
|
|
}
|
|
|
|
.legend-item:nth-child(2):after,
|
|
.legend-item:nth-child(2):before {
|
|
background-color: #2760FF;
|
|
}
|
|
|
|
.legend-item:nth-child(3):after,
|
|
.legend-item:nth-child(3):before {
|
|
background-color: #5996F7;
|
|
}
|
|
|
|
.legend-item:nth-child(4):after,
|
|
.legend-item:nth-child(4):before {
|
|
background-color: #8BC566;
|
|
}
|
|
|
|
.legend-item:nth-child(5):after,
|
|
.legend-item:nth-child(5):before {
|
|
background-color: #11FAF0;
|
|
}
|
|
|
|
.legend-item:nth-child(6):after,
|
|
.legend-item:nth-child(6):before {
|
|
background-color: #F3C000;
|
|
}
|
|
|
|
.legend-item:nth-child(7):after,
|
|
.legend-item:nth-child(7):before {
|
|
background-color: #F38600;
|
|
}
|
|
}
|
|
</style>
|