Vue-Element UI集成ECharts实现数据统计分析页_上进学长

大大的周 02-07 2496

文章目录背景效果预览相关文档相关依赖具体实现饼状环形圆角图Vue部分Js部分饼状平铺图Vue部分Js部分折线堆叠图Vue部分Js部分组件引用

背景

? ECharts是由百度开发捐献给Apache的一款基于 JavaScript 的开源可视化图表库，有丰富的图表库、完善的文档，开箱即用，非常方便好用。

效果预览

以下效果中的数据均为虚拟数据。

其中包含饼状图、折线图。

相关文档

官方示例：https://echarts.apache.org/examples/zh/index.html

官方文档：https://echarts.apache.org/handbook/zh/get-started/

相关依赖 "echarts": "5.1.2" 工具类 /** * @param {Function} func * @param {number} wait * @param {boolean} immediate * @return {*} */ export function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function() { // 据上一次触发时间间隔 const last = +new Date() - timestamp // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last) } else { timeout = null // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用 if (!immediate) { result = func.apply(context, args) if (!timeout) context = args = null } } } return function(...args) { context = this timestamp = +new Date() const callNow = immediate && !timeout // 如果延时不存在，重新设定延时 if (!timeout) timeout = setTimeout(later, wait) if (callNow) { result = func.apply(context, args) context = args = null } return result } } import { debounce } from '@/utils' export default { data() { return { $_sidebarElm: null } }, mounted() { this.$_initResizeEvent() this.$_initSidebarResizeEvent() }, beforeDestroy() { this.$_destroyResizeEvent() this.$_destroySidebarResizeEvent() }, activated() { this.$_initResizeEvent() this.$_initSidebarResizeEvent() }, deactivated() { this.$_destroyResizeEvent() this.$_destroySidebarResizeEvent() }, methods: { $_resizeHandler() { return debounce(() => { if (this.chart) { this.chart.resize() } }, 100)() }, $_initResizeEvent() { window.addEventListener('resize', this.$_resizeHandler) }, $_destroyResizeEvent() { window.removeEventListener('resize', this.$_resizeHandler) }, $_sidebarResizeHandler(e) { if (e.propertyName === 'width') { this.$_resizeHandler() } }, $_initSidebarResizeEvent() { this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) }, $_destroySidebarResizeEvent() { this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) } } } 具体实现

下面组件的变量每一个在官方文档中都有标注，自行去查阅。

饼状环形圆角图 Vue部分 <template> <div :class="className" :style="{minHeight:height,width:width}"/> </template> Js部分 <script> import * as echarts from 'echarts' import resize from './mixins/resize' // 饼状环形圆角图 export default { mixins: [resize], props: { className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '250px' }, seriesData: { type: Array, // 默认数据 default: () => { return [ { name: '用户统计', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '15', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 1048, name: '新增' }, { value: 735, name: '冻结' }, { value: 355, name: '活跃' } ] } ] } } }, data() { return { chart: null } }, mounted() { this.$nextTick(() => { this.initChart() }) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart() { this.chart = echarts.init(this.$el, 'roma') this.drawChart() }, drawChart() { this.chart.setOption({ tooltip: { trigger: 'item', // formatter: '{a} <br/>{b} : {c} ({d}%)', formatter: '{b} : {c} ({d}%)', backgroundColor: 'rgba(255,255,255,0.8)', color: 'black', borderWidth: '1', borderColor: 'gray', textStyle: { color: 'black' } }, legend: { left: 'center' }, series: this.seriesData }) } } } </script> 饼状平铺图 Vue部分 <template> <div :class="className" :style="{minHeight:height,width:width}"/> </template> Js部分 <script> import * as echarts from 'echarts' import resize from './mixins/resize' // 饼状平铺图 export default { mixins: [resize], props: { className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '300px' }, seriesData: { type: Array, default: () => { return [ { name: '示例数据', type: 'pie', radius: '50%', emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, itemStyle: { normal: { label: { show: true, formatter: '{b} : {c} ({d}%)' }, labelLine: { show: true } } }, data: [ { value: 1048, name: '类目一' }, { value: 735, name: '类目二' }, { value: 580, name: '类目三' } ] } ] } } }, watch: { seriesData: { deep: true, handler(val) { this.seriesData = val this.disposeChart() this.initChart() } } }, data() { return { chart: null } }, mounted() { this.$nextTick(() => { this.initChart() }) }, beforeDestroy() { this.disposeChart() }, methods: { disposeChart() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, initChart() { this.chart = echarts.init(this.$el, 'roma') this.drawChart() }, drawChart() { this.chart.setOption({ tooltip: { trigger: 'item', formatter: '{b} : {c} ({d}%)' }, legend: { left: 'center' }, series: this.seriesData }) } } } </script> 折线堆叠图 Vue部分 <template> <div :class="className" :style="{height:height,width:width}"/> </template> Js部分 // 折线堆叠图 export default { mixins: [resize], props: { className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '500px' }, xAxisData: { type: Array, default: () => { return ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] } }, seriesData: { type: Array, default: () => { return [{ name: '示例1', type: 'line', stack: '总量', emphasis: { focus: 'series' }, areaStyle: { // 改变区域颜色 //color: '#fadb14' }, // itemStyle: { // normal: { // // 折线点颜色 // color: '#d4b106', // lineStyle: { // // 折线颜色 // color: '#876800' // } // } // }, // 光滑线条 // smooth: true, data: [67, 6213, 66, 67, 78, 632, 1410, 4552, 4512, 555] }, { name: '示例2', type: 'line', stack: '总量', areaStyle: {}, emphasis: { focus: 'series' }, data: [120, 132, 101, 134, 90, 230, 210, 3466, 67, 36] }] } } }, watch: { xAxisData: { deep: true, handler(val) { this.xAxisData = val } }, seriesData: { deep: true, handler(val) { this.seriesData = val this.disposeChart() this.initChart() } } }, data() { return { chart: null } }, mounted() { this.$nextTick(() => { this.initChart() }) }, beforeDestroy() { this.disposeChart() }, methods: { disposeChart() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, initChart() { this.chart = echarts.init(this.$el, 'roma') this.drawChart() }, drawChart() { this.chart.setOption({ tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { left: 'center' }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: this.xAxisData } ], yAxis: [ { type: 'value' } ], series: this.seriesData }) } } } </script> 组件引用 <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16"> <el-card shadow="always"> <div slot="header" class="clearfix"> <span>销售趋势</span> <span class="card-div-desc">{{ lineCardTitle }}</span> <el-radio-group style="float: right; padding: 3px 0" v-model="lineDataType" size="mini" @change="handleLineChange"> <el-radio-button label="order">订单数</el-radio-button> <el-radio-button label="sale">销售额</el-radio-button> </el-radio-group> </div> <div> <LineHeapChart height="600px" :xAxisData="lineXAxisData" :seriesData="lineSeriesData" /> </div> </el-card> </el-col>

具体的数据结构，在每一个组件里面的插槽位置都有对应的默认数据示例，自行将后端传来的数据转换为默认数据格式传递给组件就可以了。