Echarts漏斗图 金字塔图 样式修改
效果图
<template>
<div id="main" style="height: 400px;" ref="myChart"></div>
</template>
<script>
export default {
data() {
return {}
},
methods:{
loadOption11Echart() {
this.myCharts = echarts.init(this.$refs.myChart);
this.option11 = {
tooltip: {
trigger: 'item',
formatter:function(params){
return `${params.marker}\n${params.data.name}:${params.data.num}家`
}
},
legend: {
data: ['上市企业','专精特新企业','高新技术企业','注册企业总数'],
orient: 'vertical',
left: 'left',
top:'center',
},
series: [
{
name:'',
type:'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'ascending',
label: {
// 图形右侧数据
formatter:function(params){
if(params.data.name == '注册企业总数') {
return `{a|${params.data.num}家}`
}else {
return `{b|${params.data.num}家}\n{c|占比${params.data.ratio}}`
}
},
rich:{
a: {
color: '#000',
lineHeight: 10,
fontweight:"bold",
fontSize:16
},
b: {
color: '#000',
lineHeight: 30,
fontweight:"bold",
fontSize:16
},
c: {
color: '#b1b3b8',
lineHeight: 20,
fontSize:12,
padding:[10,0]
}
},
},
labelLine: {
show: false
},
itemStyle: {
borderColor: "#fff",
borderWidth: 1,
},
emphasis: {
label: {
label: {
position: 'inside',
// formatter: '{b}Expected: {c}%'
}
}
},
data:this.echartsOjb
},
{
name: '',
type: 'funnel',
left: '10%',
width: '80%',
maxSize: '80%',
sort: 'ascending',
label: {
position: 'inside',
show: true,
color: '#fff'
},
itemStyle: {
opacity: 1,
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
label: {
fontSize: 16
}
},
data:this.echartsOjb,
z: 100
}
]
};
this.myCharts.setOption(this.option11);
}
}
}
</script>