vue 封装echarts
代码部分
- 创建echarts组件 chart.vue
<template>
<div :class="className" :style="{ width }" class="chart" />
</template>
<script>
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: ''
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '235px'
},
// 父组件传递过来的图表数据
chartData: {
type: Object,
required: true
},
loading: {
type: Boolean,
default: false
},
type: {
type: String,
default: ''
}
},
data () {
return {
// Echarts实例
chart: null,
$_resizeHandler: null
}
},
watch: {
/* 如果图表数据是后台获取的,监听父组件中的数据变化,重新触发Echarts */
chartData: {
handler (val) {
this.$nextTick(() => {
if (!this.chart) {
this.initChart()
}
this.setOptions(val)
})
},
immediate: true,
deep: true
},
height: {
handler: function (newVal, oldVal) {
if (newVal) {
if (this.chart) {
this.initChart()
}
}
},
immediate: true
},
loading (val) {
if (val) {
this.initChart()
this.chart.clear()
this.showLoading()
} else {
this.hideLoading()
}
}
},
activated() {
this.$_initResizeEvent()
},
deactivated() {
this.$_destroyResizeEvent()
},
created () {
/* 图表初始化 */
this.$nextTick(() => {
this.initChart()
})
},
mounted () {
this.$_resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 100)
this.$_initResizeEvent()
},
beforeDestroy () {
this.$_destroyResizeEvent()
if (!this.chart) {
return
}
/* 释放图表实例 */
this.chart.dispose()
/* dispose 会释放内部占用的一些资源和事件绑定,但是解除实例的引用我们是做不到的,所以需要重新赋值为null */
this.chart = null
},
methods: {
$_initResizeEvent() {
window.addEventListener('resize', this.$_resizeHandler,false)
},
$_destroyResizeEvent() {
window.removeEventListener('resize', this.$_resizeHandler,false)
},
initChart () {
// this.chart = echarts.init(this.$el, null, {renderer: 'svg'})
this.chart = this.$echarts.init(this.$el)
this.chart.resize()
this.setOptions(this.chartData)
// this.extension(this.chart);
},
setOptions (options) {
this.chart.setOption(options)
},
showLoading () {
this.chart.showLoading({
text: '数据加载中。。。',
color: '#48dfba',
textColor: '#fdfdfd',
maskColor: 'rgba(163,162,180,.1)',
zLevel: 1
})
},
hideLoading () {
this.chart.hideLoading()
}
}
}
</script>
<style lang="scss">
.chart {
width: 100% !important;
height: 100% !important;
> div {
&:first-child {
width: 100% !important;
height: 100% !important;
> canvas {
width: 100% !important;
height: 100% !important;
}
>svg {
width: 100% !important;
height: 100% !important;
}
}
}
}
</style>
- debounce函数封装(防抖) – 在utils文件加下的index.js中
debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function() {
const last = +new Date() - timestamp
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
- 在父组件中引用
<template>
<div>
<chart
:chart-data="chartsData"
class="my-Chart"
></chart>
</div>
</template>
<script>
import chart from '@/components/chart/index'
export default {
data() {
return {
chartsData: {
backgroundColor: '#00265f',
"title": {
"text": "政策补贴额度",
x: "center",
y:"4%",
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '15%',
right: '3%',
left: '5%',
bottom: '12%'
},
xAxis: [{
type: 'category',
data: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他'],
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
},
axisLabel: {
margin: 10,
color: '#e2e9ff',
textStyle: {
fontSize: 14
},
},
}],
yAxis: [{
name: '单位:万元',
axisLabel: {
formatter: '{value}',
color: '#e2e9ff',
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,1)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
}
}],
series: [{
type: 'bar',
data: [5000, 2600, 1300, 1300, 1250, 1500],
barWidth: '20px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,244,255,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(0,77,167,1)' // 100% 处的颜色
}], false),
barBorderRadius: [30, 30, 30, 30],
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4,
}
},
label: {
normal: {
show: true,
lineHeight: 30,
width: 80,
height: 30,
backgroundColor: 'rgba(0,160,221,0.1)',
borderRadius: 200,
position: ['-8', '-60'],
distance: 1,
formatter: [
' {d|●}',
' {a|{c}} \n',
' {b|}'
].join(','),
rich: {
d: {
color: '#3CDDCF',
},
a: {
color: '#fff',
align: 'center',
},
b: {
width: 1,
height: 30,
borderWidth: 1,
borderColor: '#234e6c',
align: 'left'
},
}
}
}
}]
}
}
},
components:{chart},
methods:{
}
}
</script>