【可视化大屏开发】7.可视化大屏配置之静态图条形图定制

条形图引入HTML页面

一、需求

设计稿

1. 将设计稿中右上角的条形图引入html

二、代码实现

到Echarts官网上找到相似案例

Examples - Apache ECharts

删除部分样例代码后

在index.js文件中增加新的立即执行函数

  
// 条形图【柱状图2】  
(function (){  
    // 1. 实例化对象  
    // 2. 指定配置和数据  
          
// 3. 把配置给实例对象  
    })();

在index.html文件中，将第三列的class="panel bar"修改为class=“panel bar2”

<selection class="mainbox">  
    <div class="column">  
        <div class="panel bar">  
            <h2>柱形图-职位需求-关键词搜索</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>        <div class="panel line">  
            <h2>折线图-就业行业</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>        <div class="panel pie">  
            <h2>饼图-就业行业</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>    </div>    <div class="column">  
        <!--        数字模块-->  
        <div class="no">  
            <div class="no-hd">  
                <ul>                    <li>1693798</li>  
                    <li>1329646</li>  
                </ul>            </div>            <div class="no-bd">  
                <ul>                    <li>累计职位数</li>  
                    <li>当前有效职位数</li>  
                </ul>            </div>        </div>        <div class="map">  
            <div class="map1"></div>  
            <div class="map2"></div>  
            <div class="map3"></div>  
            <div class="echart">地图模块</div>  
        </div>    </div>    <div class="column">  
        <div class="panel bar2">  
            <h2>柱形图-就业行情</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>        <div class="panel line">  
            <h2>折线图-就业行业</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>        <div class="panel pie">  
            <h2>饼图-就业行业</h2>  
            <div class="chart"></div>  
            <div class="panel-footer"></div>  
        </div>    </div></selection>

第二步：参照官网上配置项到index.js的条形图中修改代码

// 条形图【柱状图2】  
(function (){  
    // 1. 实例化对象  
    var myChart = echarts.init(document.querySelector(".bar2 .chart"));  
  
    // 2. 指定配置和数据  
    var option = {  
  
        grid: {  
            left: '3%',  
            right: '4%',  
            bottom: '3%',  
            containLabel: true  
        },  
        xAxis: {  
            type: 'value',  
            boundaryGap: [0, 0.01]  
        },  
        yAxis: {  
            type: 'category',  
            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']  
        },  
        series: [  
            {  
                name: '2011',  
                type: 'bar',  
                data: [18203, 23489, 29034, 104970, 131744, 630230]  
            },  
            {  
                name: '2012',  
                type: 'bar',  
                data: [19325, 23438, 31000, 121594, 134141, 681807]  
            }  
        ]  
    };  
  
    // 3. 把配置给实例对象  
    myChart.setOption(option);  
})();

条形图定制1

一、需求

将条形图改好看

1. 修改图形大小 grid
2. 不显示x轴
3. y轴相关定制

二、代码实现

需求1： 修改图形大小 grid
在index.js文件中，柱状图2的立即执行函数中的–》option–》grid，修改为：

// 2. 指定配置和数据  
var option = {  
  
    grid: {  
        top: '10%',  
        left: '22%',  
        bottom: '10%',  
    },

需求2： 不显示x轴

// 2. 指定配置和数据  
var option = {  
  
    grid: {  
        top: '10%',  
        left: '22%',  
        bottom: '10%',  
    },  
    xAxis: {  
        show: false,  
    },

需求3： y轴相关定制

• 不显示y轴线和相关刻度
• y轴文字的颜色设置为白色

xAxis: {  
    show: false,  
},  
yAxis: {  
    type: 'category',  
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],  
    // 不显示y轴的线  
    axisLine: {  
        show: false  
    },  
    // 不显示刻度  
    axisTick: {  
        show: false  
    },  
    // 把刻度标签里面的文字颜色设置为白色  
    axisLabel: {  
        color: "#fff"  
    },  
},

条形图定制2

一、需求

1. 柱形图太靠右，需要将柱形图往左拉
2. 修改柱子之间的间距为50
3. 修改柱子的宽度 为10

二、代码实现

需求1：柱形图太靠右，需要将柱形图往左拉

index.js中条形图中，grid 将containLabel: true 注释掉或者删除掉。

修改第一组柱子相关样式（条状）

在 series 里将第一个name 改为“条”，同时增加圆角

series: [  
    {  
        name: '条',  
        type: 'bar',  
        data: [18203, 23489, 29034, 104970, 131744, 630230],  
        // 修改第一组柱子的圆角  
        itemStyle: {  
            barBorderRadius: 20  
        }  
    },  
    {  
        name: '2012',  
        type: 'bar',  
        data: [19325, 23438, 31000, 121594, 134141, 681807]  
    }  
]

需求2：修改柱子之间的间距为50
需求3：修改柱子的宽度 为10

series: [  
    {  
        name: '条',  
        type: 'bar',  
        data: [18203, 23489, 29034, 104970, 131744, 630230],  
        // 修改第一组柱子的圆角  
        itemStyle: {  
            barBorderRadius: 20,  
        },  
        // 柱子之间的距离  
        barCategoryGap: 50,  
        // 显示柱子内的文字  
        barWidth: 10,  
    },  
    {  
        name: '2012',  
        type: 'bar',  
        data: [19325, 23438, 31000, 121594, 134141, 681807],  
    }  
]

效果验证

条形图定制3-百分比计算

一、需求

实现设计稿中的进度条

二、代码实现

需求1：设置第一组柱子内百分比显示数据

在echarts官网找到文档手册
Documentation - Apache ECharts

index.js

series: [  
    {  
        name: '条',  
        type: 'bar',  
        data: [18203, 23489, 29034, 104970, 131744, 630230],  
        // 修改第一组柱子的圆角  
        itemStyle: {  
            barBorderRadius: 20,  
        },  
        // 柱子之间的距离  
        barCategoryGap: 50,  
        // 显示柱子内的文字  
        barWidth: 10,  
        // 显示柱子内的文字  
        label: {  
            show: true,  
            position: "inside",  
        // {c} 会自动的解析为 数据 data里面的数据  
            formatter: "{c}%"  
        }  
    },  
    {  
        name: '2012',  
        type: 'bar',  
        data: [19325, 23438, 31000, 121594, 134141, 681807],  
    }  
]

效果

条形图定制4-修改颜色

一、需求

设置第一组柱子不同颜色

二、代码实现

RGB颜色值与十六进制颜色码转换工具 (sioe.cn)

先尝试修改柱子的颜色：

index.js

series: [  
    {  
        name: '条',  
        type: 'bar',  
        data: [18203, 23489, 29034, 104970, 131744, 630230],  
        // 修改第一组柱子的圆角  
        itemStyle: {  
            barBorderRadius: 20,  
            color: "pink",  
        },  
        // 柱子之间的距离  
        barCategoryGap: 50,  
        // 显示柱子内的文字  
        barWidth: 10,  
        // 显示柱子内的文字  
        label: {  
            show: true,  
            position: "inside",  
        // {c} 会自动的解析为 数据 data里面的数据  
            formatter: "{c}%"  
        }  
    },  
    {  
        name: '2012',  
        type: 'bar',  
        data: [19325, 23438, 31000, 121594, 134141, 681807],  
    }  
]

代码解释

// 条形图【柱状图2】  
(function (){  
    // 1. 实例化对象  
    var myChart = echarts.init(document.querySelector(".bar2 .chart"));  
    // 定义颜色  
    var myColor = ["#FF0000", "#FF6347", "#FA8072", "#FF4500", "#FF8C00", "#F4A460"];  
  
    // 2. 指定配置和数据  
    var option = {  
  
        grid: {  
            top: '10%',  
            left: '22%',  
            bottom: '10%',  
        },  
        xAxis: {  
            show: false,  
        },  
        yAxis: {  
            type: 'category',  
            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],  
            // 不显示y轴的线  
            axisLine: {  
                show: false  
            },  
            // 不显示刻度  
            axisTick: {  
                show: false  
            },  
            // 把刻度标签里面的文字颜色设置为白色  
            axisLabel: {  
                color: "#fff"  
            },  
        },  
        series: [  
            {  
                name: '条',  
                type: 'bar',  
                data: [18203, 23489, 29034, 104970, 131744, 630230],  
                // 修改第一组柱子的圆角  
                itemStyle: {  
                    barBorderRadius: 20,  
                    color: function (params) {  
                        console.log(params);  
                        return myColor[params.dataIndex];  
                    },  
                },  
                // 柱子之间的距离  
                barCategoryGap: 50,  
                // 显示柱子内的文字  
                barWidth: 10,  
                // 显示柱子内的文字  
                label: {  
                    show: true,  
                    position: "inside",  
                // {c} 会自动的解析为 数据 data里面的数据  
                    formatter: "{c}%"  
                }  
            },  
            {  
                name: '2012',  
                type: 'bar',  
                data: [19325, 23438, 31000, 121594, 134141, 681807],  
            }  
        ]  
    };  
  
    // 3. 把配置给实例对象  
    myChart.setOption(option);  
})();

效果验证

条形图定制5-第二组定制

一、需求

1. 修改第二组柱子的相关配置（框状）
2. 给y轴添加第二组数据

二、代码实现

需求1： 修改第二组柱子的相关配置（框状）
找到第二组数据修改：
index.js

series: [  
    {  
        name: '条',  
        type: 'bar',  
        data: [18203, 23489, 29034, 104970, 131744, 630230],  
        // 修改第一组柱子的圆角  
        itemStyle: {  
            barBorderRadius: 20,  
            color: function (params) {  
                console.log(params);  
                return myColor[params.dataIndex];  
            },  
        },  
        // 柱子之间的距离  
        barCategoryGap: 50,  
        // 显示柱子内的文字  
        barWidth: 10,  
        // 显示柱子内的文字  
        label: {  
            show: true,  
            position: "inside",  
        // {c} 会自动的解析为 数据 data里面的数据  
            formatter: "{c}%"  
        }  
    },  
    {  
        name: '框',  
        type: 'bar',  
        barCategoryGap: 50,  
        BarWidth: 15,  
        data: [19325, 23438, 31000, 121594, 134141, 681807],  
        itemStyle: {  
            color: "none",  
            borderColor: "#00c1de",  
            borderWidth: 3,  
            barBorderRadius: 15  
        },  
    }  
]

需求2：给y轴添加第二组数据

index.js

yAxis: [{  
    type: 'category',  
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],  
    // 不显示y轴的线  
    axisLine: {  
        show: false  
    },  
    // 不显示刻度  
    axisTick: {  
        show: false  
    },  
    // 把刻度标签里面的文字颜色设置为白色  
    axisLabel: {  
        color: "#fff"  
    },  
},{  
    show: true,  
    data: [19325, 23438, 31000, 121594, 134141, 681807],  
    // 不显示y轴的线  
    axisLine: {  
        show: false  
    },  
    // 不显示刻度  
    axisTick: {  
        show: false  
    },  
    // 把刻度标签里面的文字颜色设置为白色  
    axisLabel: {  
        textStyle: {  
            color: "#fff",  
            fontSize: 12,  
        }  
    },  
}  
],

条形图定制6-两组柱子重叠及更换数据

一、需求

需求1： 设置两组柱子层叠以及更换数据

二、代码实现

Documentation - Apache ECharts

![[Pasted image 20230219010743.png]]

（1）给series 第一个对象里面的 添加
（2）series 第二个对象里面的 添加
（3）更换series 第一个对象里面的data
（4）更换series 第二个对象里面的data
（5）y轴更换第一个对象更换data数据
（6）y轴更换第二个对象更换data数据

第一组数据：
data: [18203, 23489, 29034, 104970, 131744, 630230],

第二组数据：
data: [19325, 23438, 31000, 121594, 134141, 681807],

数据更换逻辑：

1. 第二组数据全部更换为100
2. 第一组数据更换为第一组数据占第二组数据的占比保留两位有效数据

第一组数据更换为：
data: [94.19, 100.21, 93.65, 86.33, 98.21, 92.44],
第二组数据更换为：
data: [100, 100, 100, 100, 100, 100],

yAxis第二组数据更换为：
data: [19325, 23438, 31000, 121594, 134141, 681807],

完整条形图js代码

// 条形图【柱状图2】  
(function (){  
    // 1. 实例化对象  
    var myChart = echarts.init(document.querySelector(".bar2 .chart"));  
    // 定义颜色  
    var myColor = ["#FF0000", "#FF6347", "#FA8072", "#FF4500", "#FF8C00", "#F4A460"];  
  
    // 2. 指定配置和数据  
    var option = {  
  
        grid: {  
            top: '10%',  
            left: '22%',  
            bottom: '10%',  
        },  
        xAxis: {  
            show: false,  
        },  
        yAxis: [{  
            type: 'category',  
            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],  
            // 不显示y轴的线  
            axisLine: {  
                show: false  
            },  
            // 不显示刻度  
            axisTick: {  
                show: false  
            },  
            // 把刻度标签里面的文字颜色设置为白色  
            axisLabel: {  
                color: "#fff"  
            },  
        },{  
            show: true,  
            data: [19325, 23438, 31000, 121594, 134141, 681807],  
            // 不显示y轴的线  
            axisLine: {  
                show: false  
            },  
            // 不显示刻度  
            axisTick: {  
                show: false  
            },  
            // 把刻度标签里面的文字颜色设置为白色  
            axisLabel: {  
                textStyle: {  
                    color: "#fff",  
                    fontSize: 12,  
                }  
            },  
        }  
        ],  
        series: [  
            {  
                name: '框',  
                type: 'bar',  
                barCategoryGap: 50,  
                BarWidth: 15,  
                data: [100, 100, 100, 100, 100, 100],  
                // 给series 第二个对象里面的 添加  
                yAxisIndex: 1,  
                itemStyle: {  
                    color: "none",  
                    borderColor: "#00c1de",  
                    borderWidth: 18,  
                    barBorderRadius: 15  
                },  
            }  
            ,  
            {  
                name: '条',  
                type: 'bar',  
                data: [94.19, 100.21, 93.65, 86.33, 98.21, 92.44],  
                // 给series 第一个对象里面的 添加  
                yAxisIndex: 0,  
                // 修改第一组柱子的圆角  
                itemStyle: {  
                    barBorderRadius: 20,  
                    color: function (params) {  
                        console.log(params);  
                        return myColor[params.dataIndex];  
                    },  
                },  
                // 柱子之间的距离  
                barCategoryGap: 50,  
                // 显示柱子内的文字  
                barWidth: 10,  
                // 显示柱子内的文字  
                label: {  
                    show: true,  
                    position: "inside",  
                // {c} 会自动的解析为 数据 data里面的数据  
                    formatter: "{c}%"  
                }  
            },  
  
        ]  
    };  
  
    // 3. 把配置给实例对象  
    myChart.setOption(option);  
})();

效果

另一种效果:

代码如下

series: [  
    {  
        name: '条',  
        type: 'bar',   
        data: [94.19, 100.21, 93.65, 86.33, 98.21, 92.44],  
        itemStyle: {  
            // 修改条的矩形圆角  
            barBorderRadius: 20,  
            // color: "#c06820",  
            color: function (params) {  
                console.log(myColor[params.dataIndex])  
                return myColor[params.dataIndex];  
            }  
        },  
        // 柱子之间的距离 50        // barCategoryGap: '5%',        // 柱子的宽度  
        barWidth: 20,  
        // 柱子标签定制  
        label: {  
            show: true,  
            position: "insideRight",  
            // 定制label显示格式  
            formatter: "{c}%",  
        }  
    },  
    {  
        name: '框',  
        type: 'bar',    
        data: [100, 100, 100, 100, 100, 100],  
        barWidth: 20,  
        // barCategoryGap: 20,  
        yAxisIndex: 1,  
        itemStyle: {  
            color: "none",  
            borderColor: "#00c1de",  
            borderWidth: 3,  
            barBorderRadius: 15,  
        }  
    }  
]

条形图定制7-数据显示排序

一、需求

1. 数据显示排序需要翻转
   

2. 跟随浏览器显示自动缩放大小

二、代码实现

问题分析：问题主要出在Y轴上，首先考虑将Y轴上的数据翻转过来，

（1）找到官方文档
Documentation - Apache ECharts

（2）在yAxis添加inverse属性

index.js

yAxis: [{  
    type: 'category',  
    // 数据翻转  
    inverse: true,  
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],  
    // 不显示y轴的线  
    axisLine: {  
        show: false  
    },  
    // 不显示刻度  
    axisTick: {  
        show: false  
    },  
    // 把刻度标签里面的文字颜色设置为白色  
    axisLabel: {  
        color: "#fff"  
    },  
},{  
    show: true,  
    // 数据翻转  
    inverse: true,  
    data: [19325, 23438, 31000, 121594, 134141, 681807],  
    // 不显示y轴的线  
    axisLine: {  
        show: false  
    },  
    // 不显示刻度  
    axisTick: {  
        show: false  
    },  
    // 把刻度标签里面的文字颜色设置为白色  
    axisLabel: {  
        textStyle: {  
            color: "#fff",  
            fontSize: 12,  
        }  
    },  
}  
],

效果

另一种效果

代码

yAxis: [  
    {  
    type: 'category',  
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],  
    inverse: true,  
    axisLine:{  
    // 不显示Y轴线  
        show: false,  
    },  
    axisTick:{  
        // 不显示刻度线  
        show: false,  
    },  
    axisLabel: {  
        // 调整标签颜色  
        color: 'rgba(255,255,255,1)'  
    }  
  
},  
    {  
        show: true,  
        data: [19325, 23438, 31000, 121594, 134141, 681807],  
        inverse: true,  
        axisLine: {show: false},  
        axisTick: {  
            show: false,  
        },  
    axisLabel: {  
        textStyle:{  
            color: "#fff",  
            fontSize: 12,  
        }  
    }  
    }  
    ],

图形跟随浏览器显示自动缩放大小

代码如下,在index.js中添加代码。

// 3.将配置项给实例对象  
window.addEventListener("resize",function () {  
    myChart.resize();  
})

可视化大屏项目参考链接

【可视化大屏开发】1.基础开发环境准备_pblh123的博客-优快云博客
【可视化大屏开发】2.基础项目配置及大屏布局_pblh123的博客-优快云博客
【可视化大屏开发】3.大屏配置之数字模块配置_pblh123的博客-优快云博客
【可视化大屏开发】4.大屏配置之地球模块配置_pblh123的博客-优快云博客
【可视化大屏开发】5.大屏配置之Echarts入门学习_pblh123的博客-优快云博客
【可视化大屏开发】6.可视化大屏配置之静态图柱形图1定制_pblh123的博客-优快云博客
【可视化大屏开发】7.可视化大屏配置之静态图条形图定制_pblh123的博客-优快云博客
【可视化大屏开发】8. 可视化大屏配置之静态图折线图1定制_pblh123的博客-优快云博客
【可视化大屏开发】9. 可视化大屏配置之静态图折线图2定制_pblh123的博客-优快云博客
【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制_pblh123的博客-优快云博客
【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制_pblh123的博客-优快云博客
【可视化大屏开发】12. 可视化大屏配置之静态图中国地图定制_pblh123的博客-优快云博客
【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据_pblh123的博客-优快云博客
【可视化大屏开发】14. Maven打包可视化大屏项目-发布jar包_pblh123的博客-优快云博客
【可视化大屏开发】15.可视化大屏项目-网络访问静态数据无法更新问题修复_pblh123的博客-优快云博客
【可视化大屏开发】16. 可视化大屏项目共性优化问题_pblh123的博客-优快云博客
17.可视化大屏配置之代码整理资源-优快云文库
可视化大屏项目动态数据样例资源-优快云文库