option = {
tooltip: {
trigger: 'axis', //触发类型;轴触发,axis则鼠标hover到一条柱状图显示全部数据,item则鼠标hover到折线点显示相应数据,
axisPointer: {//坐标轴指示器,坐标轴触发有效,
type: 'shadow',//默认为line,line直线,cross十字准星,shadow阴影
},
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
itemWidth: 10,
top: 15,
right: 25,
textStyle: {
color: '#fff',
},
},
backgroundColor: '#0f375f',
animation: false,
grid: {
top: "25%",
bottom: "10%"//也可设置left和right设置距离来控制图表的大小
},
xAxis: {
data: xLabel,
axisLine: {
show: true, //隐藏X轴-轴线
lineStyle: {
color: '#11417a'
}
},
splitLine: {
lineStyle: {
type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
}
},
axisTick: {
show: false //隐藏X轴-刻度齿
},
axisLabel: {
show: true,
interval: 0,
rotate: 32, // 文字旋转度数
margin: 14,// 改变label的位置
fontSize: 14, //文字大小
textStyle: {
color: "#A3C0DF" //X轴文字颜色
}
},
},
yAxis: [
{
type: "value",
scale: true, // 自动优化刻度区间,根据最大最小值显示刻度!
gridIndex: 0,
min: 0,
max: 100,
interval: 25,// 设置刻度间隔
splitNumber: 4,// 分割成4个份,每个点的间距就是25
splitLine: {
show: true,
lineStyle: {
color: '#113763',
width: 1
},
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#11417a'
}
},
axisLabel: {
show: true,
margin: 14,
fontSize: 14,
textStyle: {
color: "#A3C0DF" //X轴文字颜色
}
},
},
],
series: [
{
name: "主营业务",
type: "bar",
barWidth: 20,//柱状图宽度
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#07ecd9"
},
{
offset: 1,
color: "#034881"
}
])
}
},
data: [20, 80, 100, 40, 34, 90, 60],
z: 10,// 控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z 相比 zlevel 优先级更低,而且不会创建新的 Canvas。
zlevel: 0,
label: {
normal: {
show: true,
rotate: 90, // label文字-旋转度数
color: '#333',// label文字-颜色
position: 'top',// label文字-位置
distance: 15, // label文字-距离
formatter: function (param) { // label文字-显示自定义处理函数
return param.value
}
}
},
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal:{
color:"#0F375F"
}
},
symbolRepeat: "fixed",
symbolMargin: 6,
symbol: "rect",//折点处展示小图标
symbol: "none",//折点处不展示小图标
symbolClip: true,
symbolSize: [20, 2],
symbolPosition: "start",
symbolOffset: [0, -1],
// symbolBoundingData: this.total,
data: [20, 80, 100, 40, 34, 90, 60],
width: 25,
z: 0,
zlevel: 1,
},
]
};
echarts常用属性记录
于 2021-09-03 16:54:46 首次发布