echarts多系列折线图配置：
echarts版本: ^5.3.2
使用的是按需引入：官方demo
<template>
<div class="content-container">
<div :class="[!isColumnar?'vertical_echarts':'landscape_echarts']">
<div id="stackedLine-container" :class="!isColumnar?'vertical':'landscape'"></div>
</div>
<div class="scale" @click='columnar' :class="[!isColumnar?'':'landscape_echarts']">缩放</div>
</div>
</template>
<script>
import * as echarts from 'echarts/core';
import {
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent
} from 'echarts/components';
import {
LineChart } from 'echarts/charts';
import {
UniversalTransition } from 'echarts/features';
import {
CanvasRenderer } from 'echarts/renderers';
echarts.use([
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
LineChart,
CanvasRenderer,
UniversalTransition
]);
const COMPONENT_NAME = 'stackedLine';
export default {
name: COMPONENT_NAME,
props: {
},
data() {
return {
myEcharts: null, // echarts实例
isColumnar: false,
option: null,
};
},
computed: {
},
watch: {
isColumnar: {
handler() {
//监听当屏幕发生转变时，重新渲染echarts
if (this.myEcharts) {
this.$nextTick(() => this.resize())
this.myEcharts.setOption(this.option, true);
}
}
}
},
created() {
// 组件动态值：X轴：日 周 月 自定义 y轴： title, y轴数值 数据
console.log('created');
},
mounted() {
this.echarts();
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroy');
},
methods: {
echarts() {
this.myEcharts = echarts.init(document.getElementById('stackedLine-container'));
this.option = {
color: ['#2A4AF0', '#26BDEB', '#8E59F7', '#FFC933'],
tooltip: {
trigger: 'axis',
triggerOn: 'mousemove|click',
formatter(a) {
let list = [];
let listItem = '';
let top = `<div style='height: 28px;line-height: 28px;box-sizing: border-box;border-bottom: 1px solid #f2f2f2; font-family: PingFangSC-Semibold;font-size: 16px;color: rgba(0,0,0,.9);font-weight: 600;'>${
a[0].axisValueLabel}</div>`
for (var i = 0; i < a.length; i++) {
list.push(
'<span style="display: inline-block;padding: 2px 0;font-size: 14px;color: rgba(0,0,0,0.70);" >' +
'<div style="display:inline-block;width:8px;height:8px;background:' +
a[i].color +
';border-radius: 50%;"><div style="margin-top:2px;margin-left: 2px;width:4px;height:4px;background:#fff;border-radius: 50%;"></div></div><span style="width:15px; display:inline-block;">' +
'</span><span style="font-family: SegoeUI;">' +
a[i].seriesName +
'<span>    <span style="font-family: PingFangSC-Regular;">' +
a[i].data +
'</span></span>'
)
}
listItem = top + list.join('<br/>')
return '<div>' + listItem + '</div>'
}
},
legend: {
data: ['全部', '浙A00560', '浙A00000', '浙A00060'],
type: 'plain', //plain scroll
icon: "rect",
orient: "horizontal", //朝向 horizontal vertical
left: 0, //位置 left top bottom right
top: 0,
// width: "10", //大小
// height: "4"
itemGap: 12,
itemWidth: 10,
itemHeight: 4,
textStyle: {
opacity: 0.7,
fontFamily: "PingFangSC-Regular",
fontSize: 14,
color: "#000000",
fontWeight: 400
},
selected: {
// 'Email': false
}
},
grid: {
show: false,
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
// 工具栏 图表以图片形式下载
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: "rgba(0,0,0,0.2)",
type: 'solid'
}
},
axisTick: {
length: 6,
lineStyle: {
color: "rgba(0,0,0,0.3)",
type: 'solid'
}
},
axisLabel: {
margin: 12,
color: 'rgba(0,0,0,0.4)',
fontFamily: "PingFangSC-Medium",
fontSize: 12,
align: 'center',
fontWeight: 500
},
data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
},
yAxis: {
name: "驾驶时间",
nameLocation: "end",
nameGap: 12,
nameTextStyle: {
fontFamily: "PingFangSC-Regular",
fontSize: 14,
color: "rgba(0,0,0,.7)",
fontWeight: "normal",
},
type: 'value',
axisLabel: {
color: 'rgba(0,0,0,0.4)',
fontFamily: "PingFangSC-Medium",
fontSize: 12,
align: 'right'
}
},
axisPointer: {
// hover或click 示意线样式
lineStyle: {
color: 'rgba(42,74,240,1)',
type: 'solid'
}
},
series: [
{
name: '全部',
smooth: true, // 是否平滑
type: 'line',
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
connectNulls: true, // 是否连接空数据
data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 500]
},
{
name: '浙A00560',
smooth: true,
type: 'line',
showSymbol: false,
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234]
},
{
name: '浙A00000',
smooth: true,
type: 'line',
showSymbol: false,
data: [150, 232, 201, 154, 190, 330, 410, 301, 154, 190, 330]
},
{
name: '浙A00060',
smooth: true,
type: 'line',
showSymbol: false,
data: [320, 332, 301, 334, 390, 330, 320, 120, 132, 101, 134]
}
]
};
this.myEcharts.setOption(this.option);
},
resize() {
this.myEcharts.resize() // 窗口大小发生变化的时候重置
},
columnar() {
this.isColumnar = !this.isColumnar;
}
}
};
</script>
<style scoped lang="less">
@import "../../../common/style/commonMethods.less";
.content-container {
width: 100%;
height: 100vh;
position: relative;
background: #fff;
}
.landscape_echarts {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.vertical_echarts {
width: 100%;
background-color: #fff;
}
.landscape {
width: 100vh;
height: 100vw;
}
.vertical {
width: 100%;
height: 300px;
}
.scale {
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
z-index: 999;
.font();
text-align: center;
line-height: 50px;
}
</style>