echarts柱状图带背景色和鼠标滚轮动态移动x轴

最新推荐文章于 2024-06-05 17:44:51 发布

欢欢小乖

最新推荐文章于 2024-06-05 17:44:51 发布

阅读量912

点赞数 1

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/HuanHuan_Alne/article/details/116200384

版权

echarts 专栏收录该内容

5 篇文章

订阅专栏

该博客展示了一个使用 ECharts 创建的条形图，包含分类轴和渐变色效果。条形图数据包括不同类型的救助次数，如低保救助、重灾救助等。通过代码示例，详细展示了如何设置图表背景、轴标签、数据区域缩放以及条形图颜色渐变等视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果要求如下：
在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.js"></script>
    <style>
        #main {
            width: 700px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="main"></div>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var dataList = [1850, 1200, 1500, 1600, 1900, 1300, 1250, 1500, 1600, 1900];
        var max =  Math.max.apply(null,dataList) + 200;
        var min = Math.min.apply(null,dataList) - 400;
        var dataListCopy = Array.from({length:dataList.length}).map(item=>{
            return max;
        })
        var xCategory = ['低保救助', '重灾救助', '临时救助', '医疗救助', '住房救助', '教育救助', '就业救助', '特困救助',  '社会里救助', '一站式救助'];
        var endValue = dataList.length>10 ? 22 : 100;
        var option = {
            backgroundColor: '#111c22',
                    xAxis: {
                    type: 'category',
                    data: xCategory,
                    axisTick: {show: false},
                    axisLabel: {
                            show: true,
                            interval: 0,
                            color: 'rgba(255,255,255,0.7)',
                            formatter: function(value, index){
                                var arr = value.split("");
                                var str = '';
                                for (let index = 0; index < arr.length; index++) {
                                    str += arr[index];
                                    if(arr.length == 4 && str.length == 2) {
                                        str += '\n';
                                    } else if(arr.length == 5 && str.length == 3) {
                                        str += '\n';
                                    }
                                }
                                return str; 
                            }
                },  
                axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#282e32'
                        }
                        },
                },
                yAxis: {
                name: '单位：次',
                nameTextStyle: {
                 align: "right",
                 padding: [0, -10, 0, 0]
                },
                nameGap: 30,
                max: max,
                interval: Math.ceil(max / 6),
                min: min,
                splitLine: {
                                show: true,
                                lineStyle: {
                                    type: "dashed",
                                    color: '#4f606a'
                                }
                            },
                axisLabel: {
                        show: true,
                        color: 'rgba(255,255,255,0.7)'
                    },
                },
                dataZoom: {
                    start: 0,
                    end: endValue,
                    type: "inside",
                    zoomOnMouseWheel: false,
                    moveOnMouseMove: false,
                    zoomLock: false,
                    moveOnMouseWheel: true
                },
                series: [{
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "rgba(50, 80, 90, 0.5)" 
                                },{
                                    offset: 1,
                                    color: "rgba(19, 35, 50, 0.2)" 
                                }], false)
                        }
                    },
                    silent: true,
                    barWidth: 35,
                    barGap: '-73%',
                    data: dataListCopy
                }, {
                    type: 'bar',
                    barWidth: 15,
                    z: 10,
                    itemStyle: {
                                color: function(param){
                                    if(param.dataIndex%2 == 0) {
                                        return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: "rgba(6, 204, 255, 1)" 
                                            },{
                                                offset: 1,
                                                color: "rgba(191, 238, 254, 1)" 
                                            }], false)
                                    } else {
                                        return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: "rgba(254, 203, 78, 1)" 
                                            },{
                                                offset: 1,
                                                color: "rgba(255, 252, 236, 1)" 
                                            }], false)
                                    }
                                } 
                    },
                    data: dataList
                    // data: [45, 60, 13, 25,45, 60, 13, 25,45, 60, 13, 25,45, 60, 13, 25,45, 60, 13, 25,45, 60, 13, 25,45, 60, 13, 25,45, 60, 13, 25,45, 60, 13, 25,45, 60, 13, 25,45, 60, 13, 25, 45, 60, 13, 25]
                }]
            };
        option && myChart.setOption(option);
    </script>
</body>
</html>