Echarts 类似进度条样式 Label 设置在柱状图的顶端外侧

r囧r小猫 2022-11-22 00:17 228阅读 0赞

> 最近项目中写一个大屏演示，里面多数是Echars 图表，因为大多数都需要自己设置一些特性，才能达到效果，因此好好读了Echarts 的文档，尤其是配置项。

## 效果图 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

## 思路 ##

**左图**

其中左侧是看到的一篇文章 [https://blog.csdn.net/qq\_41619796/article/details/88661612][https_blog.csdn.net_qq_41619796_article_details_88661612]，类似进度条的样式，思路是echars 两个部分叠加，但时看了我们项目的效果图不太可以，因为项目效果图整个有效数据和背景部分都是有圆角的，这样两部分的连接处就会有问题。

**右图**

在项目实现完成后，写的demo 样式，和实际项目类似，只是实际项目是横向的，代码效果是官方案例数据，具体思路是，只需要一个坐标系，只是给柱状图设置背景及圆角，关于设置背景图在较高版本已经有现成的API，较低版本也可以实现，代码中就是，设置完成背景，因为背景的值都是最大值满格的，所以核心思路是 **将有效数据的数值 设置为背景柱图的label** 值，这样样式等都比较灵活方便。其中最核心的API是 label 的formatter

## 代码 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>echars 测试</title>
        <style>
            .container {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
    
            }
    
            .echarsBox,
            .echarBox2,
            .echarBox3,
            .echarBox4,
            .echarBox5,
            .echarBox6 {
                width: 500px;
                height: 500px;
                background-color: #eee;
                border: 5px solid #fff;
            }
    
            .fl {
                float: left;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="echarsBox fl" id="echarBox"></div>
            <div class="echarsBox fl" id="echarBox2"></div>
            <div class="echarsBox fl" id="echarBox3"></div>
            <div class="echarsBox fl" id="echarBox4"></div>
            <div class="echarsBox fl" id="echarBox5"></div>
            <div class="echarsBox fl" id="echarBox6"></div>
        </div>
        <script src="./js/echarts.js"></script>
        <script>
            // 示例横向
            var arr = {}
            arr.fhId = 'echarBox' //负荷的id
            arr.fhArr = [{
                    name: '10kv金羊线',
                    value: '10'
                },
                {
                    name: '10kv金海线',
                    value: '20'
                },
                {
                    name: '10kv金东线',
                    value: '30'
                },
                {
                    name: '10kv金澳线',
                    value: '45'
                },
                {
                    name: '10kv金叶线',
                    value: '55'
                },
            ]
            initEchartsFh(arr)
    
            function initEchartsFh(arr) {
                var fhArr = arr.fhArr
                var data1 = [] //可用数据
                var data2 = []
                var data3 = [] //不可用数据
                var data4 = [] //配置项
                for (i in fhArr) {
                    data1.push(fhArr[i].value)
                    data2.push(fhArr[i].name)
                }
                for (m in data1) {
                    data3.push(100 - parseInt(data1[m]))
                }
                var nowNum = 0
                for (n in data1) {
                    var nowA = {}
                    nowA.value = data1[n] + '%'
                    nowA.xAxis = nowNum
                    nowA.yAxis = 110
                    data4.push(nowA)
                    nowNum++
                }
                var myChart = echarts.init(document.getElementById(arr.fhId))
                var option = {
                    textStyle: {
                        // fontSize: arr.initHeight,
                        color: '#fff', //字体颜色
                    },
                    tooltip: {
                        trigger: 'axis',
                        textStyle: {
                            //   fontSize: arr.initHeight,
                            color: '#fff', //字体颜色
                        },
                        formatter: function (params) {
                            return params[0].name + ': ' + params[0].value + '%'
                        },
                    },
    
                    grid: {
                        x: 90,
                        y: 120,
                        x2: 60,
                        y2: 120,
                    }, //直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
                    xAxis: {
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                // fontSize: arr.initHeight,
                            },
                        },
                        data: data2,
                        axisTick: {
                            //x轴刻度线
                            show: false,
                        },
                        splitLine: {
                            //网格线
                            show: false,
                        },
                        axisLine: {
                            //坐标轴线
                            show: false,
                        },
                    },
                    yAxis: {
                        show: false,
                        max: 110,
                        min: 0,
                    },
                    series: [{
                            name: '可用',
                            type: 'bar',
                            stack: '使用情况',
                            data: data1,
                            barWidth: 30, //柱图宽度
                            itemStyle: {
                                color: function (params) {
                                    var colorList = [
                                        '#C33531',
                                        '#EFE42A',
                                        '#64BD3D',
                                        '#EE9201',
                                        '#29AAE3',
                                        '#B74AE5',
                                        '#0AAF9F',
                                        '#E89589',
                                        '#16A085',
                                        '#4A235A',
                                        '#C39BD3 ',
                                        '#F9E79F',
                                        '#BA4A00',
                                        '#ECF0F1',
                                        '#616A6B',
                                        '#EAF2F8',
                                        '#4A235A',
                                        '#3498DB',
                                    ]
                                    return colorList[params.dataIndex]
                                },
                                barBorderRadius: [0, 0, 50, 50], // 统一设置四个角的圆角大小
                            },
                            markPoint: {
                                symbol: 'pin', //标记类型
                                symbolSize: 1, //图形大小
                                itemStyle: {
                                    normal: {
                                        borderColor: '#fff',
                                        borderWidth: 1, // 标注边线线宽，单位px，默认为1
                                        label: {
                                            show: true,
                                            //   fontSize: arr.initHeight,
                                        },
                                    },
                                },
                                data: data4, //配置项
                            },
                        },
                        {
                            name: '不可用',
                            type: 'bar',
                            stack: '使用情况',
                            data: data3,
                            itemStyle: {
                                color: 'rgba(255,255,255,.2)',
                                barBorderRadius: [50, 50, 0, 0], // 统一设置四个角的圆角大小
                            },
                        },
                    ],
                }
                myChart.setOption(option)
                chart3 = myChart
                // myChart.on('click', function (params) {
                //   //		//电站负荷闪动
                //   powerLoad('946be6fc249e40a8a63e97e98b1c576d')
                //   alert('负荷点击事件')
                //   console.log(params)
                //   console.log(params.name + ':' + params.value + '%')
                // })
            }
    
            // 另一种方式实现椭圆柱状图，并且label 设置在柱状图的顶端
            var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动'];
            var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122];
            var yMax = 500;
            var dataShadow = [];
    
            // 将实际值显示在阴影柱的label 位置 需要对label 进行处理
            for (var i = 0; i < data.length; i++) {
                dataShadow.push({
                    value: yMax,
                    name: data[i]
                });
            }
    
            option = {
                title: {
                    text: '圆角柱状图 label 顶端外侧',
                    // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
                },
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: '#999'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                dataZoom: [{
                    type: 'inside'
                }],
                series: [{ // For shadow
                        type: 'bar',
                        itemStyle: {
                            color: 'rgba(0,0,0,0.05)',
                            barBorderRadius: 10
                        },
                        barGap: '-100%', // 设置背景的关键代码
                        barCategoryGap: '40%',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#fff',
                            //label 的formatter 只能使用值 {name} 或者函数自定义值
                            formatter: function (params) {
                                return params.name
                            }
                        },
                        data: dataShadow,
                        animation: false
                    },
                    {
                        type: 'bar',
                        barCategoryGap: '50%',
                        itemStyle: {
                            barBorderRadius: 10,
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#83bff6'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#188df0'
                                    },
                                    {
                                        offset: 1,
                                        color: '#188df0'
                                    }
                                ]
                            )
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [{
                                            offset: 0,
                                            color: '#2378f7'
                                        },
                                        {
                                            offset: 0.7,
                                            color: '#2378f7'
                                        },
                                        {
                                            offset: 1,
                                            color: '#83bff6'
                                        }
                                    ]
                                )
                            }
                        },
                        data: data
                    }
                ]
            };
    
            let myChart2 = echarts.init(document.getElementById('echarBox2'))
            myChart2.setOption(option)
            // // Enable data zoom when user click bar.
            // var zoomSize = 6;
            // myChart.on('click', function (params) {
            //     console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
            //     myChart.dispatchAction({
            //         type: 'dataZoom',
            //         startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            //         endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
            //     });
            // });
        </script>
    </body>
    
    </html>

实际项目实现的横向效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

在看了echarts 的一些API 和 配置项之后 发现，他原来可以自定义那么多样式，开心于新发现和新收获。

> 除非付诸行动，否则空口无凭

![20201103113356236.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221120/b8db14c817d64abf99123b27181e7343.png
[https_blog.csdn.net_qq_41619796_article_details_88661612]: https://blog.csdn.net/qq_41619796/article/details/88661612
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201103113054738.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70
[20201103113356236.jpg]: https://img-blog.csdnimg.cn/20201103113356236.jpg