|
|
@@ -43,10 +43,11 @@ export default {
|
|
|
|
|
|
var dom = document.getElementById("scje_echart");
|
|
|
var myChart = window.echarts.init(dom);
|
|
|
- const xData = ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地',"交通运输用地"]
|
|
|
+ const xData = ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"]
|
|
|
// 右侧的立体柱子
|
|
|
- const bottomValue = [1, 22, 3, 4, 6]
|
|
|
- const topValue = [2, 3, 4, 6, 8]
|
|
|
+ const topValue = [10, 3, 4, 6, 8, 10]
|
|
|
+ const bottomValue = [15, 18, 3, 4, 6, 10]
|
|
|
+
|
|
|
// 顶部的柱子立体面
|
|
|
const topImg = bottomValue
|
|
|
.reduce((acc, curr, index) => {
|
|
|
@@ -60,14 +61,27 @@ export default {
|
|
|
// series[3].data = bottomValue
|
|
|
// series[4].data = topImg
|
|
|
let option = {
|
|
|
- backgroundColor: '#192a3d',
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
grid: {
|
|
|
left: '5%',
|
|
|
right: '4%',
|
|
|
- bottom: '0%',
|
|
|
+ bottom: '30%',
|
|
|
top: '15%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
+ legend: {
|
|
|
+ data: ['计划收储', '完成收储'], //图例名称
|
|
|
+ right: '30%', //调整图例位置
|
|
|
+ top: '80%', //调整图例位置
|
|
|
+ itemWidth: 12,
|
|
|
+ itemHeight: 12, //修改icon图形大小
|
|
|
+ icon: 'rectangle', //图例前面的图标形状
|
|
|
+ textStyle: { //图例文字的样式
|
|
|
+ color: '#ccc', //图例文字颜色
|
|
|
+ fontSize: 12 //图例文字大小
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
trigger: 'axis',
|
|
|
@@ -95,28 +109,23 @@ export default {
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
- color: '#3d6790',
|
|
|
+ color: '#ccc',
|
|
|
width: 1
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
+ offset: 5,
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
- textStyle: {
|
|
|
- color: 'rgba(255,255,255,1)',
|
|
|
- fontSize: 15
|
|
|
- }
|
|
|
+ formatter: function (value) {
|
|
|
+ // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
|
|
|
+ if (value.length > 4) {
|
|
|
+ return `${value.slice(0, 4)}...`;
|
|
|
+ } else {
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
- // axisLabel: {
|
|
|
- // interval: 0,
|
|
|
- // formatter: function (value) {
|
|
|
- // // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号；否则直接返回原文字
|
|
|
- // if (value.length > 2) {
|
|
|
- // return `${value.slice(0, 2)}...`;
|
|
|
- // } else {
|
|
|
- // return value;
|
|
|
- // }
|
|
|
- // },
|
|
|
- // },
|
|
|
splitLine: {
|
|
|
show: false
|
|
|
},
|
|
|
@@ -127,6 +136,7 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
yAxis: {
|
|
|
+ "show": false,
|
|
|
type: 'value',
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
@@ -147,20 +157,21 @@ export default {
|
|
|
textStyle: {
|
|
|
color: '#87baf8'
|
|
|
},
|
|
|
- fontSize: 18
|
|
|
+ fontSize: 12
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
// 立体效果通过柱状图的线性渐变色来达到 itemStyle
|
|
|
// 下面的立体面
|
|
|
{
|
|
|
- name: '',
|
|
|
+ name: '计划收储',
|
|
|
type: 'pictorialBar',
|
|
|
symbol: 'diamond',
|
|
|
- symbolSize: [40, 20],
|
|
|
+ symbolSize: [20, 20],
|
|
|
symbolOffset: [-0, 10],
|
|
|
z: 1,
|
|
|
itemStyle: {
|
|
|
+
|
|
|
color: {
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
@@ -172,21 +183,21 @@ export default {
|
|
|
{
|
|
|
offset: 0,
|
|
|
|
|
|
- color: 'rgba(24,152,226,0.5)'
|
|
|
+ color: 'rgba(24,152,226,1)'
|
|
|
},
|
|
|
{
|
|
|
offset: 0.5,
|
|
|
// color: '#1898e2'
|
|
|
- color: 'rgba(24,152,226,0.5)'
|
|
|
+ color: 'rgba(24,152,226,1)'
|
|
|
},
|
|
|
{
|
|
|
offset: 0.5,
|
|
|
- color: 'rgba(18,133,199,0.5)'
|
|
|
+ color: 'rgba(18,133,199,1)'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: 'rgba(18,133,199,0.5)'
|
|
|
+ color: 'rgba(18,133,199,1)'
|
|
|
|
|
|
}
|
|
|
]
|
|
|
@@ -198,7 +209,8 @@ export default {
|
|
|
{
|
|
|
type: 'bar',
|
|
|
name: '时长',
|
|
|
- barWidth: 40, // 柱状图的宽度
|
|
|
+ barWidth: 20, // 柱状图的宽度
|
|
|
+
|
|
|
// z: 11,
|
|
|
stack: 'zs',
|
|
|
label: {
|
|
|
@@ -210,6 +222,7 @@ export default {
|
|
|
distance: 15 //距离头部的距离
|
|
|
},
|
|
|
itemStyle: {
|
|
|
+
|
|
|
color: {
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
@@ -220,22 +233,22 @@ export default {
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: 'rgba(24,152,226,0.5)'
|
|
|
+ color: 'rgba(24,152,226,0.7)'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
offset: 0.5,
|
|
|
- color: 'rgba(24,152,226,0.5)'
|
|
|
+ color: 'rgba(24,152,2260.7)'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
offset: 0.5,
|
|
|
- color: 'rgba(18,133,199,0.5)'
|
|
|
+ color: 'rgba(18,133,1990.7)'
|
|
|
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: 'rgba(18,133,199,0.5)'
|
|
|
+ color: 'rgba(18,133,1990.7)'
|
|
|
|
|
|
}
|
|
|
]
|
|
|
@@ -247,8 +260,9 @@ export default {
|
|
|
{
|
|
|
type: 'bar',
|
|
|
stack: 'zs',
|
|
|
+ barGap: '80%',
|
|
|
|
|
|
- name: '时间',
|
|
|
+ name: '完成收储',
|
|
|
// z: 10,
|
|
|
label: {
|
|
|
show: false,
|
|
|
@@ -259,6 +273,7 @@ export default {
|
|
|
distance: 15
|
|
|
},
|
|
|
itemStyle: {
|
|
|
+ barWidth: 1, // 设置柱子粗细
|
|
|
color: {
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
@@ -269,19 +284,19 @@ export default {
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: 'rgba(246,201,92,0.5)'
|
|
|
+ color: 'rgba(246,201,92,1)'
|
|
|
},
|
|
|
{
|
|
|
offset: 0.5,
|
|
|
- color: 'rgba(246,201,92,0.5)'
|
|
|
+ color: 'rgba(246,201,92,1)'
|
|
|
},
|
|
|
{
|
|
|
offset: 0.5,
|
|
|
- color: 'rgba(190,157,72,0.5)'
|
|
|
+ color: 'rgba(190,157,72,1)'
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: 'rgba(190,157,72,0.5)'
|
|
|
+ color: 'rgba(190,157,72,1)'
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
@@ -294,11 +309,12 @@ export default {
|
|
|
name: '',
|
|
|
type: 'pictorialBar',
|
|
|
symbol: 'diamond',
|
|
|
- symbolSize: [40, 20],
|
|
|
+ symbolSize: [20, 20],
|
|
|
symbolOffset: [-0, -10],
|
|
|
symbolPosition: 'end',
|
|
|
z: 12,
|
|
|
itemStyle: {
|
|
|
+ barWidth: 1, // 设置柱子粗细
|
|
|
color: {
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
@@ -339,7 +355,7 @@ export default {
|
|
|
type: 'pictorialBar',
|
|
|
symbol: 'diamond',
|
|
|
symbolPosition: 'end',
|
|
|
- symbolSize: [40, 20],
|
|
|
+ symbolSize: [20, 20],
|
|
|
symbolOffset: [-0, -10],
|
|
|
z: 20,
|
|
|
// 是否展示总数
|
|
|
@@ -354,7 +370,8 @@ export default {
|
|
|
},
|
|
|
itemStyle: {
|
|
|
opacity: 1,
|
|
|
- color: '#f6c95c'
|
|
|
+ color: '#f6c95c',
|
|
|
+ barWidth: 1, // 设置柱子粗细
|
|
|
},
|
|
|
data: topImg
|
|
|
}
|
|
|
@@ -391,7 +408,7 @@ export default {
|
|
|
left: 1rem;
|
|
|
top: 23.5rem;
|
|
|
width: 416px;
|
|
|
- height: 190px;
|
|
|
+ height: 240px;
|
|
|
border-width: 0px;
|
|
|
background: inherit;
|
|
|
border: none;
|
|
|
@@ -507,8 +524,7 @@ export default {
|
|
|
// position: fixed;
|
|
|
// left: -6rem;
|
|
|
// top: 2.1rem;
|
|
|
- border: #163253 1px solid;
|
|
|
width: 26rem;
|
|
|
- height: 9rem;
|
|
|
+ height: 13rem;
|
|
|
}
|
|
|
</style>
|
zpf