随着项目越来越多的交互和展示, 图表类的看板也在项目中应用的越来越多, echarts作为一款优秀并开源的产品,在项目中也大规模的应用,尤其是边缘计算和大数据可视化的项目中,随处都能见它的身影,以前做了很多的可视化项目,感觉自己忘了很多, 最近业余时间总结了一些,并记录在blog里,希望能帮到有用到的开发者
<template>
<div class="echarts" ref="echarts"></div>
</template>
<script>
import * as echarts from 'echarts';
import largeScreen from '@/assets/json/theme.json'
export default {
props: {
option: {
type: Object,
default: () => { return null }
}
},
data() {
return {
myChart: ''
}
},
watch: {
option: {
handler() {
this.setOption()
},
deep: true
}
},
mounted() {
echarts.registerTheme('largeScreen', largeScreen) //echarts主题配置
this.myChart = echarts.init(this.$refs.echarts, 'largeScreen')
this.setOption()
},
beforeDestroy() {
this.myChart && this.myChart.dispose()
},
methods: {
setOption() {
this.myChart && this.option && this.myChart.setOption(this.option)
}
},
}
</script>
<style lang="scss" scoped>
.echarts{
width: 100%;
height: 100%;
}
</style>
图表组件使用时,可直接引入
<template>
<div>
<Echarts :option="option" style="height: 100%" />
</div>
</template>
import Echarts from '@/components/Echarts'
export default {
components: { Echarts },
data() {
return {
url: '' //api
option: {
series: [],
title: []
}
}
},
getData() {
this.getChartsData()
},
async getChartsData() {
const { data } = await getAction(this.url, { ..params })
this.option.series[0] = series
//or
this.option.series[0] = dataList.map((item, index) => {
// 逻辑处理
return {
...item,
name:item.label
value: item.label
} //and so on 总之需要构建类[value、value] 或者 [{name:"', value:''}, {name:"', value:''}] 的数据结构以便echart正确渲染
})
} //get
} //methods
}
好了,这样就封装好了一个简洁干净,高效不臃肿的echarts组件,开发者只需要update数据即可更新图表,后面有时间我会抽空陆续更新echarts中的基础配置和高阶样式的配置
另外类边缘计算和数据可视化类的管理项目,很多图表的更新都是以来某一项数据的变化而更新的,比如地区、类型、时间等,这时候其实可以抽出一部分使用mixin混入来解决,可以有效降低重复代码量和增强代码的可读性可维护性,mixin使用参见我的另一篇博客:
vue的mixin混入在项目开发中的使用