echarts双折线
<template>
<div id="myChart" :style="{width: '100%', height: '100%'}"></div>
</template>
<script>
import echarts from "echarts";
export default {
name: "line",
mounted() {
this.drawLine();
},
methods: {
alignment: function (val) {
let val1 = val.toString();
if (val1 != null) {
let len = this.yk(val1);
return String.fromCharCode(8194).repeat(len) + val1;
}
},
yk: function (val) {
return 6 - val.toString().length;
},
drawLine() {
let _this = this
var aa = ['10:20',"10:30", "10:40", "10:50", "11:00", "G", "H", "J", "K", "L", "Z", "X", "C"];
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
tooltip: {
show: true,
trigger: 'item',
formatter: function(arg) {
return arg.data + `${arg.seriesIndex === 0 ? '人次':'辆'}` //自定义tip内容
},
axisPointer: {
type: 'line',
}
},
// color:['rgba(0, 150, 255, 1)','rgba(0, 150, 255, 1)'],
// legend: {
// data: ['人流量数据','车流量数据'],
// top: 0,
// right: "0",
// orient: "horizontal",
// center: true,
// textStyle: {
// textAlign: 'center',
// fontSize: 12,
// color:'rgba(0, 150, 255, 1)'
// },
// itemGap: 30,
// itemWidth: 25,
// },
grid: [{
show: false,
bottom: '10%',
left: 10,
right: 100,
containLabel: true,
height: '40%'
}, {
show: false,
top: '48%',
left: 35,
right: 100,
height: '0%'
}, {
show: false,
top: '10%',
// left: 76,
left: 10,
right: 100,
containLabel: true,
height: '40%'
}],
yAxis: [{
type: 'value',
inverse: true,
axisLine: {
show: true,
lineStyle: {
color: '#0096FF'
}
},
axisTick: {
show: false,
},
position: 'left',
axisLabel: {
show: true,
// formatter: function (params) {
// return _this.alignment(params);
// },
textStyle: {
color: '#0096FF',
fontSize: 12,
// align:'left'
}
},
splitLine: {
show: false,
lineStyle: {
color: "#0096FF",
width: 1,
}
}
}, {
gridIndex: 1,
show: false,
}, {
gridIndex: 2,
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#0096FF'
}
},
axisTick: {
show: false,
},
position: 'left',
axisLabel: {
show: true,
// formatter: function (params) {
// return _this.alignment(params)
// },
textStyle: {
color: '#0096FF',
fontSize: 12,
// align:'left'
}
},
splitLine: {
show: false,
lineStyle: {
color: "#0096FF",
width: 1,
}
}
}, ],
xAxis: [{
type: 'category',
boundaryGap: false, // 不留白，从原点开始
position: 'bottom',
axisLine: {
show: true,
lineStyle: {
color: '#0096FF'
}
},
axisTick: {
show: false
},
axisLabel: {
show: false,
},
data: [],
}, {
gridIndex: 1,
type: 'category',
position: 'center',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
align: 'center',
textStyle: {
color: '#0096FF',
fontSize: 12
}
},
boundaryGap: false, // 不留白，从原点开始
data: aa,
},
{
gridIndex: 2,
type: 'category',
position: 'top',
boundaryGap: false, // 不留白，从原点开始
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false,
},
data: [],
}
],
series: [{
name: '人流量数据',
type: 'line',
itemStyle: {
normal: {
color: 'rgba(195, 25, 29, 0)'
}
},
smooth:true,//设置折线图平滑
label: {
normal: {
show: false,
color: '#0096FF',
position: 'top'
}
},
xAxisIndex: 2,
areaStyle:{ //2.基础面积图。区域填充样式
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 1代表上面
offset: 0,
color: 'rgba(195, 25, 29, 1)'
}, {
offset: 1,
color: 'rgba(255, 8, 112, 0.35)'
}]),
// opacity: 0.85 //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充
},
yAxisIndex: 2,
data: [1,2,3,4,5,6,5,4,3,5,2,8,5]
}, {
name: '车流量数据',
type: 'line',
itemStyle: {
normal: {
color: 'rgba(102, 166, 255, 0)'
}
},
smooth:true,//设置折线图平滑
label: {
normal: {
show: false,
color: '#0096FF',
position: 'bottom'
}
},
areaStyle:{ //2.基础面积图。区域填充样式
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 1代表上面
offset: 0,
color: 'rgba(137, 247, 254, 0)'
}, {
offset: 0.85,
color: 'rgba(102, 166, 255, 1)'
}]),
opacity: 0.85 //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充
},
data: [1,2,3,4,5,6,5,4,3,5,2,8,5],
}]
});
window.addEventListener("resize", function () {
myChart.resize() // myChart 是实例对象
})
}
}
}
</script>
<style scoped>
</style>