分享一个echarts直条状效果图

最新推荐文章于 2024-05-16 22:15:49 发布

_let

最新推荐文章于 2024-05-16 22:15:49 发布

阅读量2.1k

点赞数 1

分类专栏： echarts 文章标签： echarts3-0

本文链接：https://blog.csdn.net/qq_39759115/article/details/78540310

版权

echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简单需求：一个固定长度的直条，里面分为五部分，每部分按百分比显示不同颜色~
效果图~
这里写图片描述

配置~

    var myChart = echarts.init(document.getElementById(id));

    var option = {
        color: ['#727272', '#5682CB', '#C790B8', '#FACD8A', '#8CCCCB'],
        legend: {
            bottom: "15%",
            right: "2%",
            itemWidth: 8,
            itemHeight:8,
            data: [
                {
                    name:'0-10dBm',
                    icon : 'circle' // 可爱的小点点~
                },
                {
                    name:'11-15dBm',
                    icon : 'circle'
                },
                {
                    name:'16-20dBm',
                    icon : 'circle'
                },
                {
                    name:'21-25dBm',
                    icon : 'circle'
                }
                ,
                {
                    name:'26-30dBm',
                    icon : 'circle'
                }
            ],
            formatter:function(name){ // 格式处理
                var datas = option.series;
                for(var i = 0; i< datas.length ; i++){
                    if(name == datas[i].name){
                        return name +' '+(datas[i].data[0])+ '%';
                    }
                }
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: " {a} : <br/>  {c}%"

        },
        grid: {
            left: '0%',
            right: '2%',
            top: '40%',
            bottom: '30%',
            width: "98%",
            containLabel: true
        },
        xAxis:  {
            type: 'value',
            max: 100, // 总长为100% 
            show:false
        },
        yAxis: {
            type: 'category',
            data: [' '],
            show:false
        },
        series: [ // 
            {
                name: '0-10dBm',
                type: 'bar',
                stack: '总量',
                data: [30] // 计算得到此部分相应百分比 
            },
            {
                name: '11-15dBm',
                type: 'bar',
                stack: '总量',
                data: [12]  // 计算得到此部分相应百分比 
            },
            {
                name: '16-20dBm',
                type: 'bar',
                stack: '总量',
                data: [22] // 计算得到此部分相应百分比 
            },
            {
                name: '21-25dBm',
                type: 'bar',
                stack: '总量',
                data: [15] // 计算得到此部分相应百分比 
            },
            {
                name: '26-30dBm',
                type: 'bar',
                stack: '总量',
                data: [21] // 计算得到此部分相应百分比 
            }
        ]
    };


    myChart.setOption(option);
    window.addEventListener("resize", function () {//每个图 自适应
        myChart.resize();
    });