<template>
<div class="bar" ref="chart" ></div>
</template>
<script>
export default {
data() {
return {
myEcharts: null,
}
},
props: {
options: Object
},
watch: {
options: {
handler(opts) {
this.setData(opts)
},
deep: true
}
},
mounted() {
this.init()
},
methods: {
init() {
this.$nextTick(() => {
this.myEcharts = this.$echarts.init(this.$refs.chart)
this.setData()
})
},
setData(opts) {
const option = opts || this.options
this.myEcharts.setOption({
tooltip: {
trigger: ‘axis‘,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
}
},
legend: {
data: option.legend.data
},
grid: {
left: ‘3%‘,
right: ‘4%‘,
bottom: ‘3%‘,
containLabel: true
},
xAxis: {
type: ‘value‘,
name: ‘线索量‘,
nameTextStyle: {
fontWeight: ‘bold‘,
padding: [0, 0, 0, -10]
}
},
yAxis: {
name: option.yAxis.name,
nameTextStyle: {
fontWeight: ‘bold‘
},
type: ‘category‘,
data: option.yAxis.data
},
series: option.series,
barMaxWidth: option.yAxis.data.length < 4 ? ‘20%‘ : ‘‘,
})
}
}
}
</script>
<style lang="less" scoped>
.bar{
width: 100%;
height: 400px;
}
</style>
