//var myChart = this.$echarts.init(document.getElementById("echart-twoline")); //vue
var myChart = echarts.init(document.getElementById("echart-twoline"));//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月','2月','3月', '4月'],
axisLine: {/x轴线的颜色以及宽度
show: true,
lineStyle: {
color: "rgba(219,225,255,1)",
width: 0,
type: "solid"
}
},
axisTick: {
show: false,
},
axisLabel: {//x轴文字的配置
show: true,
textStyle: {
color: "rgba(219,225,255,1)",
}
},
splitLine: {//分割线配置
show:false,
lineStyle: {
color: "rgba(219,225,255,1)",
}
}
}],
yAxis: [{
type: 'value',
name:"单位:人",//y轴上方的单位
nameTextStyle:{//y轴上方单位的颜色
color:'#151515'
},
axisLabel: {//y轴文字的配置
textStyle: {
color: "rgba(219,225,255,1)",
margin: 15
},
// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
},
axisTick: {
show: false,
},
axisLine: {//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "rgba(219,225,255,1)",
width: 1,
type: "solid"
},
},
splitLine: {//分割线配置
show:false,
lineStyle: {
color: "rgba(219,225,255,1)",
}
}
}],
series: [{
name: '计划劳务资源',
type: 'bar',
data: [38,38,42,48],
barWidth: 10, //柱子宽度
barGap: .5, //柱子之间间距
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(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.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 242, 159, 1)'
}, {
offset: 1,
color: 'rgba(76, 240, 254, 1)'
}]),
opacity: 1,
}
}
}]
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
echarts-x轴 y轴配置(字体颜色,线的颜色,分割线,y周单位颜色)
原创wx6409a261df68a 博主文章分类:echarts ©著作权
文章标签 echart echarts-x轴 y轴配置 分割线 ci jquery 文章分类 Html/CSS 前端开发
©著作权归作者所有:来自51CTO博客作者wx6409a261df68a的原创作品,请联系作者获取转载授权,否则将追究法律责任

提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Python获取颜色RGB值
Python获取颜色RGB值
Python 图像处理 屏幕截图 -
echarts 去掉Y轴分割线
splitLine: { show: false, //去掉Y轴分割线 lineStyle: { color: "#57617B" } }
echarts 去掉Y轴分割线 echarts 去掉Y轴分割线 经验分享 -
echarts X轴Y轴标识线
如果要设置成X轴Y轴颜色不同 就要分开写。
echarts 前端 javascript 实线