echarts 横向柱状图

已于 2023-06-02 14:57:31 修改
阅读量118 收藏
点赞数
文章标签： echarts 前端 javascript
于 2023-06-02 14:54:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43917072/article/details/131007019
版权

适配native-echarts

 

方式1：重叠

var data = [
  { name: 'A', value: 0, sqz: 3, bhz: -3, zbbhz: 0.0 },
  { name: 'B', value: 1, sqz: 17, bhz: -16, zbbhz: 0.0 },
  { name: 'C', value: 2, sqz: 21, bhz: -19, zbbhz: 0.0 },
  { name: 'D', value: 3, sqz: 51, bhz: -48, zbbhz: 0.0 },
  { name: 'E', value: 1, sqz: 73, bhz: -72, zbbhz: 0.0 },
  { name: 'F', value: 2, sqz: 47, bhz: -45, zbbhz: 0.0 },
  { name: 'G', value: 0, sqz: 63, bhz: -63, zbbhz: 0.0 },
  { name: 'H', value: 1, sqz: 93, bhz: -92, zbbhz: 0.0 },
  { name: 'I', value: 0, sqz: 18, bhz: -18, zbbhz: 0.0 },
  { name: 'J', value: 2, sqz: 44, bhz: -42, zbbhz: 0.0 },
  { name: 'K', value: 0, sqz: 21, bhz: -21, zbbhz: 0.0 },
  { name: 'L', value: 3, sqz: 102, bhz: -99, zbbhz: 0.0 },
  { name: 'M', value: 5, sqz: 37, bhz: 2, zbbhz: 0.0 },
  { name: 'N', value: 0, sqz: 44, bhz: -44, zbbhz: 0.0 },
  { name: 'O', value: 1, sqz: 50, bhz: -49, zbbhz: 0.0 },
  { name: 'P', value: 1, sqz: 36, bhz: -35, zbbhz: 0.0 },
  { name: 'Q', value: 1, sqz: 28, bhz: -27, zbbhz: 0.0 },
  { name: 'R', value: 1, sqz: 13, bhz: -12, zbbhz: 0.0 },
  { name: 'S', value: 0, sqz: 12, bhz: -12, zbbhz: 0.0 }
];//真实数据

var list1 = [];
var list2 = [];
var list3 = [];
var nameArr = [];
let maxValue = 0;
var barWidth = 20;
var barWidth2 = 30;
data.map(function (item) {
  // list4.push({ value: item.value });
  nameArr.push(item.name);
  if (parseInt(item.value) > maxValue) {
    maxValue = parseInt(item.value);
  }
});
let len = maxValue > 0 ? maxValue : 10;
data.map(function (item) {
  list1.push({ value: len, showValue: item.value });
  list2.push({
    value: len * 1.2,
    label: parseInt(item.bhz) > 0 ? '+' + item.bhz : ''
  });
  list3.push({
    value: len * 1.2,
    label: parseInt(item.bhz) <= 0 ? item.bhz : ''
  });
});

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      //坐标轴指示器，坐标轴触发有效
      type: 'line', // 默认为直线，可选为：'line' | 'shadow'
      lineStyle: {
        color: 'transparent'
      }
    },
    formatter: '{b}: {c3}'
  },
  legend: {
    show: false
  },
  xAxis: {
    show: false
  },
  yAxis: {
    data: nameArr,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    }
  },
  textStyle: {
    color: '#333333',
    fontSize: 14
  },
  series: [
    {
      type: 'bar',
      barGap: '-100%', //叠加重叠使用
      barWidth: barWidth,
      data: list1,
      itemStyle: {
        // label: { show: true }
        normal: {
            color: 'transparent'
        }
      },
      label: {
        normal: {
          show: true,
          position: 'right', // 将 label 显示在右侧
          formatter: function (params) {
            return params.data.showValue + '起';
          }
        }
      }
    },
    {
      type: 'bar',
      barGap: '-100%', //叠加重叠使用
      barWidth: barWidth,
      data: list2,
      itemStyle: {
        normal: {
            color: 'transparent'
        }
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          formatter: function (params) {
            return params.data.label;
          },
          textStyle: {
            color: '#FF2929',
            fontSize: 14,
            fontWeight: 'bold'
          }
        }
      }
    },
    {
      type: 'bar',
      barGap: '-100%', //叠加重叠使用
      barWidth: barWidth,
      data: list3,
      itemStyle: {
        normal: {
            color: 'transparent'
        }
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          formatter: function (params) {
            return params.data.label;
          },
          textStyle: {
            color: '#0AB28A',
            fontSize: 14,
            fontWeight: 'bold'
          }
        }
      }
    },
    {
      type: 'bar',
      barWidth: barWidth,
      barMinHeight:1,
      itemStyle: {
        // label: { show: true },
        normal: {
          color: '#479DFF'
        }
      },
      data: data
    }
  ],
  grid: {
    containLabel: true,
    top: '5%',
    left: '10',
    right: '10%'
  }
};

方法2：堆叠
 

var data = [
  { name: 'A', value: 0, sqz: 3, bhz: -3, zbbhz: 0.0 },
  { name: 'B', value: 1, sqz: 17, bhz: -16, zbbhz: 0.0 },
  { name: 'C', value: 2, sqz: 21, bhz: -19, zbbhz: 0.0 },
  { name: 'D', value: 3, sqz: 51, bhz: -48, zbbhz: 0.0 },
  { name: 'E', value: 1, sqz: 73, bhz: -72, zbbhz: 0.0 },
  { name: 'F', value: 2, sqz: 47, bhz: -45, zbbhz: 0.0 },
  { name: 'G', value: 0, sqz: 63, bhz: -63, zbbhz: 0.0 },
  { name: 'H', value: 1, sqz: 93, bhz: -92, zbbhz: 0.0 },
  { name: 'I', value: 0, sqz: 18, bhz: -18, zbbhz: 0.0 },
  { name: 'J', value: 2, sqz: 44, bhz: -42, zbbhz: 0.0 },
  { name: 'K', value: 0, sqz: 21, bhz: -21, zbbhz: 0.0 },
  { name: 'L', value: 3, sqz: 102, bhz: -99, zbbhz: 0.0 },
  { name: 'M', value: 5, sqz: 37, bhz: 2, zbbhz: 0.0 },
  { name: 'N', value: 0, sqz: 44, bhz: -44, zbbhz: 0.0 },
  { name: 'O', value: 1, sqz: 50, bhz: -49, zbbhz: 0.0 },
  { name: 'P', value: 1, sqz: 36, bhz: -35, zbbhz: 0.0 },
  { name: 'Q', value: 1, sqz: 28, bhz: -27, zbbhz: 0.0 },
  { name: 'R', value: 1, sqz: 13, bhz: -12, zbbhz: 0.0 },
  { name: 'S', value: 0, sqz: 12, bhz: -12, zbbhz: 0.0 }
];//真实数据

var list1 = [];//补充的柱子，撑起左侧展示数据
var list2 = [];//增加展示
var list3 = [];//减少展示
var nameArr = [];
let maxValue = 0;
var barWidth = 20;
var barWidth2 = 30;
data.map(function (item) {
  nameArr.push(item.name);
  if (parseInt(item.value) > maxValue) {
    maxValue = parseInt(item.value);
  }
});
let len = maxValue > 0 ? maxValue : 10;
data.map(function (item) {
  list1.push({ value: len - item.value, showValue: item.value });
  list2.push({
    value: len * 0.2,
    label: parseInt(item.bhz) > 0 ? '+' + item.bhz : ''
  });
  list3.push({
    value: len * 0,
    label: parseInt(item.bhz) <= 0 ? item.bhz : ''
  });
});

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function(params){
      return params[0].data.name + ": " + params[0].data.value;
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    show: false,
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: nameArr,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    }
  },
  series: [
    {
      name: '真实',
      type: 'bar',
      stack: 'total',
      barMinHeight:1,
      data: data
    },
    {
      name: '补全',
      type: 'bar',
      stack: 'total',
      itemStyle: {
        normal: {
          color: 'transparent'
        }
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          formatter: function (params) {
            return params.data.showValue + '起';
          }
        }
      },
      data: list1
    },
    {
      name: '增加',
      type: 'bar',
      stack: 'total',
      label: {
        normal: {
          show: true,
          position: 'right',
          formatter: function (params) {
            return params.data.label;
          },
          textStyle: {
            color: '#FF2929',
            fontSize: 14,
            fontWeight: 'bold'
          }
        }
      },
      itemStyle: {
        normal: {
          color: 'transparent'
        }
      },
      data: list2
    },
    {
      name: '减少',
      type: 'bar',
      stack: 'total',
      label: {
        normal: {
          show: true,
          position: 'right',
          formatter: function (params) {
            return params.data.label;
          },
          textStyle: {
            color: '#0AB28A',
            fontSize: 14,
            fontWeight: 'bold'
          }
        }
      },
      data: list3
    }
  ]
};

举头望宇宙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
修改Echarts源码实现柱状图的炫彩闪烁效果
weixin_44704019的博客
08-01 1667
本次工作需要使用Echarts设计大屏展示，考虑到风险告警功能要对超过阈值的数据标记高亮，同时加强提醒，需要对柱状图的高亮做出一些修改。 查阅资料，有博主已经做出了我想实现的效果，如下图所示，附上原博客地址。 但是该博主的代码还有一部分没有写出来，直接使用是有点问题的。经历一个小时的百度，终于发现问题所在。 对Echarts源码进行修改时，不仅需要修改src下的js文件，还需要修改lib下的文件（灵感来源于Echarts源码修改这篇博客 最终实现的效果如下： 超过50的数值标红闪烁进行告警 1.安装Ech
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变...
Echarts柱状图横向展示，左侧类名区别显示，自定义tooltip效果
林啾啾的博客
05-24 1208
文章目录效果图具体代码及讲解准备数据配置颜色项，方便后续使用图表具体实现 效果图 一般状态显示： 鼠标悬停时效果： 具体代码及讲解 准备数据 var valdata = [10, 15, 25, 55] var titlename = [ '高风险', '中风险', '较低风险', '低风险' ] 配置颜色项，方便后续使用 var yhColor = [ new echarts.graphic.LinearGradient(0, 0, 1, 0, [
echarts图表——条形图（柱状图）的动态横向显示设置_echarts横向条形图
最新发布
2401_85012069的博客
05-15 169
【代码】echarts图表——条形图（柱状图）的动态横向显示设置_echarts横向条形图。
Echarts 之横向柱状图（完成度用汉字标识）
Lane Lee&CSDN
05-18 1242
效果图 代码 <script src="../js/echarts-4.1.0/echarts.js"></script> <script src="../js/theme/customed.js"></script> <script type="text/javascript"> var yAxisData = ['项目1','项目2','项目3','项目4','项目5']; var zdxmData = [95,30.
echarts——横向柱状图
xiaoququ的博客
12-15 1万+
功能描述 全屏横向柱状图 从小到大排序，每次显示5条，每3秒切换循环显示 鼠标移入停止切换，鼠标移出继续切换 柱状图组件源码 <template> <div class="w100 h100"> <div ref="bar" class="w100 h100"></div> </div> </template> <script> import { ququ } from "../../public/s.
eCharts-柱状图（横置） 配置说明
Michaelcsd的专栏
01-24 3699
// 实例化eChart图表 function initEchart( idName, option ) { var myEchart = echarts.init( document.getElementById( idName ) ); myEchart.setOption( option ); } // 随机数生成 function randomNum( digitNum
echarts 横向柱状图.md
03-23
echarts 图标的横向柱状图的展示
echarts-柱状图
06-26
柱状图：坐标轴刻度与标签对齐。适合于网页，app等。里面的标签内容，需按照要求进行更改。详情可以查看更多关于echart的信息。也可以查看我更多关于echart的介绍和心得。
Echarts动态排名柱状图(自适应电脑和手机端)源代码
10-09
Echarts动态排名柱状图(自适应电脑和手机端)源代码，参见：https://blog.csdn.net/weixin_41290949/article/details/120672844
【JavaScript源代码】vue echarts实现横向柱状图.docx
12-29
vue echarts实现横向柱状图 　本文实例为大家分享了vue echarts实现横向柱状图的具体代码，供大家参考，具体内容如下　实现效果：　代码：　<template>　<div class="OverYearsPompany">　; height: 368px; margin-...
ecarts进度条（横向柱状图）
zxs123csdn的博客
11-26 1476
drawCharts3_2() { this.myChart3.setOption({ title: { left:"2%", top:"3%", text: "{img|}充电站充电次数TOP5", textStyle: { fontSize:15, color: "#ffffff", rich: { ..
Echarts 横向柱状图
热门推荐
HelloWord176的博客
01-29 1万+
实例图片： 横向显示将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 placeCharts() { let myChart = this.$echarts.init(sportIMg); myChart.setOption({ grid: { left: "15", containLabel: true, }, xAxis:
echarts - 横向柱状图
qq_40905132的博客
02-24 4169
echarts配置：option我是放置在data内部，然后再动态获取y轴和数值(series)的数据再进行图表的渲染。涉及点：横向柱状图、不显示x轴标签、柱子渐变色、数量及单位显示在柱子内部。最近项目涉及好几种echarts的图表，特此记录一下。
echarts 折线图 + 柱状图
aibujin的博客
05-16 1万+
echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画
echarts之横式柱状图
zxctime的博客
06-25 4632
echarts之横式柱状图 效果图 原理 设置x轴为不显示，只显示y轴 设置两个y轴，一个显示柱子，另一个只显示柱子的边框 通过设置两个y轴柱子的层次度，使得看起来像是一个柱子 该实例是在官方例子的基础上修改的 官网例子地址：https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category 简单效果图： 柱状图颜色可以自定义，数据为虚拟数据 option = { // 指定图形与Dom距离 grid: {
Echarts横向柱形图
weixin_43273592的博客
03-18 791
实际上就是设置两个y轴，第一个显示底色柱子，另一个只显示真实数据的柱子,在这里只显示y轴,x轴不显示..
Echarts bar 柱状图超详细实战
时光足迹
08-26 1万+
在最近的项目中，有可视化图表的需求，第一时间就想到了Echarts和Hightcharts。 要用到的可视化图表都是比较常见的，Echarts文档和实例都比较全面，而且还是中文的，方便阅读，于是选择了Echarts。 Echarts的图表样式如果是自用，肯定是没啥问题的，但是 UI 肯定是不满意的，于是进行了一系列的样式调整… 安装及配置 前端框架为easywebpack-vue，使用的Echarts版本为^5.0.1 Echarts 官方文档: https://echarts.apache.org/zh/

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值