<Chart
:id="'chart'"
key="id"
:style="{ width: '100%', height: '280px' }"
:option="LineChartOption"
/>
//表单配置项
LineChartOption: {
color: COLORLIST,
title: {
text: '分类占比分析',
left: 'center'
},
dataset: {
source: []
},
tooltip: {},
grid: {
left: '3%',
right: '5%',
bottom: '3%',
containLabel: true
},
// legend: {
// // icon: 'circle',
// orient: 'vertical',
// left: '5px',
// top: '30px'
// },
series: [
{
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '55%'],
avoidLabelOverlap: true,
emphasis: {},
label: { formatter: '{@2012} ({d}%)', alignTo: 'labelLine' },
labelLine: {
show: true,
position: 'inner'
}
}
]
},
//组件化
<template>
<div
:id="id"
class="echartsLine"
:style="style"
/>
</template>
<script>
export default {
props: {
id: {
type: String,
default: ''
},
width: {
type: String,
default: 'false'
},
height: {
type: String,
default: 'false'
},
option: {
type: Object,
default: () => ({})
}
},
data () {
return {
MyEcharts: '' // echarts实例
}
},
computed: {
style () {
return {
height: this.height,
width: this.width
}
}
},
watch: {
// 监听数据
option: {
handler (newVal, oldVal) {
if (this.MyEcharts) {
if (newVal) {
this.MyEcharts.setOption(newVal, true)
} else {
this.MyEcharts.setOption(oldVal, true)
}
} else {
this.InitCharts()
}
},
deep: true
}
},
mounted () {
this.InitCharts()
},
methods: {
InitCharts () {
this.MyEcharts = this.$echarts.init(document.getElementById(this.id))
this.MyEcharts.clear() // 适用于大数据量的切换时图表绘制错误,先清空在重绘
this.MyEcharts.setOption(this.option, true) // 设置为true可以是图表切换数据时重新渲染
this.MyEcharts .off('click')
this.MyEcharts .on('click', function(params) {
// var a = params.dataIndex
console.log(params, '我被点击了')
})
// 窗口变化
const that = this
window.addEventListener('resize', function () {
that.MyEcharts.resize()
})
}
}
}
</script>
<style lang="scss" scoped>
.echartsLine {
// margin-top: 15px;
}
</style>
封装Echarts组件
于 2022-05-20 14:32:29 首次发布