解决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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
js中有关IE版本检测
Jan 04 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
微信小程序实现底部导航
Nov 05 Javascript
JavaScript实现轮播图效果
Oct 30 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学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
js跳转页面方法总结
2014/01/29 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
python多线程用法实例详解
2015/01/15 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
班组长竞聘书
2014/03/31 职场文书
会计毕业生自荐书
2014/06/12 职场文书
助学感谢信范文
2015/01/21 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
2016年元旦主持词
2015/07/06 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
电力培训学习心得体会
2016/01/11 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL