Vue Echarts 漏斗图（金字塔型）

Vue Echarts 漏斗图（金字塔型）

一般的漏斗图

<template>
  <div class="timeLineview">
    <div  style="height:400px" ref="categoryChart"></div>
  </div>
</template>

<script>
//调用echarts
import echarts from "echarts";
export default {
  components: {},
  name: "timeLine",
  props: {
    question: {}
  },
  data() {
    return {
    };
  },
  methods: {
    find() {
      this.chart = echarts.init(this.$refs.categoryChart);
      const option = {
    title: {
        text: '漏斗图',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['展现','点击','访问','咨询','订单']
    },

    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: [
                {value: 60, name: '访问'},
                {value: 40, name: '咨询'},
                {value: 20, name: '订单'},
                {value: 80, name: '点击'},
                {value: 100, name: '展现'}
            ]
        }
    ]
};

      this.chart.setOption(option);
    }
  },
  mounted() {
    this.find();
  },
  created() {}
};
</script>

<style  lang="less" scoped>
</style>

把漏斗图改为金字塔图

只要在series中添加一句 sort: “ascending”,改变图形方向就可以了

自定义显示颜色

在series中添加itemStyle，存放你要改变的颜色数组（在其他图形中也适用）

<template>
  <div class="timeLineview">
    <div  style="height:400px" ref="categoryChart"></div>
  </div>
</template>

<script>
//调用echarts
import echarts from "echarts";
export default {
  components: {},
  name: "timeLine",
  props: {
    question: {}
  },
  data() {
    return {
    };
  },
  methods: {
    find() {
      this.chart = echarts.init(this.$refs.categoryChart);
      const option = {
    title: {
        text: '漏斗图',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['展现','点击','访问','咨询','订单']
    },

    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
         itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
              normal: {
                color: function(params) {
                  //自定义颜色
                  var colorList = [
                    "#FF4C4C",
                    "#FF6383",
                    "#FF9933",
                    "#FFC635",
                    "#31DC72",
                    "#39E8DE",
                    "#91FFE7",
                    "#91FAB9",
                    "#8572FF",
                    "#4578FF"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: [
                {value: 60, name: '访问'},
                {value: 40, name: '咨询'},
                {value: 20, name: '订单'},
                {value: 80, name: '点击'},
                {value: 100, name: '展现'}
            ]
        }
    ]
};

      this.chart.setOption(option);
    }
  },
  mounted() {
    this.find();
  },
  created() {}
};
</script>

<style  lang="less" scoped>
</style>

修改内部显示数据

在series中添加label，设置你要修改的格式（在其他图形中也适用）

<template>
  <div class="timeLineview">
    <div  style="height:400px" ref="categoryChart"></div>
  </div>
</template>

<script>
//调用echarts
import echarts from "echarts";
export default {
  components: {},
  name: "timeLine",
  props: {
    question: {}
  },
  data() {
    return {
    };
  },
  methods: {
    find() {
      this.chart = echarts.init(this.$refs.categoryChart);
      const option = {
    title: {
        text: '漏斗图',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['展现','点击','访问','咨询','订单']
    },

    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            gap: 2,
              label: {
              normal: {
                position: "inside", // 标签的位置:'left'漏斗图的左侧）、'right'(右侧)、'inside'(内部) [ default: 'outside' ]
                formatter: "{a} -{b} : {c}", //按照需求显示对于的数据格式
                textStyle: {
                  color: "#fff"
                }
              }
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
         itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
              normal: {
                color: function(params) {
                  //自定义颜色
                  var colorList = [
                    "#FF4C4C",
                    "#FF6383",
                    "#FF9933",
                    "#FFC635",
                    "#31DC72",
                    "#39E8DE",
                    "#91FFE7",
                    "#91FAB9",
                    "#8572FF",
                    "#4578FF"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: [
                {value: 60, name: '访问'},
                {value: 40, name: '咨询'},
                {value: 20, name: '订单'},
                {value: 80, name: '点击'},
                {value: 100, name: '展现'}
            ]
        }
    ]
};

      this.chart.setOption(option);
    }
  },
  mounted() {
    this.find();
  },
  created() {}
};
</script>

<style  lang="less" scoped>
</style>