仅以此记录下个人使用echart的方法，毕竟好记性不如烂笔头。参考资料手摸手，带你用vue撸后台 系列三(实战篇)安装echartsnpm install echarts –saveecharts package版本"echarts": “^4.2.0-rc.2"utilsexport 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>