成品
先把框架搭好（我是直接在echarts官网的实例里直接编辑的）
option = {
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13']
},
yAxis: {
type: 'value'
},
series: [{
name: '柱1',
type: 'bar',
data: [1779,31,30,19,16,14,7,5,2,1,1,1,1]
},
{
name: '柱2',
type: 'bar',
data:[1686,31,30,19,16,14,7,5,2,1,1,1,1]
},
{
name: '线',
type: 'line',
lineStyle: {
type: "dashed",
},
label: {
show: true,
formatter: (value, index) => {
return value.data + "%";
},
},
data:[94.77,100,100,100,100,100,100,100,100,100,100,100,100]
}]
};
将X轴的标签颜色改变，在xAxis里的data配置textStyle
xAxis: [
{
type: 'category',
data: [{value :"1",textStyle:{color:'red'}},
{value :"2",textStyle:{color:'black'}},
{value :"3",textStyle:{color:'red'}},
{value :"4",textStyle:{color:'red'}},
{value :"5",textStyle:{color:'black'}},
{value :"6",textStyle:{color:'black'}},
{value :"7",textStyle:{color:'black'}},
{value :"8",textStyle:{color:'red'}},
{value :"9",textStyle:{color:'red'}},
{value :"10",textStyle:{color:'black'}},
{value :"11",textStyle:{color:'black'}},
{value :"12",textStyle:{color:'red'}},
{value :"13",textStyle:{color:'red'}},
],
axisLabel:{
interval:0, //将横坐标全部显示出来，有时候刻度多了名字会隐藏一部分
}
}
]
颜色自己随意定，也支持十六进制颜色码
主角登场
配置自定义内容，加上属性graphic
graphic: [{
type: 'group',
left: 'center',
bottom: 30,
width:100,
height:100,
children:[{
type: 'rect', //矩形
left: '0',
bottom: 50,
shape:{
width:'27',
height:'16',
},
style:{
fill:"red"
}
},{
type: 'text',
left: 35,
top:37,
bottom: 35,
style:{
text:"已授权",
fill:'red'
}
},{
type: 'rect',
left: '82',
bottom: 50,
shape:{
width:'27',
height:'16',
},
style:{
fill:"black"
}
},{
type: 'text',
left: '115',
top:37,
style:{
text:"未授权"
}
}]
}]
最好在外层套上一个group，这样里面的内容也好定位
将大小位置摆好之后效果是这样：
最后再加亿点点细节
完整配置
option = {
title:{
text:'某某表',
x:'center',
//textAlign:'center',
top:30
},
color: ["#7979d8","#9de0ff", "#ff6600",],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid:{
top:'100',
left:'50',
right:'50',
bottom:100
},
legend: {
data: ['柱1','柱2','线'],
top:'60'
},
toolbox:{
feature:{
saveAsImage:{
pixelRatio:1.1,
}
}
},
label:{
show:true,
position:"top"
},
xAxis: [
{
type: 'category',
data: [{value :"1",textStyle:{color:'red'}},
{value :"2",textStyle:{color:'black'}},
{value :"3",textStyle:{color:'red'}},
{value :"4",textStyle:{color:'red'}},
{value :"5",textStyle:{color:'black'}},
{value :"6",textStyle:{color:'black'}},
{value :"7",textStyle:{color:'black'}},
{value :"8",textStyle:{color:'red'}},
{value :"9",textStyle:{color:'red'}},
{value :"10",textStyle:{color:'black'}},
{value :"11",textStyle:{color:'black'}},
{value :"12",textStyle:{color:'red'}},
{value :"13",textStyle:{color:'red'}},
],
axisLabel:{
interval:0,
}
}
],
yAxis: [
{
type: 'value',
max: 2000,
interval: 2000 / 5,
},{
type: "value",
axisLabel: {
show:true,
formatter: (e)=>{
console.log(e)
if (e<=100&&e>=0) {
return e+'%'
}
},
},
max: 400,
min:-100,
interval: 500 / 5,
},
],
series: [
{
name: '柱1',
type: 'bar',
yAxisIndex: 0,
data: [1779,31,30,19,16,14,7,5,2,1,1,1,1]
},
{
name: '柱2',
type: 'bar',
yAxisIndex: 0,
data:[1686,31,30,19,16,14,7,5,2,1,1,1,1]
},
{
name: '线',
type: 'line',
yAxisIndex: 1,
lineStyle: {
type: "dashed",
},
label: {
show: true,
formatter: (value, index) => {
return value.data + "%";
},
},
data:[94.77,100,100,100,100,100,100,100,100,100,100,100,100]
},
],
graphic: [
{
type: 'group',
left: 'center',
bottom: 40,
width:100,
height:100,
children:[
{
type: 'rect', //矩形
left: '0',
bottom: 50,
shape:{
width:'27',
height:'16',
r:[3,3,3,3],//圆角
},
style:{
fill:"red"
}
},
{
type: 'text',
left: 35,
top:37,
bottom: 35,
style:{
text:"已授权",
fill:'red'
}
},{
type: 'rect',
left: '82',
bottom: 50,
shape:{
width:'27',
height:'16',
r:[3,3,3,3],
},
style:{
fill:"black"
}
},
{
type: 'text',
left: '115',
top:37,
style:{
text:"未授权"
}
}
]
},
],
};
一个刚踏入前端的小菜鸡，第一遍文章，请各位老爷多多提意见呀
