echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙
<template>
<!-- 漏斗图对比 -->
<div class="con_bg">
<div class="funnelChart" ref="funnelChart">
</div>
<!--echarts实例代码-->
<div class="funnelDemo" ref="funnelChartDemo">
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
var chart = "";
var chartDemo = "";
var funnelChart = "";
export default {
name: "",
data() {
return {};
},
mounted() {
this.showfunnelChart();
this.showfunnelChartDemo();
},
methods: {
showfunnelChart() {
if (
funnelChart != null &&
funnelChart != "" &&
funnelChart != undefined
) {
funnelChart.dispose();
}
funnelChart = echarts.init(this.$refs.funnelChart);
let option = {
tooltip: {
trigger: "item",
formatter: "{b} : {c}%",
},
series: [
{
name: "Actual",
type: "funnel",
//left: "10%",
//width: "80%",
//top和bottom结合来拉伸漏斗的高度
top: 0, //漏斗图组件离容器上侧的距离
bottom: 0, //漏斗图组件离容器下侧的距离
//min和max结合来调整漏斗是敞口还是窄扣
min: 10,
max: 100,
minSize: "48", //数据最小值映射的宽度。如果是0就变成了常规的小尖角
maxSize: "148",
label: {
position: "inside",
formatter: "{c}%",
color: "#fff",
},
gap: 4, //设置缝隙大小
//图形样式设置
// itemStyle: {
// opacity: 0.5,
// borderColor: "#fff",//注水掉，相当于去掉白边
// borderWidth: 2,
// },
//高亮的标签和图形样式。
emphasis: {
label: {
fontSize: 20,
// position: "inside",
// formatter: "{b}Actual: {c}%",
},
},
data: [
{
value: 168,
name: "疑似问题",
itemStyle: {
color: "#1FCFDE",
borderColor: "none",
},
},
{
value: 50,
name: "已确认问题",
itemStyle: {
color: "#ED9A13",
borderColor: "none",
},
},
{
value: 10,
name: "已解决问题",
itemStyle: {
color: "#06C90F",
borderColor: "none",
},
},
],
// Ensure outer shape will not be over inner shape when hover.
z: 100,
},
],
};
funnelChart.clear();
funnelChart.setOption(option);
window.addEventListener("resize", () => {
funnelChart.resize();
});
},
showfunnelChartDemo() {
if (
chartDemo != null &&
chartDemo != "" &&
chartDemo != undefined
) {
chartDemo.dispose();
}
chartDemo = echarts.init(this.$refs.funnelChartDemo);
let demoOption = {
title: {
text: "Funnel",
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}%",
},
toolbox: {
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {},
},
},
legend: {
data: ["Show", "Click", "Visit", "Inquiry", "Order"],
},
series: [
{
name: "Expected",
type: "funnel",
left: "10%",
width: "80%",
label: {
formatter: "{b}Expected",
},
labelLine: {
show: false,
},
itemStyle: {
opacity: 0.7,
},
emphasis: {
label: {
position: "inside",
formatter: "{b}Expected: {c}%",
},
},
data: [
{ value: 60, name: "Visit" },
{ value: 40, name: "Inquiry" },
{ value: 20, name: "Order" },
{ value: 80, name: "Click" },
{ value: 100, name: "Show" },
],
},
{
name: "Actual",
type: "funnel",
left: "10%",
width: "80%",
maxSize: "80%",
label: {
position: "inside",
formatter: "{c}%",
color: "#fff",
},
itemStyle: {
opacity: 0.5,
borderColor: "#fff",
borderWidth: 2,
},
emphasis: {
label: {
position: "inside",
formatter: "{b}Actual: {c}%",
},
},
data: [
{ value: 30, name: "Visit" },
{ value: 10, name: "Inquiry" },
{ value: 5, name: "Order" },
{ value: 50, name: "Click" },
{ value: 80, name: "Show" },
],
// Ensure outer shape will not be over inner shape when hover.
z: 100,
},
],
};
chartDemo.clear();
chartDemo.setOption(demoOption);
window.addEventListener("resize", () => {
chartDemo.resize();
});
},
},
};
</script>
<style scoped>
.con_bg {
/* background-color: #010c17; */
background-image: url("/img/bg.png");
width: 490px;
height: 590px;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
}
.funnelChart {
width: 424px;
height: 152px;
background-image: url("/img/ld.png");
margin: 20px auto;
}
.funnelDemo {
width: 424px;
height: 152px;
background-image: url("/img/ld.png");
margin: 20px auto;
}
</style>
