vue echarts封装使用

echarts 尺寸自动调节 resize.js

柱状图

components/dashboard/lineChart.vue

javascript"><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: '350px'},autoResize: {type: Boolean,default: true},chartData: {type: Object,required: true}},data() {return {chart: null}},watch: {chartData: {deep: true,handler(val) {this.setOptions(val)}}},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.setOptions(this.chartData)},setOptions({ expectedData, actualData } = {}) {this.chart.setOption({xAxis: {data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],boundaryGap: false,axisTick: {show: false}},grid: {left: 10,right: 10,bottom: 20,top: 30,containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'},padding: [5, 10]},yAxis: {axisTick: {show: false}},legend: {data: ['expected', 'actual']},series: [{name: 'expected', itemStyle: {normal: {color: '#FF005A',lineStyle: {color: '#FF005A',width: 2}}},smooth: true,type: 'line',data: expectedData,animationDuration: 2800,animationEasing: 'cubicInOut'},{name: 'actual',smooth: true,type: 'line',itemStyle: {normal: {color: '#3888fa',lineStyle: {color: '#3888fa',width: 2},areaStyle: {color: '#f3f8ff'}}},data: actualData,animationDuration: 2800,animationEasing: 'quadraticOut'}]})}}
}
</script>

饼图

components/dashboard/pieChart.vue

javascript"><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/dashboard/RaddarChart.vue

javascript"><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'const animationDuration = 3000export 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: 'axis',axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},radar: {radius: '66%',center: ['50%', '42%'],splitNumber: 8,splitArea: {areaStyle: {color: 'rgba(127,95,132,.3)',opacity: 1,shadowBlur: 45,shadowColor: 'rgba(0,0,0,.5)',shadowOffsetX: 0,shadowOffsetY: 15}},indicator: [{ name: 'Sales', max: 10000 },{ name: 'Administration', max: 20000 },{ name: 'Information Techology', max: 20000 },{ name: 'Customer Support', max: 20000 },{ name: 'Development', max: 20000 },{ name: 'Marketing', max: 20000 }]},legend: {left: 'center',bottom: '10',data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']},series: [{type: 'radar',symbolSize: 0,areaStyle: {normal: {shadowBlur: 13,shadowColor: 'rgba(0,0,0,.2)',shadowOffsetX: 0,shadowOffsetY: 10,opacity: 1}},data: [{value: [5000, 7000, 12000, 11000, 15000, 14000],name: 'Allocated Budget'},{value: [4000, 9000, 15000, 15000, 13000, 11000],name: 'Expected Spending'},{value: [5500, 11000, 12000, 15000, 12000, 12000],name: 'Actual Spending'}],animationDuration: animationDuration}]})}}
}
</script>

在 components文件夹dashboard里新建mixins文件夹——>mixins文件夹里新建resize.js文件,代码如下：

使用时在echats图页引入即可

javascript">import { debounce } from '@/utils'export default {data() {return {$_sidebarElm: null,$_resizeHandler: null}},mounted() {this.initListener()},activated() {if (!this.$_resizeHandler) {// avoid duplication initthis.initListener()}// when keep-alive chart activated, auto resizethis.resize()},beforeDestroy() {this.destroyListener()},deactivated() {this.destroyListener()},methods: {// use $_ for mixins properties// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential$_sidebarResizeHandler(e) {if (e.propertyName === 'width') {this.$_resizeHandler()}},initListener() {this.$_resizeHandler = debounce(() => {this.resize()}, 100)window.addEventListener('resize', this.$_resizeHandler)this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)},destroyListener() {window.removeEventListener('resize', this.$_resizeHandler)this.$_resizeHandler = nullthis.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)},resize() {const { chart } = thischart && chart.resize()}}
}

与components同级新建utils文件夹——>utils文件夹里新建index.js文件，代码如下：

javascript">/*** @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}
}