echarts 分组绘制柱状图

最新推荐文章于 2024-06-06 11:39:14 发布
最新推荐文章于 2024-06-06 11:39:14 发布
阅读量4.7k 收藏 4
点赞数
分类专栏： 前端杂记 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Json_wangqiang/article/details/85276010
版权

echarts 分组绘制柱状图

示意图：

代码如下：

<!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.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.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" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '坐标轴刻度与标签对齐';

var _xAxis = [
    '淡白', '淡红', '红', '暗', '尖红', '边尖红',
                    '明显','不明显',
                    '明显','不明显',
                    '明显','不明显',
                    '薄腻','厚腻','薄',
                    '黄','白','薄白'];
var _yAxis = [10, 52, 20, 34, 30, 30,
                0,13,
                32,14,
                3,23,
                39,1,32,
                12,12,12];

option = {
    title: {
        text: '舌象显示统计（次）',
        textStyle:{
       	   color:"#666666",
       	   fontSize: 16,
       	   fontWeight:"normal"
        },
        top:"8",
        left:"17"
	},
    color: ['#297E3A'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : _xAxis,
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(204,232,207,0.8)','rgba(204,232,207,0.8)','rgba(204,232,207,0.8)','rgba(204,232,207,0.8)','rgba(204,232,207,0.8)','rgba(204,232,207,0.8)'
                    ,'rgba(250,250,250,0.3)','rgba(250,250,250,0.3)'
                    ,'rgba(204,232,207,0.8)','rgba(204,232,207,0.8)'
                    ,'rgba(250,250,250,0.3)','rgba(250,250,250,0.3)'
                    ,'rgba(204,232,207,0.8)','rgba(204,232,207,0.8)','rgba(204,232,207,0.8)'
                    ,'rgba(250,250,250,0.3)','rgba(250,250,250,0.3)','rgba(250,250,250,0.3)'
                    ]
                }
            }
        }
    ],
    yAxis : [{
        type : 'value'
    }],
    series : [
        {
            name:'次数',
            type:'bar',
            barWidth: '50%',
            data: _yAxis,
            itemStyle: {
                normal: {
                    //柱形图圆角，初始化效果
                    barBorderRadius:[50, 50, 0, 0],
                    label: {
                        show: true,//是否展示
                        textStyle: {
                            fontWeight:'bolder',
                            fontSize : '12',
                            fontFamily : '微软雅黑',
                        }
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    color: '#000000',
                    position: 'top'
                }
            }
        }
    ]
};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

　　

Json_wangqiang
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts绘制立体柱状图
weixin_43412413的博客
12-26 7036
效果图： <template> <div class="app_rank"> <div id="echart_box"></div> </div> </template> <script> export default { name: 'carRank', components: ...
echarts实现立体柱状图
ʚ菲菲的博客ɞ
12-29 2104
基于象形柱图pictorialBar实现。 var rocket = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAeCAYAAACPOlitAAAAAXNSR0IArs4c6QAADOdJREFUaEPFmttvXNd1xn9r7TNnOBzeRIkSRetiW7Lk0q5tWXIcSS2qFrENFMlLADtNAyc24tZAC/ShL+1b1H+hQAuoqKvIjlvAfstLYSNFpCRO4tiMGsryTfcL
echarts柱图显示多级x轴及柱条分区显示
苦瓜_小学生的博客
03-11 3205
echarts柱图显示多级x轴文字及柱条分区显示 柱图数值倾斜显示
echarts自定义分组，x轴分级，支持多级，支持dataZoom
03-31
以柱状图为例，实现echarts自定义分组，x轴分级，支持多级，支持dataZoom
Echarts基础学习 4-折线图实战（工作任务）
最新发布
qkdgz的博客
06-06 675
Echarts学习，折线图，实战
echarts：多组柱状-图
qq_41390184的博客
04-13 5971
本文介绍了如何使用Echarts绘制多组柱状图。首先需要准备好要绘制的数据，然后在HTML页面中创建一个图表容器，并引入Echarts库文件。接着，在JavaScript代码中使用Echarts的API来绘制图表，包括设置图表的各种属性和数据系列等。最后，将option配置项应用到图表容器中，即可完成图表的绘制。
1947-2020 NBA总冠军次数排行榜
大数据
01-18 2383
导读：你的主队排第几？关注数据叔视频号，看更多好玩视频????划重点????干货直达????人工智能三大关键能力，终于有人讲明白了数据缺失值的3种处理方式，终于有人讲明白了5G时代不可或...
echarts柱图分组显示(簇状柱形图)
BookstoreSpirit的博客
01-29 4382
需求：设计echarts柱图，相同类型数据放在一起，使用不同背景色分割 所用属性：yAxis/xAxis.splitArea splitArea：坐标轴在 grid 区域中的分隔区域 思路：其实我这个很简单，就是在拿到数据后进行个处理，将相同类型的数据相邻排放，然后在渲染的时候，给每个柱图背景色，这样的话，同类型的柱子背景色一样，就形成了区域分组效果 代码如下 //x轴数据 var _xAxis = ['红1', '红2','绿1','绿2','黄1','黄2','橘1','橘2']; //y轴数据 va.
Echarts柱状图
热门推荐
~~
03-16 2万+
图1： <template> <div id="chartBar" style="width: 700px; height: 300px"></div> </template> <script> import echarts from "echarts"; export default { data() { return { chartBar: null, category: [
echarts漂亮的柱状图按月统计
07-20
`标签`中的“js统计图”指的是这个项目使用JavaScript技术进行数据可视化，“按月统计”表明数据是按照月份分组的，“echarts柱状图”则强调了使用的图表类型。这个项目展示了如何利用ECharts这个强大的工具，结合...
echarts 实现圆柱体图形.zip
05-14
在默认情况下，ECharts 会绘制出二维的矩形柱状图。要将柱状图转变为圆柱体，我们需要利用 ECharts 提供的自定义渲染机制，即 `renderer` 属性。ECharts 支持 SVG 和 WebGL 两种渲染方式，其中 WebGL 可以更方便地...
75.（leaflet篇）leaflet柱状图.zip
03-08
尽管在标题中没有明确提到使用ECharts，但可能在博客文章中，作者对比了Leaflet与ECharts在绘制柱状图上的差异，或者探讨了如何将两者结合使用。 在压缩包的文件名称列表中只有一个文件名："map"。这可能是包含地图...
自定义图表组件，支持柱状图，折线图，曲线图，饼图绘制
12-15
本文将深入探讨如何实现一个自定义图表组件，支持柱状图、折线图、曲线图和饼图的绘制。 首先，我们要了解这四种基本图表类型： 1. **柱状图**：柱状图是一种以矩形的高度或长度来表示数值大小的图表，通常用于...
动态柱状图投票代码
03-05
在网页设计和数据分析中，柱状图是一种直观展示各类别数据比例或差异的有效工具。在这个特定的案例中，我们讨论的是一个JavaScript实现的动态柱状图，它可以实时更新投票结果，类似于QQ投票平台的功能。这种交互式的...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
Web_chicken的博客
10-09 5201
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点 先看效果图 我们可以看到图中图表不仅有渐变色，同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来，我们一起来实现一下这个效果 1. HTML部分 <div id="ParkingLotLoadRanking" ref="ParkingLotLoadRanking" style="height:16.875rem;width:25%;"></div> 2. JS部分 // 获取DOM元素 let m
数据可视化echarts学习笔记
我真的很不错的博客
08-23 1041
文章目录echarts使用渐变色一些配置项动态排序 echarts 使用 1.首先需要先引入echarts html直接引入js文件 <script src="../echarts.min.js"></script> vue项目中需要先安装 npm install echarts --save 然后在需要的地方引入 import * as echarts from 'echarts' 2.初始化dom节点 首先得有一个dom节点容器 <div id="main" styl
echarts分组嵌套柱状图
m0_52313178的博客
06-19 3468
echarts分组嵌套柱状图
自定义Echarts柱状图， 一图显示多组数据
weixin_40463857的博客
08-04 4816
这个自定义的功能是参考一位大佬的帖子做出来的， 以此为基础加了一些优化， 但是我找不到大佬的帖子链接了， 如果有发现的请告诉我， 我在帖子上加一下， 以谢大佬指点之恩。//先定义图表容器， 至于图表所需要的js啥的， 请自行搜索教程， 不多赘述。...
echarts绘制堆积柱状图
09-03
可以使用 ECharts 来绘制堆叠柱状图。首先，你需要引入 ECharts 库，并创建一个容器来展示图表。接下来，配置图表的数据和样式，最后将配置好的图表渲染到容器中即可。 以下是一个简单的示例代码，演示如何使用 ECharts 绘制堆叠柱状图： ```html <!DOCTYPE html> <html> <head> <title>堆叠柱状图</title> <script src="https://cdn.staticfile.org/echarts/5.0.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化图表 var myChart = echarts.init(document.getElementById('chart')); // 配置图表数据 var option = { title: { text: '堆叠柱状图示例' }, tooltip: { }, legend: { data: ['类别1', '类别2', '类别3'] }, xAxis: { data: ['数据1', '数据2', '数据3', '数据4', '数据5'] }, yAxis: { }, series: [ { name: '类别1', type: 'bar', stack: '总量', data: [120, 132, 101, 134, 90] }, { name: '类别2', type: 'bar', stack: '总量', data: [220, 182, 191, 234, 290] }, { name: '类别3', type: 'bar', stack: '总量', data: [150, 232, 201, 154, 190] } ] }; // 渲染图表 myChart.setOption(option); </script> </body> </html> ``` 在上述代码中，`option` 对象定义了图表的各种配置项，包括标题、提示框、图例、X 轴、Y 轴和系列数据。具体可以根据你的需求进行修改。 注意：在使用上述代码时，需要确保网络环境可以访问到 ECharts 库文件。你可以将 `https://cdn.staticfile.org/echarts/5.0.2/echarts.min.js` 替换为你自己的 ECharts 库文件路径。 希望以上内容对你有所帮助！如有需要，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值