背景：
需要大量使用图表的项目，为了提升开发效率，可以对图表类进行封装成组件，方便页面的搭建，也能进行统一管理维护，即使后面系统风格需要调整，调整起来也比较方便、快速。
有哪些工具？
常用的有Echarts、AntV，使用起来都大同小异，具体图表如何实现，看官网参数进行配置调整即可。
怎么封装？
以Echarts为例，效果截图
- 安装依赖，安装vue-echarts需要安装echarts，vue2下使用vue-echarts还需要安装@vue/composition-api。
npm install echarts --save npm install vue-echarts --save npm install --save @vue/composition-api // 最终安装版本 // "echarts": "^5.3.2", // "vue-echarts": "^6.0.3", // "@vue/composition-api": "^1.6.1",
- 使用vue-echarts对图表进行封装，这里只演示line折线图，常用的柱状图bar、饼图pie等与折线图line的实现方法相似，更改defaultOption和option对应参数即可。vue-echarts只需要传入option配置即可进行图表更新，配合vue的computed，我们可以根据props进来的数据进行实时计算，从而实现echarts的绘制和数据更新。dataSource为传进来echarts的数据，包括横纵坐标的数值和配置参数；chartOption是一些用户自定义的line参数，可以根据当前图表的风格对组件做一些参数调整；height控制echart的高度。option的title、tooltip、grid、legend、xAxis、yAxis、series几个重要参数，使用assign进行整合，如果chartOption有传自定义的配置参数，则生效自定义配置参数，没有，则使用默认配置。设置autoresize让图表自适应。
<template>
<v-chart
ref="myChart"
class="echarts"
:style="{height: height}"
:option="option"
autoresize
@click="click"
/>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import echarts from 'echarts'
import VChart from 'vue-echarts'
export default {
name: 'EchartLine',
components: {
VChart
},
props: {
dataSource: {
type: Object,
default: () => {
return {}
}
},
chartOption: {
type: Object,
default: () => {
return {}
}
},
height: {
type: String,
default: '340px'
},
unit: {
type: String,
default: ''
}
},
computed: {
option () {
const option = {
title: _.assign({}, this.defaultOption.title, this.chartOption.title || {}),
tooltip: _.assign({}, this.defaultOption.tooltip, this.chartOption.tooltip || {}),
grid: _.assign({}, this.defaultOption.grid, this.chartOption.grid || {}),
legend: _.assign({}, this.defaultOption.legend, this.chartOption.legend || {}),
xAxis: _.assign({}, this.defaultOption.xAxis, this.chartOption.xAxis, {data: this.dataSource.xAxis}),
yAxis: _.assign({}, this.defaultOption.yAxis, this.chartOption.yAxis || {}),
series: _.map(this.dataSource.yAxis, dataItem => {
return {
type: 'line',
symbol: dataItem.symbol || 'circle',
smooth: dataItem.smooth !== false,
symbolSize: dataItem.symbolSize || 8,
showSymbol: dataItem.showSymbol || (dataItem.data.length === 1),
name: dataItem.name,
data: dataItem.data,
itemStyle: {
color: dataItem.color,
borderColor: 'rgba(255,255,255,0.8)',
borderWidth: 2
}
}
})
}
return option
}
},
data () {
return {
defaultOption: {
title: {
x: '5%'
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#fff'
},
backgroundColor: 'rgba(51,51,51,0.80)',
padding: [14, 20]
},
grid: {
top: '15%',
left: '24',
right: '24',
bottom: '60',
containLabel: true
},
legend: {
left: 'center',
bottom: '26',
itemGap: 25,
itemWidth: 8,
itemHeight: 8,
show: true,
icon: 'circle',
textStyle: {
color: () => {
return _.map(this.dataSource.yAxis, item => {
return item.color
})
}
}
},
xAxis: {
axisLabel: {
margin: 12,
textStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#E8E8E8'
}
},
splitLine: {
show: false
}
},
yAxis: {
minInterval: 1,
splitNumber: 5,
axisLine: {
show: true,
lineStyle: {
color: '#E8E8E8'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#E8E8E8',
opacity: 0.5,
type: 'dotted'
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#666'
}
}
}
}
}
},
methods: {
click (e) {
this.$emit('click', e)
}
}
}
</script>
<style lang="scss" scoped>
.echarts{
width: 100%;
height: 100%;
}
</style>- 组件使用，配置dataSource即可展示数值，如果想自行定义一些参数配置，可通过chartOption配置实现。
<template>
<EchartLine :dataSource="dataSource"></EchartLine>
</template>
<script>
import EchartLine from '@/components/EchartLine'
export default {
name: 'EchartsDemo',
components: {
EchartLine
},
data () {
return {
dataSource: {
xAxis: ['星期一', '星期二', '星期三', '星期四', '星期五'],
yAxis: [
{
name: '语文',
color: '#FF6F00',
data: [45, 56, 24, 87, 45]
},
{
name: '数学',
color: '#FFB903',
data: [34, 86, 67, 34, 89]
},
{
name: '英语',
color: '#3D8BFF',
data: [66, 83, 45, 77, 73]
}
]
}
}
},
methods: {
}
}
</script>Tips:
vue-echarts资料：github.com/ecomfe/vue-…
echarts v5各参数配置：echarts.apache.org/zh/option.h…
总结
到此这篇关于vue-echarts如何实现图表组件封装的文章就介绍到这了,更多相关vue-echarts图表组件封装内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！