Vue2+Echarts封装组件：专注逻辑，图表生成自动化
通过Vue2封装了一个Echarts图表组件，不需要关注图表的生成和渲染了，只需要关注逻辑开发即可，包含了柱状图、折线图、饼图、柱状叠加图、柱状图折线图组合、柱状叠加图与柱状图的组合等，包含了图表下钻、右键跳转明细功能，无需关注Echarts的实现，提高开发效率。
开发者能够将注意力集中在业务逻辑的开发上，而无需担心底层图表的创建和渲染过程。这样的表述既体现了组件的便捷性，也突出了它对提高开发效率的帮助。同时，对于那些寻找简化ECharts集成解决方案的开发者来说，这也是一个很好的案例。
组件使用
（1调用）/**
* 最大值最小值
*/
export function szqMaxAndMin(data) {
// series 中 所有数据的最大值和最小值
let isLing = false
const arrLing = []
data.forEach(it => {
if (it.yAxisIndex === 1) {
arrLing.push(...it.data)
}
})
isLing = arrLing.every(number => Number(number) === 0)
const mm = maxAndMin(data)
// Min 左边数值轴， Min1 右侧百分比轴
const Max = Math.ceil(mm[0].max)
const Max1 = Math.ceil(mm[1].max)
let Min = mm[0].min
let Min1 = mm[1].min
const rat1 = Min / Max
const rat2 = Min1 / Max1
rat1 > rat2 ? Min = rat2 * Max : Min1 = rat1 * Max1
return { max: Max, min: Math.ceil(Min), max1: Max1, min1: Math.ceil(Min1), isLing }
}
function maxAndMin(allData) {
const result = {}
allData.forEach(item => {
const yAxisIndex = item.yAxisIndex
const values = item.data.map(value => value && parseInt(value))
if (!result[yAxisIndex]) {
result[yAxisIndex] = {
max: Math.max(...values),
min: Math.min(...values)
}
} else {
result[yAxisIndex].max = Math.max(result[yAxisIndex].max, ...values)
result[yAxisIndex].min = Math.min(result[yAxisIndex].min, ...values)
}
})
return result
}
export function autoBottom(h, isTitle) {
let height = ''
let left = []
let right = []
if (h <= 400) {
isTitle ? height = '42.5%' : height = '40%'
} else if (h <= 450) {
isTitle ? height = '42.5%' : height = '40%'
} else if (h <= 500) {
isTitle ? height = '37.5%' : height = '35%'
} else if (h <= 550) {
isTitle ? height = '34.5%' : height = '32%'
} else if (h <= 600) {
isTitle ? height = '33.5%' : height = '31%'
} else if (h <= 650) {
isTitle ? height = '30.5%' : height = '28%'
left = [0, 10, -10, -20]
right = [0, -30, -10, 0]
} else if (h <= 700) {
isTitle ? height = '27.5%' : height = '25%'
left = [0, 10, -5, -20]
right = [0, -30, -5, 0]
} else if (h <= 750) {
isTitle ? height = '26.5%' : height = '24%'
} else if (h <= 800) {
isTitle ? height = '23.5%' : height = '21%'
} else {
isTitle ? height = '22.5%' : height = '20%'
}
return { height, left, right }
}