vue中echarts常⽤封装模板以柱状图为列
<template>
<div
:class="className"
:
/>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.initChart()
this.__resizeHandler = debounce(() => {
if (this.chart) {
size()
}
}, 100)
window.addEventListener('resize', this.__resizeHandler)
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
},
// 画图
drawChart(xAxisData, seriesData) {
if (!xAxisData.length || !seriesData.length) {
this.chart.clear()
}
if (this.chart) {
this.chart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: xAxisData || [
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun'
],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value',
axisTick: {
setoptionshow: false
}
}
],
// 传⼊数组
series: seriesData || [
{
name: 'pageA',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: [79, 52, 200, 334, 390, 330, 220]            }
]
})
}
},
// 清除画布
clear() {
this.chart && this.chart.clear()
}
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。