仅以此记录下个人使用 echart 的方法，毕竟好记性不如烂笔头。
参考资料
手摸手，带你用 vue 撸后台 系列三 (实战篇)
安装 echarts
npm install echarts –save
echarts package 版本
“echarts”: “^4.2.0-rc.2″
utils
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
}
}
chart 组件代码
<template>
<div :class=”className” :style=”{height:height,width:width}”></div>
</template>
<script>
import echarts from ‘echarts’
import {debounce} from ‘@/utils’
export default {
props: {
className: {
type: String,
default: ‘chart’
},
width: {
type: String,
default: ‘100%’
},
height: {
type: String,
default: ‘350px’
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object
}
},
data () {
return {
chart: null
}
},
mounted () {
this.initChart()
if (this.autoResize) {
this.__resizeHanlder = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
window.addEventListener(‘resize’, this.__resizeHanlder)
}
},
beforeDestroy () {
if (!this.chart) {
return
}
if (this.autoResize) {
window.removeEventListener(‘resize’, this.__resizeHanlder)
}
this.chart.dispose()
this.chart = null
},
watch: {
chartData: {
deep: true,
handler (val) {
this.setOptions(val)
}
}
},
methods: {
setOptions (val) {
this.chart.clear() // 清空画布
this.chart.setOption(val)
},
initChart () {
this.chart = echarts.init(this.$el, ‘macarons’)
this.setOptions(this.chartData)
}
}
}
</script>
使用方法
<template>
<div>
<charts :chartData=”Option”></charts>
</div>
</template>
<script>
import Charts ‘@/components/Charts’
export default {
name: ‘chartDemo’,
components: {
Charts
},
data () {
return {
Option: {}
}
},
mounted () {
this.getList()
},
methods: {
getList () {
this.Option = {
xAxis: {
type: ‘category’,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
},
yAxis: {
type: ‘value’
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: ‘line’
}]
}
}
}
</script>