Echarts - 柱状图(Simple Encode) 样式修改

var option = {
    dataset: {
        source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, 'xxxx一二三四五'],
            [57.1, 78254, 'xxx一二四'],
            [74.4, 41032, 'xxxx一三四'],
            [50.1, 12755, 'xxxx二三四'],
            [89.7, 20145, 'xxx一二'],
            [68.1, 79146, 'xxx一四'],
            [19.6, 91852, 'xxx三四'],
            [10.6, 101852, 'xx二三'],
            [32.7, 20112, 'x四']
        ]
    },
    tooltip: {
        trigger: 'axis',
        // 重写提示框内容样式
        formatter: function (params, ticket, callback) {
            var showHtm=params[0].data[2]+'<br>';
            showHtm+= '断点率: ' + params[0].data[0] + '%<br>'
            showHtm+= '断点次数: ' + params[0].data[1] + '<br>'
            return showHtm;
    }
    },
    grid: {containLabel: true},
    xAxis: {
        show:false,
        axisLine:{
            show:false
        },
        axisTick:{
            show:false
        },
        splitLine:{
            show:false
        }
    },
    yAxis: {
        type: 'category',
        axisLine:{
            show:false
        },
        axisTick:{
            show:false
        },
         splitLine:{
            shwo:false
        },
        axisLabel : 
        {
        // 刻度标签的内容格式器
         formatter : function (value)
         {
             let valueTxt = '';
             if (value.length > 7) {
                 valueTxt = value.substring(0, 7) + '...';
             }
             else {
              valueTxt = value;
            }
            return valueTxt ;
            }
        }
    },
    visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 10,
        max: 100,
        show:false,
        // text: ['High Score', 'Low Score'],
        // Map the score column to color
        dimension: 0,
        inRange: {
            color: ['#bbb', '#000']
        }
    },
    series: [
        {
            type: 'bar',
            label:{
                show:true,
                position:'insideRight',
                formatter:function(params) {
                    return params.value[0]+"%";
                }
            },
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
            }
        }
    ]
};

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值