echarts 横向条状图

最新推荐文章于 2024-07-31 18:24:23 发布
最新推荐文章于 2024-07-31 18:24:23 发布
阅读量3.7k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangJiangNan17214/article/details/72771107
版权
<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '世界人口总量 - 条形图';


option = {
    //  title : {
    //     text: '世界人口总量',
    //     subtext: '数据来自网络'
    // },
    // tooltip: {
    //     trigger: 'axis',
    //     // axisPointer: {
    //     //     type: 'shadow'
    //     // }
    // },
    // legend: {
    //     data: ['2011年']
    // },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
         show: false,
        boundaryGap: [0, 0.01],
    },
    yAxis: {
        type: 'category',
        data: ['6 招商银行','5 广发银行','4 工商银行','3 农业银行','2 中国银行','1 交通银行'],
        axisLine: { show: false},
        axisTick: {show: false},
    },
     color:['#2c3f6a','#21927e'],  
    series: [
        {
            name: '2011年',
            type: 'bar',
            barWidth: 15,
                itemStyle: {
                    normal: {
                        barBorderRadius: 40,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: '#2d3d69'
                        }, {
                            offset: 1,
                            color: '#2b3c67'
                        }]),
                        // shadowColor: 'rgba(35,149,229,0.8)',
                        // shadowBlur: 20,
                        areaStyle: {type: 'default'},
                 label : {
                    show: true, 
                    position: 'right',
                    formatter: function (params) {
                      // console.log(params)//这里输出params所有参数 需要什么下面自己拼
                        // return params.name + params.data;
                       return "￥" + params.data;
                    },
                    
                    textStyle: {
                        color: '#000000'
                    }
                },
                    },


                },
        //     itemStyle: {
        //        // emphasis: {
        //        //                barBorderRadius: 10
        //        //          },


        //     normal: {
        //         label : {
        //             show: true, 
        //             position: 'right',
        //             formatter: function (params) {
        //               // console.log(params)//这里输出params所有参数 需要什么下面自己拼
        //                 // return params.name + params.data;
        //                return "￥" + params.data;
        //             },
                    
        //             textStyle: {
        //                 color: '#000000'
        //             }
        //         },
        //           barBorderRadius: 10,
        //     }
        // },
            data: [63023, 63023, 63023, 63023, 63023, 63023],
        },
        {
            name: '2012年',
            type: 'bar',
            barWidth: 15,
                itemStyle: {
                    normal: {
                        barBorderRadius: 40,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: '#0a6253'
                        }, {
                            offset: 1,
                            color: '#34b9a4'
                        }]),
                        // shadowColor: 'rgba(35,149,229,0.8)',
                        // shadowBlur: 20,
                        areaStyle: {type: 'default'},
                 label : {
                    show: true, 
                    position: 'right',
                    formatter: function (params) {
                      // console.log(params)//这里输出params所有参数 需要什么下面自己拼
                        // return params.name + params.data;
                       return "￥" + params.data;
                    },
                    
                    textStyle: {
                        color: '#000000'
                    }
                },
                    },


                },
        //     itemStyle: {
        //     normal: {
        //         label : {
        //             show: true, 
        //             position: 'right',
                    
        //             formatter: function (params) {
        //               // console.log(params)//这里输出params所有参数 需要什么下面自己拼
        //                 // return params.name + params.data;
        //                 return "￥" + params.data;


        //             },
                    
        //             textStyle: {
        //                 color: 'tomato'
        //             }
        //         }
        //     }
        // },




            data: [19325, 33438, 3100, 12159, 13414, 33438],
            // itemStyle : { normal: {
            //     // color: 'orange',
            //     borderRadius: 65,
            //     label : {
            //         show: true,
            //         position: 'left',
            //         formatter: '{b}'
            //     }
            // }},
                barGap:'8%'
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
















       </script>
   </body>
</html>
WJN17214
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变数值文本，涉及点击事件，功能齐全的易于使用；
echarts图表——条形图（柱状图）的动态横向显示设置
热门推荐
zuo-yiran的博客
06-20 7万+
项目中要用到图表，简单地用echarts.js实现。 效果为： 是简单的无坐标轴显示的图表。 代码： html：<div id="main" style="width: 100%;"></div>js（配置）：var length=12;//此处为动态数据的长度 var hei=(length*60)+'px';//动态获取图表高度 $("#main").css('height',hei
Echarts 横向条形图的右侧标签靠右显示对齐，不被遮挡
最新发布
小匠的Blog
07-31 294
再添加一个y轴，隐藏刻度线即可。
Echarts横向柱形图
weixin_43273592的博客
03-18 1485
实际上就是设置两个y轴，第一个显示底色柱子，另一个只显示真实数据的柱子,在这里只显示y轴,x轴不显示..
echarts图表——条形图（柱状图）的动态横向显示设置_echarts横向条形图(1)
2401_85013604的博客
05-14 912
/ window.onresize = function () { //适应页面。
echarts实现横条状态图
weixin_41999084的博客
09-10 2037
option = { backgroundColor: '#0e2147', xAxis: { show: false, width:100, }, yAxis: [{ show: true, data: ['当日', '前日'], inverse: true, axis...
Echart横向柱状图
qq_41942913的博客
03-20 1640
<%-- BEGIN BODY --%> <div id="divCond" class="chart" style="width: 350px;height:60px;"></div> <%-- END BODY --%> //BEGIN JS var seriesData = [10, 20]; var colors=["red","yello...
echarts条形图横向显示数据且设置label属性Echarts条形图右侧显示数据
徊忆羽菲
06-08 2755
echarts条形图横向显示数据且设置label属性Echarts条形图顶端显示数据默认不显示数据修改label属性控制数据显示位置 默认不显示数据 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="contain
vue echarts 条纹柱状横向图
tendernessxy的博客
04-13 1359
echarts 条纹柱状横向图
基于Echarts的条形堆叠图绘制
weixin_51956695的博客
10-24 1965
美赛绘图问题 基于Echarts的条形堆叠图绘制 要复刻的图片 一、准备 推荐网站：添加链接描述 网站内很多可视化模板包括但不限于雷达图、条形图、桑基图、平行坐标系。配套具体代码实现，即使改，即时生成。 二、调试 条形堆叠图及其代码部分 修改数据内容： 1.yAxis后的data，这里代表的是对象名。 2.series后的data，这里代表的是对象具体数据。 修改坐标轴： 例如grid后的 left、right、bottom，具体内容见配置项说明文档。 三、取色 取色网站推荐添加链接描述，这里用不到以后
echarts多维条形图 柱状图作图
07-22
echarts多维条形图 柱状图作图，来自官网代码，图形化 展示 大数据 信息
css进度条（条状图表）
11-18
在网页上很多地方会用到进度条，本实例是一个用css实现的进度条。但由于技术有限，只能做到这样，如果加上js就能实现真正的实时进度了。
React+ECharts条形图
读心悦
04-04 1353
条形图效果如下： 根据需求，可以隐藏X、Y轴的刻度线和label内容。 其实条形图就是柱状图旋转后的效果，柱状图的X轴设置的是label、Y轴设置为value，那么条形图就是相反，X轴设置设置为value，Y轴设置为label： xAxis: { type: 'value', }, yAxis: { type: "category", data: ["2012", "2013", "2014", "2015", "2016
【Echarts】堆叠条形图 的实现！！！快来看看！
Milk~每天分享一点点，技术进步一点点
09-08 5962
堆叠条形图的实现 先看效果 文件目录 引入Echarts 通过标签方式直接引入构建好的 echarts 文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></s
echarts横向进度条
qq_42689126的博客
04-17 1693
{ name: "艾瑞莉娅", value: "73", value1: "324", value2: "235" },{ name: "暗裔剑魔", value: "37", value1: "321", value2: "120" },{ name: "瑞文", value: "32", value1: "258", value2: "82" },{ name: "狐臭", value: "69", value1: "429", value2: "294" },name: "百分比",
echarts 横向圆角条状图
WangJiangNan17214的博客
06-07 2476
Echarts绘制横向柱状图(圆角+渐变) var MyChartsTop10; function drawTop10(dic){      var myChart = echarts.init(document.getElementById('drawTop10'));     //初始化数据     // var category = ['小王', '小李
echarts 横向条形图 对比
qq_41919732的博客
03-06 3426
横向条形图 对比 先看效果图 代码：需要改动的数据我都提在了最前面； let yList = ['2月','对比2月']; let collectingMediaList = [766, 350]; let dealerLists = [134, 31]; let regionalDelivery = [34, 31]; option = { title: { tex...
vue-echarts线型图和横向柱状图(条形图)
seeeeeeeeeee的博客
07-06 6139
效果 代码(一个是左边图的代码，一个是右边的，注释写上了，可以更改，需要进入页面就渲染就在mounted内调用一下这两个) 注意：echarts图需要容器有高度才能显示。如果需要动态的高度可以用vh和百分比设置，可以用css3函数calc来动态计算。 比如这样： //图表自适应高度 .eee{height: calc(100vh - 390px);width: 100%;} dom部分： <!-- echarts图表部分 --> <el-row> <el
echarts横向立体图
12-24
以下是使用Echarts绘制横向立体图的示例代码： ```html <!DOCTYPE html> <title>Echarts横向立体图 <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"> ; height: 400px" id...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值