echarts柱状图的样式调整及应用

本文介绍: /symbolOffset: [0,-5],//轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；data: [“Mon“, “Tue“, “We d“, “Thu”, “Fr i“, “Sa t“, “Sun”], //坐标轴上显示的文字。data: [820, 932, 901, 934, 1290, 1330, 1320], //y轴数据。color: ‘rgba(85, 88, 95, 1)’ //x轴坐标的文字颜色。

一、在项目中引进echarts

echarts 官网：快速上手 – Handbook – Apache ECharts，点击左侧导航栏的“入门篇”中的“在项目中引入 Ap a ch e ECha rt s”可在项目中引进echarts

二、查看调整样式的代码

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

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

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

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

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

4、m a rk line的文字的颜色、大小，边距修改

四：代码部分

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

splitLin e: { //坐标轴背景虚线
show: true, //显示
 lineStyle: { //坐标轴背景线
type: ‘d a sh e d‘, //虚线
},
},

data: [“Mon“, “Tue“, “We d“, “Thu”, “Fr i“, “Sat”, “Sun”], //坐标轴上显示的文字
 axisLab el: { //坐标轴上文字样式设置
 show: true, //显示x轴上的文字
 int e r val: 0, //x轴坐标的文字间隔
 textStyle: { //x轴坐标的文字样式
fontSize: 12, //x轴坐标的文字大小
color: ‘rgba(85, 88, 95, 1)’ //x轴坐标的文字颜色
},
padding: [0, 0, 0, 50] //坐标轴名字向右偏移
},
nameLocat ion: ‘end‘, //标题位置
 axisTic k: false,// 隐藏刻度代码
axisLine: { //箭头
 symbol: [‘none‘, ‘triangle’], //只在末端显示箭头
 symbolOffset: 30, // 偏移距离
 symbolSize: [10, 15], // 箭头宽高
 lineStyle: { //x轴轴线样式
shadowOffsetX: 30, //利用阴影进行反向延长
shadowColo r: ‘#d3d5d9′, //设置阴影的颜色
color: ‘#d3d5d9’, // 坐标轴颜色
},
},
},
yAxis: {
type: ‘value‘,
splitLine: { //坐标轴虚线
show: true,
lineStyle: {
type: ‘dashed’
},
},
axisTic k: false,// 隐藏刻度代码
axisLab el: { //坐标轴上文字
show: true,
textStyle: { //y轴坐标的文字样式
fontSize: 14, //y轴坐标的文字大小
color: ‘rgba(85, 88, 95, 1)’ //y轴坐标的文字颜色
},
},
axisLine: { //箭头
sym bol: [‘none‘, ‘triangle’], //只在末端显示箭头
sym bolOffset: 30, // 偏移距离
sym bolSize: [10, 15], // 箭头宽高
 lineStyle: { //y轴轴线样式
shadowOffsetY: -30, //利用阴影进行反向延长
shadowColo r: ‘#d3d5d9’, //设置阴影的颜色
color: ‘#d3d5d9’, // 坐标轴颜色
},
},
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320], //y轴数据
 type: “b ar“, //图形类型：柱状图是bar
markLine: { //图表标线
lineStyle: { //图表标线样式
ca p: “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’, //文字颜色
fontWeig ht: ‘bold’,
padd in g:[0,0,0,10], //文字边距
}
},
size: 30
}
}, {
lineStyle: { //图表标线样式
color:”#FF6C4B” //图表标线颜色
},
yAxis: 1100,
symbolSize: 12, //轴线两边的箭头的大小
label: {
normal: {
show: true,
formatter: ‘是’, //图表标线文字内容
 textStyle: { //图标标线的文字样式
fontSize: 12, //文字大小
color: ‘#55585f’, //文字颜色
fontWeig ht: ‘bold’,
padding:[0,0,0,10],//文字边距
}
},
type: “average”,
},

}],
}
}]
}