目录背景:有哪些工具?怎么封装?总结背景: 需要大量使用图表的项目,为了提升开发效率,可以对图表类进行封装成组件,方便页面的搭建,也能进行统一管理维护,即使后面系统风格需要调整,调整
需要大量使用图表的项目,为了提升开发效率,可以对图表类进行封装成组件,方便页面的搭建,也能进行统一管理维护,即使后面系统风格需要调整,调整起来也比较方便、快速。
常用的有Echarts、AntV,使用起来都大同小异,具体图表如何实现,看官网参数进行配置调整即可。
以Echarts为例,效果截图
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",
<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>
<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图表组件封装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue-echarts如何实现图表组件封装详解
本文链接: https://www.lsjlt.com/news/148807.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0