此echarts图表实现的是一个奇怪的需求,
比如一个纵坐标数据是 [1, 2, 28, 5, 3, 79, 0],正常数据1,2,3,5,会间隔很小,几乎看不出变化,因为较为不正常的值 28 79会扯得很大,为了解决这个问题,引入此解决方案。
通过将y轴坐标轴隐藏,并将中间值采用正常这是形式, 28 79等极端值,通过+2的形式展示
即,Y坐标以0-5 ± 2为界限, 只展示 -2 到 7,之间的数值,28 79这种值,取最大值作为上界限,
79展示效果为7,28则为 7-5之间的某个值,计算方式为 2/ (79-5) * (28-5),即为展示值。
echart 封装
<template>
<div class="chart">
<div
:id="chartsId"
class="chart-regions"
/>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts';
export default {
props: {
title: {
type: String,
default: '折线图'
},
// 当前echarts的id,动态获取
chartsId: {
type: String,
require: true,
default: () => '123'
},
// 是否进行重新渲染,只要true变false,或者false变true都会触发watch
resizeAble: {
type: Boolean,
default: false
},
// 是否显示基准线
baseSwitch: {
type: Boolean,
default: false
},
// 当前chart的配置文件
option: {
type: Object,
default: () => {
}
},
// markline
markLine: {
type: Array,
default: () => []
}
},
data() {
return {
myCharts: null
};
},
watch: {
baseSwitch() {
this.initEcharts();
},
resizeAble() {
this.resizeCharts();
}
},
mounted() {
this.myCharts = echarts.init(document.getElementById(this.chartsId));
this.getChartsData();
},
beforeDestroy() {
this.myCharts.dispose();
this.myCharts = null;
},
methods: {
/**
* 获取图表数据
*/
getChartsData(