根据可户需求在实现Echarts折线图的时候发现数值极其相近,3条折线图都重合到一起,非常影响用户体验,因此此方法
方法的思路来源于Y轴最大值与最小值区间的处理
核心代码如下(基于vue实现)
// 准备日期数据
this.dateList =this.threeU.dateString
// 准备数值数据
this.dataList =this.threeU.uas
// 计算数据最大值和最小值
let minValue = '0'
let maxValue = '0'
let list = this.dataList.filter(item => (item && item != 'null' && item != 'NaN'))
let precision = 10000 //精度
maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
// 计算间隔,返回y轴最大值,y轴最小值 ,间隔
let getLeftData = (min, max) => {
// 控制分隔条数,
let diff = max - min
return {
max: max + diff,
min: min - diff,
// 分割成5等份
interval: (max + diff - (min - diff)) / 5,
};
}
this.interObj = getLeftData(minValue, maxValue)
整体代码
<!--
* @Author: 李勇
* @Date: 2021-03-25 21:14:19
* @LastEditors: 李勇
* @LastEditTime: 2021-04-09 10:26:13
* @FilePath: \line-lose-phaseIi\src\views\timeSharing\components\curve.vue
* @Description:
-->
<template>
<div class="curve_box">
<Title text="三相电压" />
<div class="curve" ref="curve"></div>
</div>
</template>
<script>
import Title from "@/components/Title.vue";
import echarts from "echarts";
export default {
components: {
Title
},
created() {
this.$nextTick(() => {
this.curve();
})
},
props: {
threeU: {
type: Object,
default() {
return {}
}
}
},
data(){
return{
dataList:{
type:Array,
default:[]
},
dateList:{
type:Array,
default:[]
},
interObj:{
type:null
}
}
},
watch: {
dataList: {
// 在父组件数据发生改变后子组件要做到实时更新,就需要子组件用watch来监听数据的变化
// 看情况是否需要newValue和oldValue之间值比较
handler(newVal, oldVal) {
if (this.myChart) {
if (newVal) {
this.myChart.setOption(newVal)
} else {
this.myChart.setOption(oldVal)
}
} else {
this.curve()/* 重新执行初始化图表实例 */
}
},
deep: true
}
},
methods: {
curve() {
var myChart = echarts.init(this.$refs.curve);
// 准备日期数据
this.dateList =this.threeU.dateString
// 准备数值数据
this.dataList =this.threeU.uas
// 计算数据最大值和最小值
let minValue = '0'
let maxValue = '0'
let list = this.dataList.filter(item => (item && item != 'null' && item != 'NaN'))
let precision = 10000 //精度
maxValue = Math.ceil(Math.max.apply(null, list) * precision) / precision;
minValue = Math.floor(Math.min.apply(null, list) * precision) / precision;
// 计算间隔,返回y轴最大值,y轴最小值 ,间隔
let getLeftData = (min, max) => {
// 控制分隔条数,
let diff = max - min
return {
max: max + diff,
min: min - diff,
// 分割成5等份
interval: (max + diff - (min - diff)) / 5,
};
}
this.interObj = getLeftData(minValue, maxValue)
var option = {
legend: {
icon: 'circle',
top: '2%',
right: '1%',
itemWidth: 6,
itemGap: 20,
textStyle: {
color: '#556677'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
show: true,
backgroundColor: '#fff',
color: '#556677',
borderColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(0,0,0,0)',
shadowOffsetY: 0
},
lineStyle: {
width: 0
}
},
formatter: '{b0}<br/>{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
backgroundColor: 'rgba(24, 71, 185, .6)',
textStyle: {
color: '#fff'
},
padding: [10, 10],
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
},
grid: {
top: '15%',
bottom: "12%",
left: "10%",
right: "10%",
},
xAxis: {
type: 'category',
data: this.dateList,
axisLabel: {
interval: 'auto',
textStyle: {
color: '#999',//坐标值得具体的颜色
},
formatter: function (params) {
// console.log("params", params.slice(10))
return params.slice(10)
}
},
axisLine: {
show: true,//x轴线隐藏
fontSize: 12,
},
axisTick: {
show: true,//隐藏x轴的标点
},
},
yAxis: {
type: 'value',
// 设置y轴间隔
interval: this.interObj.interval,
// 设置y轴最大值
min: this.interObj.min,
// 设置y轴最小值
max: this.interObj.max,
axisLabel: {
textStyle: {
color: '#999',
},
interval: 'auto',
formatter: function (value, index) {
return value.toFixed(0) ;
}
},
// 显示分隔线
splitLine: {
show: false,
lineStyle: {
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
},
series: [
{
name: "A相",
data: this.threeU.uas,
type: 'line',
symbol: 'circle',
symbolSize: 4,
itemStyle: {
color: '#39FDDB'
},
},
{
name: "B相",
data: this.threeU.ubs,
type: 'line',
symbol: 'circle',
symbolSize: 4,
itemStyle: {
color: '#F45E23'
},
},
{
name: "C相",
data: this.threeU.ucs,
type: 'line',
symbol: 'circle',
symbolSize: 4,
itemStyle: {
color: '#C63CFF'
},
},
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
}
}
</script>
<style lang="scss" scoped>
.curve_box {
height: 100%;
width: 100%;
}
.curve {
width: 100%;
height: calc(100% - 33px);
}
</style>
效果图如下