let data = {
"nameList": [
"广告用电",
"照明用电",
"空调用电",
"动力用电",
"特殊用电"
],
"leftList": [
34,
126,
27,
56,
117.72
],
"rightList": [
116,
38,
52,
63,
81.12
]
};
const myData = data.nameList;
const leftData = data.leftList;
const rightData = data.rightList;
let { maxValue } = getMaxMin(...leftData, ...rightData);
let { interval, max } = getXInterval(maxValue,3);
const bgData = getBgData(max, myData.length);
let unit="kW·h";
/* 获取最大值、最小值 */
function getMaxMin(...nums) {
const maxValue = Math.max(...nums);
const minValue = Math.min(...nums);
return {
maxValue,
minValue,
};
}
/*获取x轴数据间隔*/
function getXInterval(maxValue, split) {
const xMax = maxValue * 1.2; //取最大值的1.2倍
let interval = Math.ceil(xMax / split); //去掉小数点 split-间隔
let { firstNum } = getBit(interval);
const { numLength } = getBit(interval);
firstNum++; //首位数字+1，右侧多点留白，方便数字展示
if (numLength > 1) {
let inter = firstNum;
for (let i = 1; i < numLength; i++) {
inter = inter * 10;
}
interval = inter;
}
const max = interval * split;
return { interval, max };
}
/* 获取背景虚线的值 */
function getBgData(maxValue, len) {
const bgData = [];
for (let i = 0; i < len; i++) {
bgData.push(maxValue);
}
return bgData;
}
/*判断数字是几位数*/
function getBit(num) {
const str = num + "";
const numLength = str.length;
const firstNum = parseInt(str.slice(0, 1));
const secNumber = parseInt(str.slice(1, 2));
return { firstNum, secNumber, numLength };
}
option = {
backgroundColor: '#325873',
tooltip: {
show: true,
trigger: "axis",
backgroundColor: "rgba(11, 48, 89, 0.7)",
borderColor: "#076DBD",
textStyle: {
color: "#fff",
},
axisPointer: {
type: "shadow",
},
// 格式化提示内容
formatter: function (params) {
let showCur = params[0];
let returnData = showCur.name + "<br/>";
returnData +=
showCur.marker +
showCur.seriesName +
"：" +
showCur.value +
unit;
return returnData;
},
},
legend: {
top: "10%",
left: "2%",
itemWidth: 12,
itemHeight: 12,
itemGap: 25,
icon: "horizontal",
textStyle: {
color: "#ffffff",
fontSize: 12,
},
data: ["工作时间用电", "非工作时间用电"],
},
grid: [
{
show: false,
left: "0",
top: "22%",
bottom: "4%",
width: "20%",
},
{
show: false,
left: "24%",
top: "22%",
bottom: "0",
containLabel: true,
width: "32%",
},
{
show: false,
right: "12%",
top: "22%",
bottom: "0",
containLabel: true,
width: "32%",
},
],
xAxis: [
{
gridIndex: 0,
show: true,
},
{
gridIndex: 1,
type: "value",
inverse: true, // 柱状图开始位置
axisLine: {
show: false, // 横坐标位置
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
verticalAlign: "middle",
textStyle: {
color: "#fff",
fontSize: 12,
},
formatter(value) {
if (value >= max) {
return value;
}
return value;
},
},
interval: interval,
max: max,
splitLine: {
show: false,
},
},
{
gridIndex: 2,
name: "",
type: "value",
nameTextStyle: {
fontFamily: "MicrosoftYaHei",
fontSize: 12,
color: "#fff",
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
verticalAlign: "middle",
textStyle: {
color: "#fff",
fontSize: 12,
},
formatter(value) {
if (value >= max) {
return value + unit;
}
return value;
},
},
interval: interval,
max: max,
splitLine: {
show: false,
},
},
],
yAxis: [
{
gridIndex: 0,
type: "category",
inverse: true,
position: "right",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
data: myData.map(function (value) {
return {
value: value,
textStyle: {
color: "#fff",
align: "right",
padding: [0, 15, 0, 0],
},
};
}),
},
{
gridIndex: 1,
type: "category",
inverse: true,
position: "right",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
margin: 8,
textStyle: {
color: "#9D9EA0",
fontSize: 12,
},
},
data: myData,
},
{
gridIndex: 2,
type: "category",
inverse: true,
position: "left",
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
textStyle: {
color: "#9D9EA0",
fontSize: 12,
},
},
data: myData,
},
],
series: [
{
name: "工作时间用电",
type: "bar",
barGap: 20,
barWidth: 10,
xAxisIndex: 1,
yAxisIndex: 1,
showBackground: false,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
label: {
normal: {
position: "left",
show: true,
color: "#fff",
},
emphasis: {
show: true,
position: "left",
offset: [0, 0],
textStyle: {
color: "#fff",
fontSize: 12,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#0160BC",
},
{
offset: 0.47,
color: "#2281E9",
},
{
offset: 1,
color: "#4ABDF9",
},
]),
label: {
formatter: (params) => {
return params.value;
},
},
},
},
data: leftData,
},
{
name: "非工作时间用电",
type: "bar",
barGap: 20,
barWidth: 10,
xAxisIndex: 2,
yAxisIndex: 2,
showBackground: false,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
label: {
normal: {
show: true,
position: "right",
color: "#fff",
fontSize: 12,
},
emphasis: {
show: true,
position: "right",
offset: [0, 0],
textStyle: {
color: "#fff",
fontSize: 12,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#7DDAB1",
},
{
offset: 0.47,
color: "#2BDBB2",
},
{
offset: 1,
color: "#0096A1",
},
]),
label: {
formatter: (params) => {
return params.value;
},
},
},
},
data: rightData,
},
{
//背景虚线
name: "dotted",
type: "pictorialBar",
barGap: "-100%",
xAxisIndex: 1, // 对应在X轴的grid索引
yAxisIndex: 1, // 对应在Y轴的grid索引
z: 0,
symbol: "rect",
itemStyle: {
color: "rgba(255, 255, 255, 0.2)",
},
symbolRepeat: true,
symbolSize: [3, 1],
symbolMargin: 3,
data: bgData,
},
{
//背景虚线
name: "dotted",
type: "pictorialBar",
barGap: "-100%",
xAxisIndex: 2, // 对应在X轴的grid索引
yAxisIndex: 2, // 对应在Y轴的grid索引
z: 0,
symbol: "rect",
itemStyle: {
color: "rgba(255, 255, 255, 0.2)",
},
symbolRepeat: true,
symbolSize: [3, 1],
symbolMargin: 3,
data: bgData,
},
],
};