通过设置Y轴坐标位置和定位索引来实现双Y轴的效果。
实现效果:
代码:
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '90%'
},
height: {
type: String,
default: '320px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
},
},
data() {
return {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
},
setOptions({
expectedData,
actualData
} = {}) {
this.chart.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
/*legend: {
data: ['维修数', '维修合格数'],
icon: 'roundRect',
right: '0',
top: '10',
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 12,
//字体风格,'normal','italic','oblique'
fontStyle: 'normal',
},
},*/
grid: {
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true,
},
xAxis: {
type: 'category',
data: ['3月', '4月', '5月', '6月', '7月', '8月', '9月'],
axisLine: {
show: false,//隐藏刻度线
lineStyle: {//字体颜色
color: '#878787',
},
},
},
yAxis: [
{ //左y轴
type: 'value',
name: '数量',
// nameLocation: 'middle',
splitLine: {
show: false,
}, //隐藏对称线
axisLabel: {
margin: 13,
textStyle: {
color: '#657584'
}
},
splitNumber: 5
// min: 0,
// max: 100
},
{ //右y轴
type: 'value',
name: '比例',
position: "right",//定位右y轴
formatter: "{value}%",
splitLine: {
show: false,
}, //隐藏对称线
axisLabel: {
margin: 10,
textStyle: {
color: '#657584'
}
},
splitNumber: 5,
// min: 0,
// max: 4000,
// interval: 800,
nameTextStyle: {
// padding: 4,
padding: [4, 30, 4, 4] //对字体调整
}
}
],
series: [{
data: [160, 230, 224, 218, 135, 147, 251],
type: 'bar',
barWidth: '40%',
showBackground: false,
label: {//显示在顶部的数值
show: true,
position: "top",
},
itemStyle: {
borderRadius: [2, 2, 0, 0], //柱体圆角
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0, [{ //只要修改前四个参数就ok
offset: 0,
color: '#003f97'
}, //柱图渐变色
{
offset: 1,
color: '#00C6FB'
}
]
),
},
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}, {
data: [70, 90, 90, 60, 90, 60, 70],
type: 'line',
smooth: false, //true是曲线 false是直线
symbol: 'circle', //拐点样式
symbolSize: 12, //拐点大小
label: {//显示在顶部的数值
show: true,
position: "top",
formatter: "{c}%"
},
itemStyle: {
normal: {
lineStyle: {
width: 2, //折线宽度
color: "#FFBF00" //折线颜色
},
color: '#FFBF00', //拐点颜色
borderColor: '#FFBF00', //拐点边框颜色
borderWidth: 2 //拐点边框大小
},
emphasis: {
color: '#ff9705' //hover拐点颜色定义
}
},
yAxisIndex: 1//定位右y轴
}
]
})
}
}
}
</script>