chengdandan
/
yanchengPowerSupply
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

条形图样式修改

This commit is contained in:
mazhehui 2023-07-21 13:18:50 +08:00
parent 67e0a75e2e
commit b7899e798e
2 changed files with 1385 additions and 1153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

559
src/views/enterprisePollutionMonitoring.vue
View File

@ -49,10 +49,6 @@
</div>
<div class="content">
<div class="line">
<!-- <div class="enselect">
<img src="../assets/02/地区选择下拉菜单.png" alt="" />
<span class="text">2022</span>
</div> -->
<div id="detailedTwo2"></div>
</div>
</div>
@ -562,33 +558,19 @@ export default {
});
},
detailedTwo22() {
// note: 设置灰色背景色的长度的逻辑不够好，请自行调整
var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
var honorData = [
{
name: "用电量（单位：亿）",
data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
data: [9.4, 8.1, 7.3, 8.6, 6.6],
},
{
name: "碳排放量（单位：万）",
data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
data: [9.4, 8.1, 7.3, 8.6, 6.6],
},
];
var honorXAxisData = ["盐都区", "建湖县", "射阳县", "阜宁县", "滨海县"];
// // 设置灰色背景色的长度
var isMax = 2000;
var bjData1 = [
isMax,
isMax,
isMax,
isMax,
isMax,
isMax,
isMax,
isMax,
isMax,
];
var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
var honorXAxisData = ["No.5", "No.4", "No.3", "No.2", "No.1"];
var nameList = ["滨海县", "阜宁县", "射阳县", "建湖县", "盐都区"];
var option = {
color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
tooltip: {
@ -597,7 +579,6 @@ export default {
type: "none",
},
},
legend: {
right: 5,
top: "5%",
@ -605,16 +586,15 @@ export default {
itemHeight: 10,
itemGap: 15,
textStyle: {
color: "#ACCFFF",
fontSize: 16,
color: "#fff",
fontSize: 18,
},
},
grid: {
left: "5%",
right: "5%",
bottom: "5%",
top: "10%",
containLabel: true,
top: "15%",
left: "14%",
right: "0%",
bottom: "0%",
},
xAxis: [
{
@ -643,6 +623,142 @@ export default {
yAxis: [
{
type: "category",
offset: 17,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 20, // 文字大小
fontWeight: 700,
interval: 0,
},
data: honorXAxisData,
},
{
//名称
type: "category",
offset: -10,
position: "left",
axisLine: {
show: false,
},
inverse: true,
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
color: "#fff",
align: "left",
verticalAlign: "bottom",
lineHeight: 40,
fontSize: 20,
},
data: nameList,
},
],
series: [
{
name: "用电量（单位：亿）",
type: "bar",
stack: "zongliang",
barWidth: "25%",
barGap: 15, // 柱图之间的间距
itemStyle: {
//自定义颜色
normal: { color: "orange" },
},
label: {
normal: {
show: true,
position: ["80%", "-100%"],
formatter: function (params) {
return params.value;
},
textStyle: {
color: "#fff",
fontSize: 18,
},
},
},
data: honorData[0].data,
},
{
name: "碳排放量（单位：万）",
type: "bar",
stack: "zongliang",
barWidth: "25%",
label: {
normal: {
show: true,
position: ["80%", "-100%"],
formatter: function (params) {
return params.value;
},
textStyle: {
color: "#fff",
fontSize: 18,
},
},
},
data: honorData[1].data,
},
],
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
detailedTwo33() {
var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
var honorData = [
{
name: "用电量（单位：亿）",
data: [9.4, 8.1, 7.3, 8.6, 6.6],
},
{
name: "碳排放量（单位：万）",
data: [9.4, 8.1, 7.3, 8.6, 6.6],
},
];
var honorXAxisData = ["No.5", "No.4", "No.3", "No.2", "No.1"];
var nameList = ["滨海县", "阜宁县", "射阳县", "建湖县", "盐都区"];
var option = {
color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
},
legend: {
right: 5,
top: "5%",
itemWidth: 10,
itemHeight: 10,
itemGap: 15,
textStyle: {
color: "#fff",
fontSize: 18,
},
},
grid: {
top: "15%",
left: "14%",
right: "0%",
bottom: "0%",
},
xAxis: [
{
type: "value",
show: false,
axisLine: {
show: false,
},
@ -654,48 +770,99 @@ export default {
fontSize: 16, // 文字大小
fontWeight: 400,
interval: 0,
formatter: function (value) {
return value + "(万元)";
},
},
offset: 20,
splitLine: {
show: false,
},
},
],
yAxis: [
{
type: "category",
offset: 17,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 20, // 文字大小
fontWeight: 700,
interval: 0,
},
data: honorXAxisData,
},
{
//名称
type: "category",
offset: -10,
position: "left",
axisLine: {
show: false,
},
inverse: true,
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
color: "#fff",
align: "left",
verticalAlign: "bottom",
lineHeight: 40,
fontSize: 20,
},
data: nameList,
},
],
series: [
{
name: "用电量（单位：亿）",
type: "bar",
stack: "zongliang",
barWidth: "35%",
zlevel: 10,
barWidth: "25%",
barGap: 15, // 柱图之间的间距
itemStyle: {
//自定义颜色
normal: { color: "orange" },
},
label: {
normal: {
show: true,
position: "inside",
position: ["80%", "-100%"],
formatter: function (params) {
return params.value;
},
textStyle: {
color: "#fff",
fontSize: 14,
fontSize: 18,
},
},
},
data: honorData[0].data,
},
{
name: "碳排放量（单位：万）",
type: "bar",
stack: "zongliang",
barWidth: "35%",
zlevel: 10,
barWidth: "25%",
label: {
normal: {
show: true,
position: "top",
position: ["80%", "-100%"],
formatter: function (params) {
console.log(params);
// return params.seriesName + params.value ;
return "完成" + params.value;
return params.value;
},
textStyle: {
color: "#fff",
fontSize: 12,
fontSize: 18,
},
},
},
@ -703,106 +870,6 @@ export default {
},
],
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
},
detailedTwo33() {
var bg =
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=";
var bar =
"image://data:image/png;base64,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";
var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];
var datas = [22, 15, 14, 20.4, 21.1, 7, 14, 19];
var barWidth = 20;
var maxNum = 0;
for (var i = 0; i < data.length; i++) {
if (data[i] > maxNum) {
maxNum = data[i];
}
}
var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
var option = {
grid: {
top: "10%",
left: "10%",
right: "12%",
bottom: "0%",
},
xAxis: {
show: false,
},
yAxis: {
data: data.map((item, index) => `No. ${index}`),
splitLine: {
show: false,
},
axisLabel: {
textStyle: { fontSize: 18, color: "#02afff" },
},
axisLine: {
show: false,
},
axisTick: false,
},
series: [
{
type: "pictorialBar",
barWidth: barWidth,
zlevel: 2,
label: {
normal: {
show: true,
position: "top",
formatter: function (params) {
console.log(params);
// return params.seriesName + params.value ;
return "完成" + params.value;
},
textStyle: {
color: "#fff",
fontSize: 12,
},
},
},
data: data.map(function (item) {
return {
value: item,
symbol: bar,
};
}),
},
{
type: "pictorialBar",
barWidth: barWidth,
zlevel: 2,
label: {
normal: {
show: true,
position: "top",
formatter: function (params) {
console.log(params);
// return params.seriesName + params.value ;
return "未完成" + params.value;
},
textStyle: {
color: "#fff",
fontSize: 12,
},
},
},
data: datas.map(function (item) {
return {
value: item,
symbol: bar,
};
}),
},
],
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
@ -1038,79 +1105,159 @@ export default {
});
},
barCharts() {
var bg =
"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=";
var bar =
"image://data:image/png;base64,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";
var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];
var barWidth = 20;
var maxNum = 0;
for (var i = 0; i < data.length; i++) {
if (data[i] > maxNum) {
maxNum = data[i];
}
}
var myChart = this.$echarts.init(document.getElementById("barCharts"));
var honorData = [
{
name: "用电量（单位：亿）",
data: [9.4, 8.1, 7.3, 8.6, 6.6],
},
{
name: "碳排放量（单位：万）",
data: [9.4, 8.1, 7.3, 8.6, 6.6],
},
];
var honorXAxisData = ["No.5", "No.4", "No.3", "No.2", "No.1"];
var nameList = ["滨海县", "阜宁县", "射阳县", "建湖县", "盐都区"];
var option = {
color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
},
legend: {
right: 5,
top: "5%",
itemWidth: 10,
itemHeight: 10,
itemGap: 15,
textStyle: {
color: "#fff",
fontSize: 18,
},
},
grid: {
top: "10%",
left: "10%",
right: "12%",
top: "15%",
left: "14%",
right: "0%",
bottom: "0%",
},
xAxis: {
show: false,
},
yAxis: {
data: data.map((item, index) => `No. ${index}`),
splitLine: {
show: false,
},
axisLabel: {
textStyle: { fontSize: 18, color: "#02afff" },
},
axisLine: {
show: false,
},
axisTick: false,
},
series: [
xAxis: [
{
type: "pictorialBar",
barWidth: barWidth,
zlevel: 2,
data: data.map(function (item) {
return {
value: item,
symbol: bar,
};
}),
},
{
type: "pictorialBar",
barWidth: barWidth,
data: data.map(function (item) {
return {
realValue: item,
value: maxNum,
symbol: bg,
};
}),
label: {
show: true,
position: "right",
distance: 80,
align: "right",
formatter: function (params) {
return params.data.realValue + " 万";
type: "value",
show: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#6B9DD7",
fontSize: 16, // 文字大小
fontWeight: 400,
interval: 0,
formatter: function (value) {
return value + "(万元)";
},
color: "#02afff",
fontSize: 18,
},
splitLine: {
show: false,
},
},
],
};
yAxis: [
{
type: "category",
offset: 17,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 20, // 文字大小
fontWeight: 700,
interval: 0,
},
data: honorXAxisData,
},
{
//名称
type: "category",
offset: -10,
position: "left",
axisLine: {
show: false,
},
inverse: true,
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
color: "#fff",
align: "left",
verticalAlign: "bottom",
lineHeight: 40,
fontSize: 20,
},
data: nameList,
},
],
series: [
{
name: "用电量（单位：亿）",
type: "bar",
stack: "zongliang",
barWidth: "25%",
barGap: 15, // 柱图之间的间距
itemStyle: {
//自定义颜色
normal: { color: "orange" },
},
label: {
normal: {
show: true,
position: ["80%", "-100%"],
formatter: function (params) {
return params.value;
},
textStyle: {
color: "#fff",
fontSize: 18,
},
},
},
data: honorData[0].data,
},
{
name: "碳排放量（单位：万）",
type: "bar",
stack: "zongliang",
barWidth: "25%",
label: {
normal: {
show: true,
position: ["80%", "-100%"],
formatter: function (params) {
return params.value;
},
textStyle: {
color: "#fff",
fontSize: 18,
},
},
},
data: honorData[1].data,
},
],
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
@ -1567,7 +1714,7 @@ export default {
justify-content: space-between;
#detailedTwo2 {
width: 100%;
height: 400px;
height: 350px;
}
#detailedTwo3 {
width: 100%;

1979
src/views/index.vue
View File

File diff suppressed because it is too large Load Diff