条形图样式修改
This commit is contained in:
parent
67e0a75e2e
commit
b7899e798e
|
|
@ -49,10 +49,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<!-- <div class="enselect">
|
|
||||||
<img src="../assets/02/地区选择下拉菜单.png" alt="" />
|
|
||||||
<span class="text">2022</span>
|
|
||||||
</div> -->
|
|
||||||
<div id="detailedTwo2"></div>
|
<div id="detailedTwo2"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -562,33 +558,19 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
detailedTwo22() {
|
detailedTwo22() {
|
||||||
// note: 设置灰色背景色的长度的逻辑不够好，请自行调整
|
var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
|
||||||
var honorData = [
|
var honorData = [
|
||||||
{
|
{
|
||||||
name: "用电量（单位：亿）",
|
name: "用电量（单位：亿）",
|
||||||
data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
|
data: [9.4, 8.1, 7.3, 8.6, 6.6],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "碳排放量（单位：万）",
|
name: "碳排放量（单位：万）",
|
||||||
data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
|
data: [9.4, 8.1, 7.3, 8.6, 6.6],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
var honorXAxisData = ["盐都区", "建湖县", "射阳县", "阜宁县", "滨海县"];
|
var honorXAxisData = ["No.5", "No.4", "No.3", "No.2", "No.1"];
|
||||||
// // 设置灰色背景色的长度
|
var nameList = ["滨海县", "阜宁县", "射阳县", "建湖县", "盐都区"];
|
||||||
var isMax = 2000;
|
|
||||||
var bjData1 = [
|
|
||||||
isMax,
|
|
||||||
isMax,
|
|
||||||
isMax,
|
|
||||||
isMax,
|
|
||||||
isMax,
|
|
||||||
isMax,
|
|
||||||
isMax,
|
|
||||||
isMax,
|
|
||||||
isMax,
|
|
||||||
];
|
|
||||||
var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
|
|
||||||
|
|
||||||
var option = {
|
var option = {
|
||||||
color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
|
color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
|
@ -597,7 +579,6 @@ export default {
|
||||||
type: "none",
|
type: "none",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
legend: {
|
legend: {
|
||||||
right: 5,
|
right: 5,
|
||||||
top: "5%",
|
top: "5%",
|
||||||
|
|
@ -605,16 +586,15 @@ export default {
|
||||||
itemHeight: 10,
|
itemHeight: 10,
|
||||||
itemGap: 15,
|
itemGap: 15,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#ACCFFF",
|
color: "#fff",
|
||||||
fontSize: 16,
|
fontSize: 18,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: "5%",
|
top: "15%",
|
||||||
right: "5%",
|
left: "14%",
|
||||||
bottom: "5%",
|
right: "0%",
|
||||||
top: "10%",
|
bottom: "0%",
|
||||||
containLabel: true,
|
|
||||||
},
|
},
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
|
|
@ -643,6 +623,142 @@ export default {
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: "category",
|
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: {
|
axisLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
|
|
@ -654,48 +770,99 @@ export default {
|
||||||
fontSize: 16, // 文字大小
|
fontSize: 16, // 文字大小
|
||||||
fontWeight: 400,
|
fontWeight: 400,
|
||||||
interval: 0,
|
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,
|
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: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "用电量（单位：亿）",
|
name: "用电量（单位：亿）",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
stack: "zongliang",
|
stack: "zongliang",
|
||||||
barWidth: "35%",
|
barWidth: "25%",
|
||||||
zlevel: 10,
|
barGap: 15, // 柱图之间的间距
|
||||||
|
itemStyle: {
|
||||||
|
//自定义颜色
|
||||||
|
normal: { color: "orange" },
|
||||||
|
},
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: true,
|
||||||
position: "inside",
|
position: ["80%", "-100%"],
|
||||||
|
formatter: function (params) {
|
||||||
|
return params.value;
|
||||||
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 14,
|
fontSize: 18,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
data: honorData[0].data,
|
data: honorData[0].data,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "碳排放量（单位：万）",
|
name: "碳排放量（单位：万）",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
stack: "zongliang",
|
stack: "zongliang",
|
||||||
barWidth: "35%",
|
barWidth: "25%",
|
||||||
zlevel: 10,
|
|
||||||
label: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
show: true,
|
show: true,
|
||||||
position: "top",
|
position: ["80%", "-100%"],
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
console.log(params);
|
return params.value;
|
||||||
// return params.seriesName + params.value ;
|
|
||||||
return "完成" + params.value;
|
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff",
|
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);
|
myChart.setOption(option);
|
||||||
window.addEventListener("resize", () => {
|
window.addEventListener("resize", () => {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
|
|
@ -1038,79 +1105,159 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
barCharts() {
|
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 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 = {
|
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: {
|
grid: {
|
||||||
top: "10%",
|
top: "15%",
|
||||||
left: "10%",
|
left: "14%",
|
||||||
right: "12%",
|
right: "0%",
|
||||||
bottom: "0%",
|
bottom: "0%",
|
||||||
},
|
},
|
||||||
xAxis: {
|
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",
|
type: "value",
|
||||||
barWidth: barWidth,
|
show: false,
|
||||||
zlevel: 2,
|
axisLine: {
|
||||||
data: data.map(function (item) {
|
show: false,
|
||||||
return {
|
},
|
||||||
value: item,
|
axisTick: {
|
||||||
symbol: bar,
|
show: false,
|
||||||
};
|
},
|
||||||
}),
|
axisLabel: {
|
||||||
},
|
color: "#6B9DD7",
|
||||||
{
|
fontSize: 16, // 文字大小
|
||||||
type: "pictorialBar",
|
fontWeight: 400,
|
||||||
barWidth: barWidth,
|
interval: 0,
|
||||||
data: data.map(function (item) {
|
formatter: function (value) {
|
||||||
return {
|
return value + "(万元)";
|
||||||
realValue: item,
|
|
||||||
value: maxNum,
|
|
||||||
symbol: bg,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: "right",
|
|
||||||
distance: 80,
|
|
||||||
align: "right",
|
|
||||||
formatter: function (params) {
|
|
||||||
return params.data.realValue + " 万";
|
|
||||||
},
|
},
|
||||||
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);
|
myChart.setOption(option);
|
||||||
window.addEventListener("resize", () => {
|
window.addEventListener("resize", () => {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
|
|
@ -1567,7 +1714,7 @@ export default {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
#detailedTwo2 {
|
#detailedTwo2 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 400px;
|
height: 350px;
|
||||||
}
|
}
|
||||||
#detailedTwo3 {
|
#detailedTwo3 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
1979
src/views/index.vue
1979
src/views/index.vue
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue