//var myChart = this.$(("echart-container_0")); //vue
var myChart = (("echart-container_0"));//jquery
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['已投票', "放弃投票"],
//align: 'left',
right: 10,
textStyle: {
color: "#fff"
},
itemWidth: 14,
itemHeight: 10,
itemGap: 13,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['1号','18号','22号', '29号'],
axisLine: {/x轴线的颜色以及宽度
show: true,
lineStyle: {
color: "#fff",
width: 0,
type: "solid"
}
},
axisTick: {
show: false,
},
axisLabel: {//x轴文字的配置
show: true,
textStyle: {
color: "#fff",
}
},
splitLine: {//分割线配置
show:false,
lineStyle: {
color: "#fff",
}
}
}],
yAxis: [{
type: 'value',
name:"单位:个",//y轴上方的单位
nameTextStyle:{//y轴上方单位的颜色
color:'#fff'
},
axisLabel: {//y轴文字的配置
textStyle: {
color: "#fff",
margin: 15
},
// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
},
axisTick: {
show: false,
},
axisLine: {//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
},
},
splitLine: {//分割线配置
show:false,
lineStyle: {
color: "#fff",
}
}
}],
series: [{
name: '已投票',
type: 'bar',
data: [38,38,42,48],
barWidth: 10, //柱子宽度
barGap: .5, //柱子之间间距
itemStyle: {
normal: {
color: new this.$(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 153, 239, 0.8)'
}, {
offset: 1,
color: 'rgba(66, 187, 255, 1)'
}]),
opacity: 1,
}
}
}, {
name: '放弃投票',
type: 'bar',
data: [40, 30, 42, 50],
barWidth: 10,
barGap: .5,
itemStyle: {
normal: {
color: new this.$(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 242, 159, 1)'
}, {
offset: 1,
color: 'rgba(76, 240, 254, 1)'
}]),
opacity: 1,
}
}
}]
};
(option);
("resize", () => {
();
});
相关文章
- Echarts-修改x轴 y轴字体颜色、线的颜色、y轴单位字体颜色
- echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合,X轴的颜色,X轴字体颜色,调整柱子颜色,调整小图标图例的大小和位置,鼠标hover时候的样式,用纵向阴影
- echarts x轴或y轴文本字体颜色改变
- 如何将x轴和y轴标签的字体大小和颜色改为R中的plot函数?
- 如何将x轴和y轴标签的字体大小和颜色改为R中的plot函数?
- Echart 改变X轴、Y轴、折线的颜色和数值
- VTK中改变默认的vtkAxesActor坐标轴上X,Y,Z的字体颜色,从白色改为其他颜色
- echarts修改X、 Y坐标轴字体的颜色