echars柱形图开发常见功能

蔚落 2021-07-24 15:56 366阅读 0赞

刚做echars 和没做过echars的小白分享下经验  
这个是横向的树形图 双柱形图(重点看带大括号的属性)  
我讲的通俗点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]

var myChart = echarts.init(document.getElementById("echartContainer"));
          myChart .off("click"); //记着调用接口数据获取值时一定要加这个,目的是为了防止多次调用接口,不然页面会很卡顿 myChart.setOption({ 
            grid: {    //控制canvas 画图的位置
              left: "0%",
              right: "20%",
              bottom: "2%",
              top: "0%",
              containLabel: true,
            }, barWidth: 15, //柱形的宽度 默认的应该是15 xAxis: { 
              type: "value", splitLine: { 
                lineStyle: { 
                  color: "rgba(255,255,255,0)",
                },
              }, axisTick: { 
                show: false,
              }, axisLine: { 
                // 改变x轴颜色 lineStyle: { 
                  color: "transparent",
                },
              }, axisLabel: { 
                // 改变x轴字体颜色和大小 textStyle: { 
                  color: "transparent",
                  fontSize: 16,
                },
              },
            }, yAxis: { 
              type: "category", data: this.bonusSubsidyData.dataY, splitLine: { 
                show: false,
              }, axisTick: { 
                show: false,
              }, axisLine: { 
                // 改变y轴颜色 lineStyle: { 
                  color: "#26D9FF",
                },
              }, axisLabel: { 
                // 改变y轴字体颜色和大小 //formatter: '{ value} m³ ', // 给y轴添加单位 textStyle: { 
                  color: "rgba(250,250,250,0.6)",
                  fontSize: 14,
                },
              },
            }, dataZoom: [ //数据过多的话一定要用这个属性 鼠标点击移动 可以使数据上下滚动 不加这个属性的话,数据会自适应的撑开,数据过多会导致柱形之间的重叠图形混乱
              { 
                type: "inside",
                yAxisIndex: [0],
                startValue: 0,
                endValue: 5,
                width: 8, //组件宽度
                backgroundColor: "#0E64B7",
                borderColor: "none",
                zoomLock: true,   //这个属性是控制柱形图的移动
              }, ], tooltip: {     //功能类似于hover trigger: "item", borderColor: "rgba(255,255,255,.3)", backgroundColor: "rgba(13,5,30,.6)", borderWidth: 1, padding: 5, formatter: function (parms) {    
                var str =
                  parms.marker +
                  "" +
                  parms.data.name +
                  "</br>" +
                  "数量：" +
                  parms.data.value +
                  "个</br>" +
                  "占比：" +
                  parms.percent +
                  "%";
                return str;
              },
            }, series: [ //数据显示部分
              { 
                type: "bar", barWidth: "10", itemStyle: { 
                  normal: { 
                    label: { 
                      show: true, //开启显示 position: "right", //在上方显示 formatter: function (params) { 
                        var str = params.value + "万元";
                        return str;
                      }, textStyle: { 
                        //数值样式
                        color: "#65F587",
                        fontSize: 14,
                        fontWeight: 600,
                      },
                    }, color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      { 
                        offset: 0,
                        color: "rgba(101,245,135,1)",
                      },
                    ]),
    
                    borderWidth: 2,
                  },
                },
    
                data: this.bonusSubsidyData.dataX1,  //第一条柱形
              },
              { 
                type: "bar", barWidth: "10", name: "", itemStyle: { 
                  normal: { 
                    label: { 
                      show: true, //开启显示 position: "right", //在上方显示 formatter: function (params) { 
                        var str = params.value + "人";
                        return str;
                      }, textStyle: { 
                        //数值样式
                        color: "#FDCE5A",
                        fontSize: 14,
                        fontWeight: 600,
                      },
                    }, color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      { 
                        offset: 0,
                        color: "rgba(255,172,52,1)",
                      },
                    ]),
    
                    borderWidth: 2,
                  },
                },
                data: this.bonusSubsidyData.dataX2,   //第二条柱形
              },
            ],
          });
        //树形图的点击事件 点击柱形 弹出框 显示柱形的详细数据
        var c = document.getElementsByClassName("modalBasic"); myChart.on("click", function (params) { 
            c[0].style.display = "block";
          });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center 1]

红色框

legend: { 
       x: '17%',  //x y 控制他们的位置 x左右 y上下 
       y: '-8%',
       textStyle: { 
       fontSize: 12,
       lineHeight: 45,
       color: '#666',
          },
       data: ['校验成功发放数', '校验失败发放数', '校验成功', '校验失败']
                    },

黑色框 (y轴左右两边的线可以对齐)

yAxis: [{ 
        name: '单位（人）',
        type: 'value',
        splitNumber: 3 //在yAxis 中设置这个属性就好
        },]

蓝色框  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/24465f9c41ba421fa55a9eb307c1cdac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/8c8b7880bda842d787485af37703dece.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlbnhpYW94aW5nNTU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210724/71199117c4af4db487f8ebad4e4d8cac.png

发表评论取消回复

表情：

评论列表（有 0 条评论，366人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts-柱形图

var clyyqst =\{ initAction:function()\{ /\$('.menuItem').removeClass('menuSelected')

灰太狼/ 2023年10月17日 17:57/ 0 赞/ 29 阅读

相关柱形图和盒图

1. 读取数据 import pandas as pd import matplotlib.pyplot as plt

电玩女神/ 2023年06月20日 06:05/ 0 赞/ 37 阅读

相关柱形图和堆积图组合

1. 问题描述使用柱形图(新特性)图表如何实现堆积柱形图组合柱形图（即设置多个系列堆积，其他系列为柱形图），如下图。 ![222][] 2. 示例

落日映苍穹つ/ 2023年06月09日 13:28/ 0 赞/ 60 阅读

相关 echarts 修改柱形图形状新增柱形图堆叠效果

效果图 ![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2022年12月05日 00:51/ 0 赞/ 275 阅读

相关用Java绘制柱形图_Java使用JFreeChart绘制柱形图

JFreeChart是JAVA平台上的一个开放的图表绘制类库。它完全使用JAVA语言编写，是为applications, applets, servlets 以及JSP等使用所

骑猪看日落/ 2022年11月07日 05:24/ 0 赞/ 450 阅读

相关 echarts柱图分组显示(簇状柱形图)

> 需求：设计echarts柱图，相同类型数据放在一起，使用不同背景色分割 > > 所用属性：yAxis/xAxis.splitArea > > splitAre

不念不忘少年蓝@/ 2022年10月24日 11:55/ 0 赞/ 486 阅读

相关 JFreeChart 柱形图

在这里简单的讲解一下Java中JFreeChart报表查询用的比较多用：[JFreeChart 3D饼图][JFreeChart 3D] [JFreeChart 折线

小鱼儿/ 2022年07月16日 09:55/ 0 赞/ 252 阅读

相关 Echarts横向叠加柱形图

带有图例的横向柱形图数据获取的时候每一个柱形图都要单独获取，具体代码如下： option ={ tooltip: {

浅浅的花香味﹌/ 2022年05月15日 12:24/ 0 赞/ 464 阅读

相关 Echarts之柱形图

需要引入 <script src="js/jquery.js"></script> <script src="js/echarts.js"></script>

冷不防/ 2021年09月17日 05:28/ 0 赞/ 448 阅读

相关 echars柱形图开发常见功能

刚做echars 和没做过echars的小白分享下经验这个是横向的树形图双柱形图(重点看带大括号的属性) 我讲的通俗点 ![在这里插入图片描述][waterma

蔚落/ 2021年07月24日 15:56/ 0 赞/ 367 阅读