var barWidth = 15;
var symbolSize = [barWidth, 10];
// var symbolOffsetT = ["-150%", -5]; //修改绿色柱子头部椭圆位置
var symbolOffsetB = [-30, 10]; //修改绿色柱子底部椭圆位置
var normalColor = "#94a1a9";
var fontSize = 10;
var datas = {
xdata: ['2016', '2017', '2018', '2019'],
yData1: [4200, 2220, 3910, 5340],
yData2: [3100, 2120, 3610, 5140],
yData3: [31, 212, 3610, 6140],
yData4: [5100, 2120, 4610, 3140],
yData5: [31, 21, 36, 51],
yData6: [66, 45, 74, 50],
yData7: [80, 35, 60, 25],
legendData: ['网络点数','已开工','巡查问题数','整改完成数','整改率' ,'开工率','问题占比'],
}
option = {
animation: false, //去除加载时缓动动画
legend: {
show: true,
selectedMode: false, //取消图例上的点击事件
data: datas.legendData
},
xAxis: {
axisLine: {
lineStyle: {
color: normalColor
}
},
axisTick: {
"show": false
},
axisLabel: {
textStyle: {
color: normalColor,
fontSize: fontSize
},
margin: 20
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: normalColor
}
},
data: datas.xdata,
},
yAxis: [{
type: 'value',
name: "质量网格数",
nameTextStyle: {
fontSize: fontSize
},
color: normalColor,
axisTick: {
"show": false
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: normalColor
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: normalColor,
fontSize: fontSize
}
},
axisLine: {
lineStyle: {
color: normalColor
}
},
},
{
type: 'value',
name: "比率分析",
nameTextStyle: {
fontSize: fontSize
},
color: normalColor,
axisTick: {
"show": false
},
splitLine: {
show: false,
},
axisLabel: {
formatter: '{value}%',
textStyle: {
color: normalColor,
fontSize: fontSize
}
},
axisLine: {
lineStyle: {
color: normalColor
}
},
}
],
series: [
// 网络点数
{ // 蓝色柱子
name: datas.legendData[0],
tooltip: {
show: true
},
type: 'bar',
barWidth: barWidth, //柱子宽度
barGap: 0.5, //柱子之间间距
label:{
show:true ,
position:"top",
padding:10,
textStyle:{
fontSize:fontSize,
color:'rgba(18, 119, 255, 1)'
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: 'rgba(18, 119, 255, 1)'
},
{
offset: 1,
color: 'rgba(18, 119, 255, 0)'
}
]),
}
},
data: datas.yData1,
barGap: 0,
legendHoverLink: false,
},
{
// 蓝色柱子头部椭圆
name: datas.legendData[0],
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#3084FE',
}
},
// symbol: 'image://data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABIElEQVQ4jaWVMWoCQRSGv0iKFIm3MLVFYshFbGxMEwTTeQxrBTuFVMkRPMBWhhQpAh5CEBEJhMgjb2T0ze7Mrh8sLPNm5h++nZm9GMz/SKQOjLVrD9ikDLs0LWGawBvQ0GoLaAOfwd4eNdNieQYyb3L0PdNaIUUBN8ArMAGuTPW/baJ9rk1VyQsQJQugYyoW6fOhYwyhgJCSGLnK/ICYkhhBZS6gjJIYHZ2r6QKqKIlx65RJwAr4iQyowq/MKwHvwF3KoSnBl845dd9gCTx6V8E5TIEH4JuTXbQD+noFrCsEyN30pM/WNYbOQRVlouReV39EKABP2chULEdKUgNQZS8FykRJ91RJmQBHSJlTMosNTv0fOGVDvQZkM+Su+gCwB/qVO5cbNt4bAAAAAElFTkSuQmCC',
symbolRotate: 0,
symbolSize: symbolSize,
symbolOffset: [-34,-5],
symbolPosition: 'end',
data: datas.yData1,
z: 3
},
// 网络点数
// 已开工
{
// 红色柱子
name: datas.legendData[1],
type: 'bar',
// stack: 1,
barWidth: barWidth, //柱子宽度
barGap: 0.5, //柱子之间间距
label:{
show:true ,
position:"top",
padding:10,
textStyle:{
fontSize:fontSize,
color: 'rgba(146, 208, 255, 1)'
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: 'rgba(146, 208, 255, 1)'
},
{
offset: 1,
color: 'rgba(146, 208, 255, 0)'
}
]),
}
},
data: datas.yData2,
},
{
// 浅蓝色柱子头部椭圆
name: datas.legendData[1],
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#B2DEFF',
}
},
// symbol: 'image://data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABIElEQVQ4jaWVMWoCQRSGv0iKFIm3MLVFYshFbGxMEwTTeQxrBTuFVMkRPMBWhhQpAh5CEBEJhMgjb2T0ze7Mrh8sLPNm5h++nZm9GMz/SKQOjLVrD9ikDLs0LWGawBvQ0GoLaAOfwd4eNdNieQYyb3L0PdNaIUUBN8ArMAGuTPW/baJ9rk1VyQsQJQugYyoW6fOhYwyhgJCSGLnK/ICYkhhBZS6gjJIYHZ2r6QKqKIlx65RJwAr4iQyowq/MKwHvwF3KoSnBl845dd9gCTx6V8E5TIEH4JuTXbQD+noFrCsEyN30pM/WNYbOQRVlouReV39EKABP2chULEdKUgNQZS8FykRJ91RJmQBHSJlTMosNTv0fOGVDvQZkM+Su+gCwB/qVO5cbNt4bAAAAAElFTkSuQmCC',
symbolRotate: 0,
symbolSize: symbolSize,
symbolOffset: ['-11', '-5'],
symbolPosition: 'end',
data: datas.yData2,
z: 7
},
// 已开工
// 巡查问题数
{
// 红色柱子
name: datas.legendData[2],
type: 'bar',
// stack: 1,
barWidth: barWidth, //柱子宽度
barGap: 0.5, //柱子之间间距
label:{
show:true ,
position:"top",
padding:10,
textStyle:{
fontSize:fontSize,
color: 'rgba(255, 0, 76, 1)'
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 0, 76, 1)'
},
{
offset: 1,
color: 'rgba(255, 0, 76, 0)'
}
]),
}
},
data: datas.yData3,
},
{
// 绿色柱子头部椭圆
name: datas.legendData[2],
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#FF4C81',
}
},
// symbol: 'image://data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABIElEQVQ4jaWVMWoCQRSGv0iKFIm3MLVFYshFbGxMEwTTeQxrBTuFVMkRPMBWhhQpAh5CEBEJhMgjb2T0ze7Mrh8sLPNm5h++nZm9GMz/SKQOjLVrD9ikDLs0LWGawBvQ0GoLaAOfwd4eNdNieQYyb3L0PdNaIUUBN8ArMAGuTPW/baJ9rk1VyQsQJQugYyoW6fOhYwyhgJCSGLnK/ICYkhhBZS6gjJIYHZ2r6QKqKIlx65RJwAr4iQyowq/MKwHvwF3KoSnBl845dd9gCTx6V8E5TIEH4JuTXbQD+noFrCsEyN30pM/WNYbOQRVlouReV39EKABP2chULEdKUgNQZS8FykRJ91RJmQBHSJlTMosNTv0fOGVDvQZkM+Su+gCwB/qVO5cbNt4bAAAAAElFTkSuQmCC',
symbolRotate: 0,
symbolSize: symbolSize,
symbolOffset: ['11.5', '-5'],
symbolPosition: 'end',
data: datas.yData3,
z: 10
},
// 巡查问题数
// 整改完成数
{
name: datas.legendData[3],
type: 'bar',
// stack: 1,
barWidth: barWidth, //柱子宽度
barGap: 0.5, //柱子之间间距
label:{
show:true ,
position:"top",
padding:10,
textStyle:{
fontSize:fontSize,
color:"rgba(68, 226, 132, 1)"
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: 'rgba(68, 226, 132, 1)'
},
{
offset: 1,
color: 'rgba(68, 226, 132, 0)'
}
]),
}
},
data: datas.yData4,
},
{
// 红色柱子头部椭圆
name: datas.legendData[3],
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#7CEBA9',
}
},
// symbol: 'image://data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABIElEQVQ4jaWVMWoCQRSGv0iKFIm3MLVFYshFbGxMEwTTeQxrBTuFVMkRPMBWhhQpAh5CEBEJhMgjb2T0ze7Mrh8sLPNm5h++nZm9GMz/SKQOjLVrD9ikDLs0LWGawBvQ0GoLaAOfwd4eNdNieQYyb3L0PdNaIUUBN8ArMAGuTPW/baJ9rk1VyQsQJQugYyoW6fOhYwyhgJCSGLnK/ICYkhhBZS6gjJIYHZ2r6QKqKIlx65RJwAr4iQyowq/MKwHvwF3KoSnBl845dd9gCTx6V8E5TIEH4JuTXbQD+noFrCsEyN30pM/WNYbOQRVlouReV39EKABP2chULEdKUgNQZS8FykRJ91RJmQBHSJlTMosNTv0fOGVDvQZkM+Su+gCwB/qVO5cbNt4bAAAAAElFTkSuQmCC',
symbolRotate: 0,
symbolSize: symbolSize,
symbolOffset: ['34', '-5'],
symbolPosition: 'end',
data: datas.yData4,
z: 2
},
// 整改完成数
// 整改率
{
name: datas.legendData[4],
type: 'line',
symbolSize: 8,
symbol: "circle",
yAxisIndex: 1,
z: 22,
// symbol:"roundRect",
// symbolSize:8,
itemStyle: {
normal: {
color: "rgba(68, 226, 132, 1)"
}
},
label: {
normal: {
show: false,
position: 'top',
formatter: 'C',
textStyle: {
fontSize: 10
}
}
},
lineStyle: {
width: 2,
color: "rgba(68, 226, 132, 1)"
},
data: datas.yData5,
},
// 整改率
// 开工率
{
name: datas.legendData[5],
type: 'line',
symbolSize: 8,
symbol: "circle",
yAxisIndex: 1,
z: 22,
// symbol:"roundRect",
// symbolSize:8,
itemStyle: {
normal: {
color: "rgba(146, 208, 255, 1)"
}
},
label: {
normal: {
show: false,
position: 'top',
formatter: 'C',
textStyle: {
fontSize: 10
}
}
},
lineStyle: {
width: 2,
color: "rgba(146, 208, 255, 1)"
},
data: datas.yData6,
},
// 开工率
// 问题占比
{
name: datas.legendData[6],
type: 'line',
symbolSize: 8,
symbol: "circle",
yAxisIndex: 1,
z: 22,
// symbol:"roundRect",
// symbolSize:8,
itemStyle: {
normal: {
color: "rgba(255, 0, 76, 1)"
}
},
label: {
normal: {
show: false,
position: 'top',
formatter: 'C',
textStyle: {
fontSize: 10
}
}
},
lineStyle: {
width: 2,
color: "rgba(255, 0, 76, 1)"
},
data: datas.yData7,
},
// 问题占比
]
};