echarts screen adaptation
Add the following code where you need it in your project
window.addEventListener("resize",()=>{
this.chartsDom.resize();
})
full code
<template>
<div class="box">
<div id="chlorophyll223" class="waterMonth"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
props: ['nameData1', 'balanceData1', 'waterData1'],
data() {
return {
nameData: this.nameData1,
balanceData: this.balanceData1,
waterData: this.waterData1,
myChart: null
}
},
methods: {
// 创建echarts
createEcharts() {
if (
//判断是否存在echarts实例化对象,如果存在则销毁
this.chartsDom != null &&
this.chartsDom != '' &&
this.chartsDom != undefined
) {
this.chartsDom.dispose()
}
var chartDom = document.getElementById('chlorophyll223')
this.chartsDom = echarts.init(chartDom) //创建echarts实例化对象
this.chartsDom.clear() //清空画布数据
this.chartsDom.setOption(this.option())
// 屏幕适配
window.addEventListener("resize",()=>{
this.chartsDom.resize();
})
},
option() {
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true
}
},
formatter: function(params) {
// 只粘贴formatter了
let relVal = params[0].axisValueLabel
for (let i = 0; i < params.length; i++) {
// debugger
relVal +=
'<br/>' +
params[i].marker +
params[i].seriesName +
': ' +
params[i].data + // 不同点
'万m³'
}
return relVal
}
},
grid: {
top: '15%',
left: '2%',
right: '10%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.nameData,
axisLabel: {
textStyle: {
color: '#fff'
}
},
axisLine: {
show: true, //隐藏x轴线
lineStyle: {
color: '#fff'
}
},
label:{
show:false,
backgroundColor:'transparent',
color:"#000"
}
},
yAxis: {
type: 'value',
show: true, // 前提： y轴肯定是要显示的
name: '单位:万m³', // 你的单位写在这就可以
nameTextStyle: {
// 单位样式
color: '#FFFFFF', // 字体颜色
fontSize: 10, // 字体大小
padding: [0, 15, 4, 0] // 内填充
},
axisLabel: {
textStyle: {
color: '#fff'
}
},
axisLine: {
show: true, //隐藏x轴线
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#9998'
}
}
},
series: [
{
name: '用水量',
data: this.waterData,
// data: [12, 13, 15, 14, 18, 16, 18, 15, 16, 15, 14, 25, 11, 15, 12, 15, 12, 15, 15],
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#21F8E4'
}, {
offset: 1,
color: '#0095F1'
}]),
}
},
label: {
show: false, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: 'rgba(113,237,255,0)',
fontSize: '8'
}
}
}
]
}
return option
}
},
mounted() {
this.createEcharts()
}
}
</script>
<style lang="less" scoped>
.box {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.waterMonth {
width: 100%;
height: 100%;
}
}
</style>