首页 >> js开发 >> js解决echarts 一条柱状图显示两个值,类似进度条的问题js大全
js解决echarts 一条柱状图显示两个值,类似进度条的问题js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
我就废话不多说说了，大家还是直接看代码吧~
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);
}
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 柱状图实现进度条，进行数据驱动效果图直接写上配置项，根据自己的需求更改
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] // 定义柱形的圆角
}
}
}
]
}
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 一条柱状图显示两个值,类似进度条的问题就是小编分享给大家的全部内容了，希望能给大家一个参考。
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);
}
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 柱状图实现进度条，进行数据驱动效果图直接写上配置项，根据自己的需求更改
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] // 定义柱形的圆角
}
}
}
]
}
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 一条柱状图显示两个值,类似进度条的问题就是小编分享给大家的全部内容了，希望能给大家一个参考。
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
