需要大量使用图表的项目,为了提升开发效率,可以对图表类进行封装成组件,方便页面的搭建,也能进行统一管理维护,即使后面系统风格需要调整,调整起来也比较方便、快速。
常用的有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…