解决echarts 一条柱状图显示两个值,类似进度条的问题


Posted in Javascript onJuly 20, 2020

我就废话不多说说了,大家还是直接看代码吧~

var allUseDayChartTwo;
function allUseDayChartTwoFun(obj,xdata,ydata,zdata){
	allUseDayChartTwo = echarts.init(obj);
	var category = xdata;
	var lineData = zdata;
	var barData = ydata;
	option = {
//		backgroundColor:'#F00',
	  tooltip: {
	    trigger: 'axis',
	    backgroundColor:'rgba(0,0,0,.5)',
	    axisPointer: {
	      type: 'shadow',
	      label: {
	        show: true,
	        backgroundColor: '#F1F1F1',
	        color:'#5A5A5A'
	      }
	    },
	    confine: true
	  },
	  grid: {
      left: '1%',
      	right: '3%',
     	bottom: '5%',
    	top: '5%',
    	containLabel: true
    },
	  xAxis: {
	    axisLine: {
	      lineStyle: {
	        color: '#B4B4B4'
	      }
	    },
	    axisTick:{
	      show:false,
	    },
	    axisLine:{
        show:false
      },
      axisTick:{
        show:false
      },
      splitLine:{
        show:false
      },
			axisLabel:{
	    	textStyle: {
          fontSize: 14,
        },
	      formatter:'{value} ',
	    },
 
	  },
	  yAxis: [{
			data: category,
	    splitLine: {show: false},
	    axisLine: {
	      lineStyle: {
	        color: '#B4B4B4',
	      }
	    },
	    axisLabel:{
	    	textStyle: {
          fontSize: 14,
//         color: '#B2B2B2'
        },
	      formatter:'{value} ',
	    },
	    axisLine:{
        show:false
      },
      axisTick:{
        show:false
      },
      splitLine:{
        show:false
      }
	  }
//	  ,{
//			data: category,
//	    splitLine: {show: false},
//	    axisLine: {
//	      lineStyle: {
//	        color: '#B4B4B4',
//	      }
//	    },
//	    axisLabel:{
//	      formatter:'{value} ',
//	    }
//	  }
	  ],
	  series: [{
	    name: '用量',
	    type: 'bar',
	    barWidth: 15,
	    barGap: '-100%',
	    itemStyle: {
	      normal: {
	        barBorderRadius: 5,
	        color: new echarts.graphic.LinearGradient(
	          0, 0, 0, 1,
	          [
	            {offset: 0, color: 'rgba(88,228,88,0.8)'},
	            {offset: 1, color: 'rgba(88,228,88,0.8)'}
	          ]
	        )
	      }
	    },
	    data: barData
	  },{
	    name: '阈值',
	    type: 'bar',
	    barGap: '-100%',
	    barWidth: 15,
	    itemStyle: {
	      normal: {
	        barBorderRadius: 5,
	        color: new echarts.graphic.LinearGradient(
	          0, 0, 0, 1,
	          [
	            {offset: 0, color: 'rgba(234,234,234,0.8)'},
	            {offset: 0.2, color: 'rgba(234,234,234,1)'},
	            {offset: 1, color: 'rgba(234,234,234,1)'}
	          ]
	        )
	      }
	    },
	    z: -12,
	    data: lineData
	  }
//	  ,{
//	    name: '背景',
//	    type: 'bar',
//	    barGap: '-100%',
//	    barWidth: 15,
//	    itemStyle: {
//	      normal: {
//	        barBorderRadius: 5,
//	        color: new echarts.graphic.LinearGradient(
//	          0, 0, 0, 1,
//	          [
//	            {offset: 0, color: 'rgba(0,0,0,0.2)'},
//	            {offset: 0.2, color: 'rgba(0,0,0,0.)'},
//	            {offset: 1, color: 'rgba(0,0,0,0.24)'}
//	          ]
//	        )
//	      }
//	    },
//	    z: -20,
//	    data: [50,50,50,50,50,50,50,50,50]
//	  }
	  ]
	};
	allUseDayChartTwo.setOption(option);
}

解决echarts 一条柱状图显示两个值,类似进度条的问题

补充知识:echarts 柱状图实现进度条,进行数据驱动

echarts 柱状图实现进度条,进行数据驱动

效果图

解决echarts 一条柱状图显示两个值,类似进度条的问题

直接写上配置项,根据自己的需求更改

option = {
    backgroundColor: '#0a1d53',
    grid: {
     left: '2%',
     top: '2%',
     right: '2%',
     bottom: '2%',
     containLabel: true
    },
    tooltip: {
     trigger: 'item',
     axisPointer: {
      // 坐标轴指示器,坐标轴触发有效
      type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
     }
    },
    textStyle: {
     color: '#fff'
    },
    xAxis: {
     show: false,
     type: 'value',
     // 设置x轴显示几段
     min: 0,
     max: 100,
     inverse: true,
     splitLine: {
      show: false
     },
     interval: 50
    },
    yAxis: {
     show: true,
     type: 'category',
     data: [
      '周一',
      '周二',
      '周三',
      '周五',
      '周五',
      '周六',
      '周日'
     ],
     axisTick: { show: false },
     axisLine: {
      show: false,
      lineStyle: {
       color: 'red'
      }
     },
     splitLine: {
      show: false
     },
     inside: true,
     textStyle: {
      color: '#000c45'
     }
    },
    series: [
     {
      type: 'bar',
      itemStyle: {
       normal: {
        color: '#000c45', // 定义柱形的背景色
        barBorderRadius: [5, 5, 5, 5] // 定义背景柱形的圆角
       }
      },
      barGap: '-100%', // 设置柱形重合的重要步骤
      data: [100, 100, 100, 100, 100, 100, 100],
      z: 0,
      silent: true,
      animation: false, // 关闭动画效果
      barWidth: '10px' // 设置柱形宽度
     },
     {
      type: 'bar',
      data: [50, 50, 50, 50, 50,50, 50],
      barWidth: '10px',
      barGap: '-100%', // 设置柱形重合的重要步骤
      label: {
       normal: {
        show: true, //是否显现,不显示的话设置成false
        position: "left", //显示的位置
        distance: 10, //距离侄子的值 // label要显示的值比如: 20%
        formatter: function(param) {
         return param.value;
        },
        textStyle: {
         //这个地方颜色是支持回调函数的这种的,如果是一种颜色则可以写成: color :'#1089E7'
         color: function(params) {
          var num = myColor.length; //得到myColor颜色数组的长度
          return myColor[params.dataIndex % num]; //返回颜色数组中的一个对应的颜色值
         },
         fontSize: "16"
        }
       }
      },
      itemStyle: {
       normal: {
        color: function (params) {
         var colorList = [
          '#bbb743',
          '#bbae43',
          '#bb9d43',
          '#bb8c43',
          '#bb7e43',
          '#bb5c43',
          '#bb4643'
         ]
         return colorList[params.dataIndex]
        },
        barBorderRadius: [5, 5, 5, 5] // 定义柱形的圆角
       }
      }
     }
    ]
   }

以上这篇解决echarts 一条柱状图显示两个值,类似进度条的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
简单了解前端渐进式框架VUE
Jul 20 #Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 #Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 #Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 #Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 #Javascript
详细分析vue表单数据的绑定
Jul 20 #Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 #Javascript
You might like
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
JS变量及其作用域
2017/03/29 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Python作用域用法实例详解
2016/03/15 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
使用Python读取大文件的方法
2018/02/11 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
项目建议书格式
2014/03/12 职场文书
会议主持词
2014/03/17 职场文书
工程质检员岗位职责
2015/04/08 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis