目录
功能、效果图：
代码实现
1、下载echarts包：终端运行
2、代码
3.运行项目：终端运行
4、可能遇到的错误
具体代码详解：
功能、效果图：
1.点击对应模块，放大并显示数据
2、点击下方图标，对应饼图模块可以显示/隐藏
代码实现
1、下载echarts包：终端运行
npm install echarts2、代码
components/HelloWorld.vue
<template><div :class="className" :style="{height:height,width:width}" />
</template><script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
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'}},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, 'macarons')this.chart.setOption({tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {left: 'center',bottom: '10',data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']},series: [{name: 'WEEKLY WRITE ARTICLES',type: 'pie',roseType: 'radius',radius: [15, 95],center: ['50%', '38%'],data: [{ value: 320, name: 'Industries' },{ value: 240, name: 'Technology' },{ value: 149, name: 'Forex' },{ value: 100, name: 'Gold' },{ value: 59, name: 'Forecasts' }],animationEasing: 'cubicInOut',animationDuration: 2600}]})}}
}
</script>
在 components文件夹里新建mixins文件夹——>mixins文件夹里新建resize.js文件,代码如下：
import { debounce } from '@/utils'export default {data() {return {$_sidebarElm: null,$_resizeHandler: null}},mounted() {this.$_resizeHandler = debounce(() => {if (this.chart) {this.chart.resize()}}, 100)this.$_initResizeEvent()this.$_initSidebarResizeEvent()},beforeDestroy() {this.$_destroyResizeEvent()this.$_destroySidebarResizeEvent()},// to fixed bug when cached by keep-alive// https://github.com/PanJiaChen/vue-element-admin/issues/2116activated() {this.$_initResizeEvent()this.$_initSidebarResizeEvent()},deactivated() {this.$_destroyResizeEvent()this.$_destroySidebarResizeEvent()},methods: {// use $_ for mixins properties// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential$_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)}}
}
与components同级新建utils文件夹——>utils文件夹里新建index.js文件，代码如下：
/*** @param {Function} func* @param {number} wait* @param {boolean} immediate* @return {*}*/
export function debounce(func, wait, immediate) {let timeout, args, context, timestamp, resultconst later = function () {// 据上一次触发时间间隔const last = +new Date() - timestamp// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 waitif (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 = thistimestamp = +new Date()const callNow = immediate && !timeout// 如果延时不存在，重新设定延时if (!timeout) timeout = setTimeout(later, wait)if (callNow) {result = func.apply(context, args)context = args = null}return result}
}3.运行项目：终端运行
npm run dev4、可能遇到的错误
“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘...
解决方法
注：
1、本案例可直接使用，本人是在HelloWorld.vue中写的应用代码，新加页面运行记得配置路由，其他文件位置放在与之相对应的位置
2、HelloWorld.vue文件里面的数据、样式可根据自己的要求改动，其余文件里的内容无需改动
具体代码详解：
1、props中的width、height为整个图的宽高
2、series中的
//15空心小圆尺寸，95大圆尺寸 radius: [15, 95],
可以通过改变大圆尺寸改变饼图尺寸
3、series中的data为饼图数据
legend中的data为下方图标
如果想改变数据，需要这两处同时更改
例：
4、animationDuration: 2600
动画时间
5、更改饼图各部分颜色：与series和legend同级
可单独规定颜色，也可写颜色范围
