1. vue按需引入漏斗图
/**
* echarts版本 4.9.0
* main.js
*/
const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/funnel') // 漏斗
require('echarts/lib/component/title') // 图表标题
require('echarts/lib/component/dataZoom') // dataZoom组件
Vue.prototype.$echarts = echarts
2. 组件中使用
<template>
<div class="funner-echart-container">
<div ref="funnerEchart"></div>
</div>
</template>
<script>
export default {
name: 'FunnelEchart',
data() {
return {
color: ['#9cbbfb', '#7da5fc', '#5b90fa', '#4077ec', '#2b67db'],
echartData: [
{ value: 100, name: 'Show' },
{ value: 80, name: 'Click' },
{ value: 60, name: 'Visit' },
{ value: 40, name: 'Inquiry' },
{ value: 20, name: 'Order', labelLine: { show: false }}
]
}
},
methods: {
initOption() {
return {
color: this.color,
series: [
// 外部
{
...this.handleSameOption(),
silent: true, // 不处理鼠标事件
label: {
position: 'rightBottom',
color: '#000',
lineHeight: 16,
formatter: (params) => {
return params.dataIndex === this.echartData.length - 1
''
: `{name|开户率} ${params.data.value}\n{name|提升率} 1`
},
rich: { // 自定义富文本样式
name: {
color: 'skyblue'
}
}
},
labelLine: { // 标签视觉引导线样式
length: 50,
lineStyle: {
color: '#eaeaea'
}
}
},
// 内部
{
...this.handleSameOption(),
label: {
position: 'inside'
}
}
]
}
},
// 处理相同配置
handleSameOption() {
return {
name: 'FunnelEcharts',
type: 'funnel',
top: '5%',
left: '-10%',
width: '90%',
height: '90%',
minSize: '20%', // 如果需要最小值的图形并不是尖端三角，可通过设置该属性实现
maxSize: '60%',
itemStyle: {
borderWidth: 0 // 描边线宽
},
data: this.echartData
}
}
},
mounted() {
const myChart = this.$echarts.init(this.$refs.funnerEchart)
myChart.setOption(this.initOption())
window.onresize = function() {
myChart.resize()
}
}
}
</script>
<style scoped lang="less">
.funner-echart-container {
> div {
height: 280px;
}
}
</style>
3. 最终效果图
