echarts 定义样式文字
最近一年在做 用到echarts 一些归纳和记录
先附上效果图
var xAxis=["辅导","协作","授权","达至最佳绩效","影响力"];
var dataPretest=[3,4,4,4,4];
var dataPosttest=[3,3,5,6,4];
var options={
tooltip: {
trigger: false,
},
legend: {
x: '80%',
y: 'top',
icon: 'roundRect',
textStyle: {
color: '#84819E',
fontSize:20
},
data:['学习前','学习后']
},
xAxis:{
type: 'category',
name: '能力',
max:8,
nameTextStyle:{
color:'#302e60',
fontSize:20
},
data: xAxis,
axisLine: {
lineStyle: {
width: 1,
color: '#d6dbf1'
}
},
axisLabel: {
textStyle: {
color: '#302e60',
}
},
splitLine: {
show: false,
lineStyle: {
width: 1,
color: '#f7f8fc'
}
},
axisTick: {
show: false
}
},
yAxis: [{
type: 'value',
name: '能力等级',
nameTextStyle:{
color:'#302e60',
fontSize:20
},
min: 0,
max: 6.5,
interval: 1,
axisLabel: {
formatter:value => {
if(value==1){
return '{a|'+'薄弱'+'}';
}else if(value==2){
return '{a|'+'有限'+'}';
}else if(value==3){
return '{b|'+'一般'+'}';
}else if(value==4){
return '{b|'+'良好'+'}';
}else if(value==5){
return '{c|'+'优秀'+'}';
}else if(value==6){
return '{c|'+'卓越'+'}';
}else if(value==0){
return '{d|'+''+'}';
}
},
rich:{
a:{color:'#ff7d7d',fontSize:18,},
b:{color:'#efbe28',fontSize:18,},
c:{color:'#2acba6',fontSize:18,},
d:{color:'#fff',fontSize:18,},
}
},
axisLine: {
lineStyle: {
width: 1,
color: '#d6dbf1'
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
color: '#f7f8fc'
}
},
axisTick: {
show: false
},
}],
series: [{
name: '学习前',
type: 'bar',
barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
barCategoryGap:'40%',/*多个并排柱子设置柱子之间的间距*/
itemStyle: {
normal: {
show: true,
color: '#90dcff',
}
},
label:{
normal: {
show: true,
position: 'top',
formatter:function(params){
if(params.value==1){
return '{a|'+'薄弱'+'}';
}else if(params.value==2){
return '{a|'+'有限'+'}';
}else if(params.value==3){
return '{b|'+'一般'+'}';
}else if(params.value==4){
return '{b|'+'良好'+'}';
}else if(params.value==5){
return '{c|'+'优秀'+'}';
}else if(params.value==6){
return '{c|'+'卓越'+'}';
}else if(params.value==0){
return '{d|'+''+'}';
}
},
rich:{
a:{color:'#ff7d7d',fontSize:18,},
b:{color:'#efbe28',fontSize:18,},
c:{color:'#2acba6',fontSize:18,},
d:{color:'#fff',fontSize:18,},
},
}
},
data:dataPretest
}, {
name: '学习后',
type: 'bar',
barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
barCategoryGap:'40%',/*多个并排柱子设置柱子之间的间距*/
itemStyle: {
normal: {
show: true,
color: '#7297e6',
}
},
label:{
normal: {
show: true,
position: 'top',
formatter:function(params){
if(params.value==1){
return '{a|'+'薄弱'+'}';
}else if(params.value==2){
return '{a|'+'有限'+'}';
}else if(params.value==3){
return '{b|'+'一般'+'}';
}else if(params.value==4){
return '{b|'+'良好'+'}';
}else if(params.value==5){
return '{c|'+'优秀'+'}';
}else if(params.value==6){
return '{c|'+'卓越'+'}';
}else if(params.value==0){
return '{d|'+''+'}';
}
},
rich:{
a:{color:'#ff7d7d',fontSize:18,},
b:{color:'#efbe28',fontSize:18,},
c:{color:'#2acba6',fontSize:18,},
d:{color:'#fff',fontSize:18,},
},
}
},
data:dataPosttest
}
]
};