let obj = {
xData: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周', '第7周', '第8周', '第9周', '第10周', '第11周', '第12周',],
yData0: ['I', 'II', 'III', 'IV', 'V', '劣V'],
yData1: ['IV', 'III', 'III', 'IV', 'III', 'III', 'IV', 'III', 'III', 'IV', 'III', 'III'],
yData2: ['III', 'III', 'II', 'III', 'III', 'II', 'III', 'III', 'II', 'III', 'III', 'II'],
yName1: "当前水质",
yName2: "目标水质",
}
option = {
// tooltip: {
// trigger: 'axis',
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
// }
// },
backgroundColor: 'rgba(0,0,0,1)',
legend: {
show: true,
top: '10%',
right: '5%',
itemWidth: 25, // 图例标记的图形宽度。
// itemGap: 20, // 图例每项之间的间隔。
itemHeight: 14, // 图例标记的图形高度。
textStyle: {
color: '#fff',
fontSize: 14,
padding: [0, 8, 0, 8]
},
data: [obj.yName1, obj.yName2]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: obj.xData,
axisTick: {//坐标轴刻度
show: false,
},
axisLabel: {
textStyle: {
color: "#FFFFFF",
fontSize: 14,
fontWeight: 400
},
},
}],
yAxis: [{
type: 'category',
data: obj.yData0,
boundaryGap: false,
axisTick: {//坐标轴刻度
show: false,
},
axisLabel: {
textStyle: {
color: "#FFFFFF",
fontSize: 14,
fontWeight: 400
},
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(218, 218, 218, 0.4)",
},
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(218, 218, 218, 0.4)",
},
},
}],
series: [{
name: obj.yName1,
type: 'bar',
data: obj.yData1,
barWidth: 24,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(42, 245, 152, 1)',
},
{
offset: 1,
color: 'rgba(17, 153, 142, 1)',
},
]),
}
}
},
{
name: obj.yName2,
type: 'bar',
data: obj.yData2,
barWidth: 24,
barGap: "8.33%",//柱间距，以柱子宽衡量
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(170, 169, 169, 1)',
},
{
offset: 1,
color: 'rgba(255, 255, 255, 1)',
},
]),
}
}
},
],
dataZoom: [{
type: 'inside', //图表下方的伸缩条
show: true, //是否显示
realtime: true, //
start: 0, //伸缩条开始位置（1-100），可以随时更改
end: 100, //伸缩条结束位置（1-100），可以随时更改
}]
};
// if (option && typeof option === "object") {
// myChart.setOption(option, true);
// }