Echarts图表之极坐标系中的柱状图

最新推荐文章于 2024-07-29 08:45:00 发布
最新推荐文章于 2024-07-29 08:45:00 发布
阅读量2.4k 收藏
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gly_technology/article/details/122554181
版权

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts图表</title>
        <!-- 引入echarts.min.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var data = [
                [5000, 10000, 6785.71],
                [4000, 10000, 6825],
                [3000, 6500, 4463.33],
                [2500, 5600, 3793.83],
                [2000, 4000, 3060],
                [2000, 4000, 3222.33],
                [2500, 4000, 3133.33],
                [1800, 4000, 3100],
                [1500, 1800, 1650]
            ];
            var cities = ['甘孜县', '泸定县', '炉霍县', '色达县', '白玉县', '得荣县', '雅江县', '九龙县', '康定市'];
            var barHeight = 50;
            var option = {
                color: ['#7ecef4'],
                backgroundColor: 'rgba(1,202,217,.2)',
                grid: {
                    left: 60,
                    right: 60,
                    top: 60,
                    bottom: 40
                },
                legend: {
                    show: true,
                    data: ['价格范围', '均值']
                },
                //径向轴的属性
                angleAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.2)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        color: "rgba(255,255,255,.7)"
                    },
                    data: cities
                },
                //极坐标系堆叠柱状
                radiusAxis: {
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.2)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        color: "rgba(255,255,255,.5)"
                    }
                },
                //数据可视化polar极坐标系
                polar: {},
                series: [{
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: 'transparent'
                        }
                    },
                    data: data.map(function(d) {
                        return d[0];
                    }),
                    //引入其他要素图层
                    coordinateSystem: 'polar',
                    stack: '最大最小值',
                    //坐标轴的标签是否响应和触发鼠标事件,默认不响应 
                    silent: true
                }, {
                    type: 'bar',
                    data: data.map(function(d) {
                        return d[1] - d[0];
                    }),
                    coordinateSystem: 'polar',
                    name: '价格范围',
                    stack: '最大最小值'
                }, {
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: 'transparent'
                        }
                    },
                    data: data.map(function(d) {
                        return d[2] - barHeight;
                    }),
                    coordinateSystem: 'polar',
                    stack: '均值',
                    silent: true,
                    z: 10
                }, {
                    type: 'bar',
                    data: data.map(function(d) {
                        return barHeight * 2
                    }),
                    coordinateSystem: 'polar',
                    name: '均值',
                    stack: '均值',
                    barGap: '-100%',

                    z: 10
                }],
                legend: {
                    show: true,
                    data: ['A', 'B', 'C']
                }
            };
            myChart.setOption(option);
        </script>
    </body>
</html>

gly_technology
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts案例：使用极坐标加柱状图实现类似Apple Watch上的运动环形效果
03-20
分享自己公司项目类似的一个案例，用Echarts中的Polar（极坐标或称为平面直角坐标系）和Bar（柱状图）实现的 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/AppleWatch
Echarts 极坐标系下的多色柱状图
q476988320的博客
12-12 2913
最近做了个很奇怪的报表，就记录一下。 效果图： 思路来源于官方实例：https://www.echartsjs.com/examples/zh/editor.html?c=bar-polar-stack 代码如下： let xData = ['粥', '小笼包', '生煎', '汤包', '炸酱面'] let yData = ['70', '75', '7...
如何利用Python中的pyecharts制作—极坐标图+漏斗图
最新发布
weixin_42636075的博客
07-29 1049
如何利用Python中的pyecharts制作—极坐标图+漏斗图
绘制echarts中的极坐标环形柱状图；柱状渐变；
MycoolMy的博客
12-21 3971
绘制极坐标图形时需要使用角度轴和径向轴两个方向的布局角度轴其实类似于Y轴，用于分割柱状图的间隔大小；径向轴其实类似与X轴，用于每条数据之间的间距；角度轴和径向轴其中的配置相类似；
Echarts 极坐标柱状图的详细配置过程
梁辰兴的博客
09-18 1346
极坐标柱状图是一种特殊的二维坐标图，它以极坐标为基础，将数据以柱状的形式展现出来。在极坐标柱状图中，分类轴对应于角度轴，而指标轴则对应于径向轴。这种图形的优点在于能够保留直角坐标系中数据变化趋势的优点，同时以更为美观的形式展现出来。然而需要注意的是，极坐标柱状图并不能很好地表示趋势，且在展示的数据量方面比普通柱状图更为有限。
Vue+Echarts 绘制极坐标柱状图
VVVVV
03-07 943
Vue+Echarts 绘制极坐标柱状图，内含关键属性注释
极坐标柱状图
︶￣城南花已开
07-26 952
echarts 极坐标柱状图效果
在Echarts图中给坐标轴加一个标识线markLine
10-15
在Echarts图中添加标识线markLine主要涉及以下几个方面： 1. 理解markLine：markLine即标记线，用于在Echarts图表中绘制直线，常见用于显示平均值、趋势线等。它作为图表的一个属性存在，可以轻松地在图表中的指定...
springboot echarts vue 柱状图
01-25
在ECharts中，柱状图的配置项包括`series`（定义图表系列）、`xAxis`（定义横轴）、`yAxis`（定义纵轴）、`tooltip`（提示框）等。`series`中的每一项代表一个数据系列，`data`属性是具体的数据值，`name`属性是...
Echarts柱状图和线状图实例
08-01
在ECharts中，柱状图和线状图是两种非常常见的图表类型，它们可以直观地帮助我们理解和分析数据。 柱状图是一种用于比较不同类别的数值的图表，每一根柱子代表一个类别，柱子的高度表示该类别的值。在ECharts中，...
echarts+vue实现多条统计柱状图表（渐变色柱状图，x、y坐标系修改颜色）项目源码.rar
08-28
在本项目中，我们主要探讨如何使用ECharts库与Vue.js框架来构建一个具有多条统计柱状图的可视化应用，其中包括渐变色柱状图以及自定义x、y坐标轴颜色的功能。以下是对实现这一目标所需技术点的详细解释： 1. **Vue....
echarts实现动态柱状图
12-19
在动态柱状图中，我们需要设置`type`为`'bar'`，并设定数据数组。数据可以是静态的，也可以是动态的，通过定时更新来实现动态效果。 2. `animation`：控制图表动画效果，设为`true`开启动画，默认值就是`true`。 3...
Echarts绘制极坐标系下的多色柱状图
localhost_1314的博客
04-11 7665
效果图： 关键点1：为了显示X轴的文本，将最大值100向左偏移 设置方法：设置最大值为120，最小值0，间隔25 关键点2：设置柱状图的多个颜色 设置方法： 完整代码： let xData = ['粥', '小笼包', '八宝粥', '炸酱面'] let yData = ['28', '35', '38', '49'] my...
Apache ECharts 可视化函数库｜GitCode
GitCode
09-09 454
Apache ECharts 是一个免费的、功能强大的图表和可视化库，提供了一种将直观、交互式和高度可定制的图表添加到你的商业产品的简单方法。它是用纯 JavaScript 编写的，基于 zrender，这是一个全新的轻量级画布库。近期 Apache Echarts 发布了 5.2.0 最新版本，新增了几个特性，下面分全局过渡动画、极坐标柱状图标签进行介绍。 全局过渡动画 在之前的版本中，过渡动画有一定的局限性: 只能用于相同类型的图形的位置、尺寸、形状，而且只能作用在相同类型的系列上。从 5.2.0 开始
echarts 极坐标实现【环形】柱状图
qq_36437172的博客
05-15 5652
效果图如下： polar 极坐标属性配置： polar: { center: ['50%', '50%'], // 中心（圆心）坐标 radius: '100%' //图形大小 }, angleAxis极坐标系的角度轴: angleAxis: { max: 100, // 满分 clockwise: false, // 逆时针 }, radiusAxis极坐标系的径向轴: radiusAxis: { type: 'category', }, ..
echarts 柱状图 详解与使用集合
2401_84094868的博客
04-12 1614
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取[外链图片转存中…(img-qwNR1035-1712875473585)][外链图片转存中…(img-TcxGDPdY-1712875473585)]
Echarts极坐标系下的堆叠柱状图
weixin_43166729的博客
10-10 2195
Echarts极坐标系下的堆叠柱状图 <template> <div> <p class="trave_title">{{ title }}</p> <div :style="'width: 100%;' + 'height:' + height + ';'" :id="id"></div> </div> </template> <script> import * as ec
Echarts数据可视化grid直角坐标系（xAxis、yAxis），开发全解+完美注释
热门推荐
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-06 7万+
mytextStyle={ color:&quot;#333&quot;,//文字颜色 fontStyle:&quot;normal&quot;,//italic斜体 oblique倾斜 fontWeight:&quot;normal&quot;, //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:&quot;sans-serif&a
echarts柱状图极坐标系
08-31
ECharts中的柱状图极坐标系（"polar"）是一种基于极坐标的柱状图展示方式。通过使用极坐标系，可以将数据在极坐标轴上按照角度和半径进行展示。 要创建柱状图极坐标系，首先需要在初始化ECharts实例时指定极坐标系类型，即设置polar属性为true。然后，通过配置series中的type为'bar'，即可将图表类型设置为柱状图。 下面是一个简单的示例代码，展示如何创建柱状图极坐标系： ```javascript // 初始化ECharts实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { polar: {}, // 设置为极坐标系 angleAxis: {}, // 设置角度轴 radiusAxis: {}, // 设置半径轴 series: [{ type: 'bar', // 设置为柱状图 data: [2, 4, 6, 8, 10] // 数据数组 }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); ``` 以上代码会在一个id为'chart'的HTML元素中显示一个简单的柱状图极坐标系。你可以根据自己的需求进一步配置和美化图表，例如设置标题、调整颜色、设置坐标轴标签等。 希望对你有帮助！如有更多问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值