![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7ca2b4afbd6388bacc8e7250eb89d527.png)
let params = [{name:'小明',value:"1"},{name:'数量',value:"2"}]
let params1 = [{name:'小白',value:"0.5"},{name:'数量',value:"5"}]
var mapBoxOption = {
//改变绘图的位置
grid:{
left:'5%',
top:'5%',
right:'5%',
bottom:'20%'
},
//提示工具配置
tooltip: {
//设置选中背景高亮
axisPointer: {
// 默认为直线,可选为:'line' | 'shadow'
type: 'shadow',
shadowStyle: {
color: '#2F596F',
opacity: .5
},
},
trigger: 'axis',
//是否永远显示提示框内容,默认情况下在移出可触发提示框区域后 一定时间 后隐藏,设置为 true 可以保证一直显示提示框内容。
alwaysShowContent: false,
formatter: function(params){
return params[0].value + "-----" +params[1].value
}
},
//x轴配置
xAxis: {
type: 'category',
//解决x轴的label隔一个显示一个的问题
interval:0,
data: ["1月","2月"],
//设置轴线的属性
axisLine:{
lineStyle:{
color:'#00FFD5',
}
},
axisLabel:{
color:"red"
}
},
//y轴配置
yAxis: {
type: 'value',
splitLine:{
show:false,
lineStyle:{
color:'#00FFD5'
}
},
axisLine:{
lineStyle:{
color:'#00FFD5',
}
},
axisLabel:{
color:"blue"
}
},
series: [{
data: params,
type: 'bar',
// barWidth:'40%',
barWidth: 5, //柱子宽度
barGap: 0, //柱子之间间距
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#089FFF"
}, {
offset: 1,
color: "#166BB9"
}], false)
}
}
},
// 一个值对应多个柱状图
{
data: params1,
type: 'bar',
// barWidth:'40%',
barWidth: 5, //柱子宽度
barGap: 0, //柱子之间间距
itemStyle: {
normal: {
color:"red"
}
}
}
]
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5056f25ba930e370799d13cc7d319796.png)
let data = [
{stack:true,
name:'大米',
data:["1","2"],
color:new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#089FFF"
},
{
offset: 1,
color: "#166BB9"
}], false),
type:"bar"},
{stack:true,name:'小米',data:[3,4],color:"red",type:"bar"}]
var mapBoxOption = {
//改变绘图的位置
grid:{
left:'5%',
top:'5%',
right:'5%',
bottom:'20%'
},
//提示工具配置
tooltip: {
//设置选中背景高亮
axisPointer: {
// 默认为直线,可选为:'line' | 'shadow'
type: 'shadow',
shadowStyle: {
color: '#2F596F',
opacity: .5
},
},
trigger: 'axis',
//是否永远显示提示框内容,默认情况下在移出可触发提示框区域后 一定时间 后隐藏,设置为 true 可以保证一直显示提示框内容。
alwaysShowContent: false,
// formatter: function(params){
// return params[0].value + "-----" +params[1].value
// }
},
//x轴配置
xAxis: {
type: 'category',
//解决x轴的label隔一个显示一个的问题
// interval:0,
data: ["1月","2月"],
//设置轴线的属性
axisLine:{
lineStyle:{
color:'#00FFD5',
}
},
axisLabel:{
color:"red"
}
},
//y轴配置
yAxis: {
type: 'value',
splitLine:{
show:false,
lineStyle:{
color:'#00FFD5'
}
},
axisLine:{
lineStyle:{
color:'#00FFD5',
}
},
axisLabel:{
color:"blue",
formatter: '{value}',
}
},
series: data
}