来看效果图
话不多说直接上代码
let option = {
grid: {
left: "8%",
top: "10%",
right: "0%",
bottom: "45%",
},
legend: {
align: "left",
itemGap: 18,
orient: "vertical",
textStyle: { color: "#000" },
bottom: -5,
left: 0,
// data: [ "问题总计", "已整改","整改中", "已整改占比",],
data: [{ name: '完成占比', icon: 'none' }, { name: '已完成', icon: 'none' }, { name: '剩余产值', icon: 'none' }, { name: '总产值', icon: 'none' }],
},
xAxis: [
{
data: [
"软基",
"挖方",
"填方",
"桩基",
"立柱墩身",
"桥台及挡板",
"盖梁台帽",
"系梁",
"承台",
"T梁预制及安装",
"掌子面 ",
"支护",
"二衬",
],
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#ffffff",
width: 0,
},
},
axisTick: {
show: false, //隐藏X轴刻度
alignWithLabel: true,
},
axisLabel: {
show: true,
textStyle: {
color: "#333333", //X轴文字颜色
fontSize: 14,
},
interval: 0,
// formatter: function (value) {
// var ret = ""; //拼接加\n返回的类目项
// var maxLength = 4; //每项显示文字个数
// var valLength = value.length; //X轴类目项的文字个数
// var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
// if (rowN > 1) {
// //如果类目项的文字大于5,
// for (var i = 0; i < rowN; i++) {
// var temp = ""; //每次截取的字符串
// var start = i * maxLength; //开始截取的位置
// var end = start + maxLength; //结束截取的位置
// //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
// temp = value.substring(start, end) + "\n";
// ret += temp; //凭借最终的字符串
// }
// return ret;
// } else {
// return value;
// }
// },
},
},
{
position: 'bottom',
offset: 54,
axisPointer: {
type: 'none',
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#ffffff",
width: 0,
},
},
axisLabel: {
inside: true,
textStyle: {
fontSize: '12',
color: '#000000'
},
interval: 0,
},
data: ['63%', '99%', '65%', '88%', '75%', '63%', '99%', '65%', '95%', '67%', '63%', '49%', '45%'],
},
{
position: 'bottom',
offset: 84,
axisPointer: {
type: 'none',
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#ffffff",
width: 0,
},
},
axisLabel: {
inside: true,
textStyle: {
fontSize: '12',
color: '#000000'
},
interval: 0,
},
data: [63, 99, 65, 85, 75,43,76,34,12,35,12,87,13],
},
{
position: 'bottom',
offset: 114,
axisPointer: {
type: 'none',
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#ffffff",
width: 0,
},
},
axisLabel: {
inside: true,
textStyle: {
fontSize: '12',
color: '#000000'
},
interval: 0,
},
data: [63, 99, 65, 85, 55, 45, 77, 13, 45, 75, 13, 56, 34],
},
{
position: 'bottom',
offset: 144,
axisPointer: {
type: 'none',
},
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#ffffff",
width: 0,
},
},
axisLabel: {
inside: true,
textStyle: {
fontSize: '12',
color: '#000000'
},
interval: 0,
},
data: [63, 99, 65, 85, 75, 63, 99, 65, 85, 75, 63, 99, 65],
},
// {
// position: 'bottom',
// offset: 195,
// axisPointer: {
// type: 'none',
// },
// axisLine: {
// show: true, //隐藏X轴轴线
// lineStyle: {
// color: "#ffffff",
// width: 0,
// },
// },
// axisLabel: {
// inside: true,
// textStyle: {
// fontSize: '12',
// color: '#000000'
// },
// interval: 0,
// },
// data: [63, 99, 65, 85, 75, 78, 55, 63, 99, 65, 85, 75,34],
// },
],
yAxis: [
{
type: "value",
name: "",
nameTextStyle: {
color: "#BDD8FB",
fontSize: 12,
},
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.15)",
// type: 'dashed', // dotted 虚线
},
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "#333333",
fontSize: 12,
},
},
},
{
type: "value",
name: "",
nameTextStyle: {
color: "#BDD8FB",
fontSize: 12,
},
splitLine: {
show: false,
lineStyle: {
width: 1,
color: "#CED2DB",
},
},
axisTick: {
show: false,
},
axisLine: {
show: false, //隐藏X轴轴线
lineStyle: {
color: "#163a5f",
width: 2,
},
},
axisLabel: {
show: false,
textStyle: {
color: "#797A7F",
fontSize: 12,
},
},
},
],
series: [
{
name: "完成占比",
type: "line",
unit: "吨",
stack: 'sum',
// groupName: "整改中/已整改占比",
itemStyle: {
color: "#36a2f9"
},
},
{
name: "已完成",
type: "line",
// yAxisIndex: 1,
itemStyle: {
color: "#00ffff"
},
// lineStyle: {
// width: 0,
// type: [10, 10],
// dashOffset: 5
// }
},
{
name: "剩余产值",
type: "line",
lineStyle: {
color: "rgb(0, 0, 0)",
width: 0,//线宽为0,就不会显示了
},
showSymbol: false,
symbolSize: 0,
},
{
name: "总产值",
type: "line",
itemStyle: {
color: "#00ffff"
},
},
{
name: "下载数",
type: "bar",
barWidth: 22,
itemStyle: {
color: '#0177EF'
},
label: {
show: true,
position: "top",
distance: 0,
color: "#333333",
formatter: "{c}" + "%",
},
data: [63, 99, 65, 85, 75, 78, 55, 63, 99, 65, 85, 75, 78],
},
{
// name: '背景',
type: "bar",
barWidth: 24,
xAxisIndex: 0,
yAxisIndex: 1,
barGap: "-110%",
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100], //背景阴影长度
itemStyle: {
normal: {
color: "rgba(214, 233, 252,0.5)",
},
},
tooltip: {
show: false,
},
zlevel: 9,
},
],
};
扫一扫
7581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
