解决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 相关文章推荐
js DataSet数据源处理代码
Mar 29 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
js实现小时钟效果
Mar 25 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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
使用php验证复选框有效性的示例
2013/11/13 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
smarty中常用方法实例总结
2015/08/07 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
JavaScript延迟加载
2021/03/09 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
大跃进口号
2014/06/16 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android