解决echarts 一条柱状图显示两个值,类似进度条的问题
更新时间:2020年7月20日 21:25 点击:3868
我就废话不多说说了,大家还是直接看代码吧~
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 柱状图实现进度条,进行数据驱动
效果图
直接写上配置项,根据自己的需求更改
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 一条柱状图显示两个值,类似进度条的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持猪先飞。
上一篇: vue通过过滤器实现数据格式化
下一篇: 简单了解前端渐进式框架VUE
相关文章
- 这篇文章主要介绍了matplotlib bar()实现百分比堆积柱状图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-24
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
ant design中upload组件上传大文件,显示进度条进度的实例
这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考,具体如下:这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样。运行效果截图如下:在线演示地址如下:http://demo.jb51.net...2015-10-30
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
- 这篇文章主要介绍了C#实现带进度条的ListView 的相关资料,需要的朋友可以参考下...2020-06-25
- 本篇文章主要介绍了nodejs 终端打印进度条实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-04-27
- APC模块,它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来, 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用...2015-10-30
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- php不具备实时上传进度条功能,如果想有这种功能我们一般会使用ajax来实现,但是php提供了一个apc,它就可以与php配置实现上传进度条功能。 主要针对的是window上的应用。 1.服务器要支持apc扩展,没有此扩展的话,下载一个扩...2015-10-30
- 这篇文章主要介绍了详解Javascript利用echarts画空气质量地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-10-11
- 众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下...2021-08-06
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01- php 大文件带进度的上传,一直是一个令php程序员很苦恼的问题。查询baidu 、Google ,大体做带进度的上传方式为:flash+php,socket,apc+php等,下面我介绍了apc +php+ajax制作的带进度的上传,并贴出源码,希望对大家有用。 Altern...2015-10-30
echarts实现获取datazoom的起始值(包括x轴和y轴)
这篇文章主要介绍了echarts实现获取datazoom的起始值(包括x轴和y轴),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20在echarts中图例legend和坐标系grid实现左右布局实例
这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17Bootstrap进度条与AJAX后端数据传递结合使用实例详解
这篇文章主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下...2017-04-27如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息,通过本文给大家介绍如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,需要的朋友参考下吧...2016-02-26