echarts 柱行图详细设置

最新推荐文章于 2025-05-19 11:17:04 发布

freedom_文

最新推荐文章于 2025-05-19 11:17:04 发布

阅读量615

点赞数 1

CC 4.0 BY-SA版权

分类专栏： EChart

本文链接：https://blog.youkuaiyun.com/freedomVenly/article/details/99435270

EChart 专栏收录该内容

5 篇文章

订阅专栏

本文展示了一个使用ECharts库创建的世界人口数据可视化项目。通过柱状图展示了2019年不同国家的人口数量，包括巴西、印尼、美国、印度、中国及全球总人口。文章详细介绍了HTML、CSS和JavaScript的使用，以及如何配置ECharts选项来定制图表样式。

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

在这里插入图片描述


<!DOCTYPE html>
<html style="height: 100%">
<head>
   <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0;background: #2d4877">
   <div id="container" style="width:800px;height: 600px;margin: 100px auto;"></div>
   <script type="text/javascript" src="../echarts.min.js"></script>

   <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        option = null;
        option = {
            title: {            //图表标题
                text: '世界人口总量',
                textStyle:{
                    color:'#ddd',        //颜色
                    fontSize:16,     //大小
                    fontWeight:'normal',    //粗细
                    // fontFamily:'Microsoft yahei',   //字体
                },
            },
            tooltip: {	   //悬浮框  show 的默认值是true
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['2011年', '2012年']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                splitLine:{		//图表中背景网格线
                        show:false
                    },
                axisLabel: {    //X轴文字样式    详情：https://echarts.baidu.com/option.html#xAxis.axisLabel
                    show: true,
                    interval:0,		//x轴内容全部显示
                    textStyle: {
                        color: '#faf',
                        fontSize:'16'
                    }
                },
                axisLine:{      //X轴坐标轴的样式    详情：https://echarts.baidu.com/option.html#xAxis.axisLine
                    lineStyle:{
                        color:'#1283C4',
                        width:2,
                    }
                },
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                axisLabel: {    //Y轴文字样式
                    show: true,
                    textStyle: {
                        color: '#aff'
                    }
                },
                
                axisLine:{      //Y轴坐标轴的样式
                    lineStyle:{
                        color:'#fff',
                        width:2,
                    }
                },
                
                axisTick:{      //刻度尺是否朝内， 默认值false 是朝外的
                        inside:true
                },
                
                data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
            },
            series: [
                {
                    name: '2019年',
                    type: 'bar',        //跟柱形图有关的大部分都在这里查： https://echarts.baidu.com/option.html#series-bar.type
                    barWidth : 30,  //柱行的宽度!!!
                    itemStyle:{ //只列举几个常用的，详细的参考https://echarts.baidu.com/option.html#series-bar.itemStyle
                        normal:{
                            color:"#12C48B",    //柱行颜色
                            borderColor:"#F5460F",  //柱行边框颜色，
                            borderWidth:2,
                            label:{    //数值是否直接显示在表格中， 这个要注意版本问题，老一点的版本写在这里，
                                show:true,
                            }
                        }
                    },
                    data: [18203, 23489, 29034, 104970, 131744, 630230],
                     // label:{       //数值是否直接显示在表格中， 这个要注意版本问题，新的版本写在这里，
                    //     show:true,
                    //     position:"right",
                    //     fontWeight:"bold",
                    //     fontSize:25,
                    //     color:"#fff"
                    // }
                }
            ]
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
   </script>
</body>
</html>