Echars 金字塔

自定义显示金字塔(漏斗)图,由于金字塔图的数据差异 导致 显示的金字塔会有变异:

所以为了图好看 就更改显示。

var option = {
            /*tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },*/
            legend: {
                orient: 'vertical',
                x: 'left',
                formatter: function (name) {
                    return  name.toString().split("(")[0];//自定义图例
                }
               //data: ['展现','点击','访问','咨询','订单']
            },
            color:['#25a0fd','#2bcd23', '#fba101','#29d9e9']
            ,
            series: [
                {
                    name:'河长',
                    type:'funnel',
                    top: 0,
                    height: '70%',
                    maxSize: '70%',
                    sort: 'ascending',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            opacity: 0.7
                        }
                    },
                      data: [
                {value: 60, name: '访问(600)'},
                {value: 40, name: '咨询(400)'},
                {value: 20, name: '订单(200)'},
                {value: 80, name: '点击(800)'},
                {value: 100, name: '展现(1000)'}
            ]
                }
            ]
        };
            //console.log(JSON.stringify(option));
            var piechart = document.getElementById('xchhLL');
            var myChart = echarts.init(piechart);
            myChart.setOption(option);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值