echarts柱状图的样式调整及应用-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts柱状图的样式调整及应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、在项目中引进echarts

echarts官网：快速上手 - Handbook - Apache ECharts，点击左侧导航栏的“入门篇”中的“在项目中引入 Apache ECharts”可在项目中引进echarts

二、查看调整样式的代码

在官网页头中的“文档”下方的“配置项手册”中可查看调整样式的代码

三、以下代码涉及到的问题：

1、延长x轴、y轴轴线、修改轴线颜色并给轴线添加箭头（详细代码见axisLine部分）；

2、x轴、y轴文字颜色、大小修改；

3、平行于x轴的markline的起点和终点图标的样式和大小调节，以及markline线条宽度和颜色的修改；

4、markline的文字的颜色、大小，边距修改

四：代码部分

option = {
xAxis: { //x轴
type: "category",

splitLine: { //坐标轴背景虚线
show: true, //显示
lineStyle: { //坐标轴背景线
type: 'dashed', //虚线
},
},

data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //坐标轴上显示的文字
axisLabel: { //坐标轴上文字样式设置
show: true, //显示x轴上的文字
interval: 0, //x轴坐标的文字间隔
textStyle: { //x轴坐标的文字样式
fontSize: 12, //x轴坐标的文字大小
color: 'rgba(85, 88, 95, 1)' //x轴坐标的文字颜色
},
padding: [0, 0, 0, 50] //坐标轴名字向右偏移
},
nameLocation: 'end', //标题位置
axisTick: false,// 隐藏刻度代码
axisLine: { //箭头
symbol: ['none', 'triangle'], //只在末端显示箭头
symbolOffset: 30, // 偏移距离
symbolSize: [10, 15], // 箭头宽高
lineStyle: { //x轴轴线样式
shadowOffsetX: 30, //利用阴影进行反向延长
shadowColor: '#d3d5d9', //设置阴影的颜色
color: '#d3d5d9', // 坐标轴颜色
},
},
},
yAxis: {
type: 'value',
splitLine: { //坐标轴虚线
show: true,
lineStyle: {
type: 'dashed'
},
},
axisTick: false,// 隐藏刻度代码
axisLabel: { //坐标轴上文字
show: true,
textStyle: { //y轴坐标的文字样式
fontSize: 14, //y轴坐标的文字大小
color: 'rgba(85, 88, 95, 1)' //y轴坐标的文字颜色
},
},
axisLine: { //箭头
symbol: ['none', 'triangle'], //只在末端显示箭头
symbolOffset: 30, // 偏移距离
symbolSize: [10, 15], // 箭头宽高
lineStyle: { //y轴轴线样式
shadowOffsetY: -30, //利用阴影进行反向延长
shadowColor: '#d3d5d9', //设置阴影的颜色
color: '#d3d5d9', // 坐标轴颜色
},
},
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320], //y轴数据
type: "bar", //图形类型：柱状图是bar
markLine: { //图表标线
lineStyle: { //图表标线样式
cap: "butt",
type: "solid",
width:2, //线宽
},
symbol: ["triangle","diamond"], //起点和终点图标
symbolRotate:-90, //旋转-90度
symbolSize: 20,//起点和终点图标的大小也可用数组控制[宽度（垂直坐标轴方向，高度（平行坐标轴方向）]
data: [{
lineStyle: { //图表标线样式
color:"#FEBD68", //图表标线颜色
},
yAxis: 1000,
//symbolOffset: [0,-5],//轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；如果是数字，表示这两个箭头使用同样的偏移。
symbolSize: 12, //轴线两边的箭头的大小
label: {
normal: {
show: true,
formatter: '倾向', //图表标线文字内容
height: 20,
textStyle: { //图表标线的文字样式
fontSize: 12, //文字大小
color: '#55585f', //文字颜色
fontWeight: 'bold',
padding:[0,0,0,10], //文字边距
}
},
size: 30
}
}, {
lineStyle: { //图表标线样式
color:"#FF6C4B" //图表标线颜色
},
yAxis: 1100,
symbolSize: 12, //轴线两边的箭头的大小
label: {
normal: {
show: true,
formatter: '是', //图表标线文字内容
textStyle: { //图标标线的文字样式
fontSize: 12, //文字大小
color: '#55585f', //文字颜色
fontWeight: 'bold',
padding:[0,0,0,10],//文字边距
}
},
type: "average",
},

}],
}
}]
}