|
|
@@ -3,20 +3,6 @@
|
|
|
<div class="box1">
|
|
|
<div class="title">
|
|
|
土地供应
|
|
|
- <div class="buttons">
|
|
|
- <!-- <div class="stateOwnedButton tdgyButton" @click="switchStateOwnedButton">
|
|
|
- 国有建设用地
|
|
|
- </div>
|
|
|
- <div class="stateOwnedButton tdgyButton" @click="switchStateOwnedButton">
|
|
|
- 集体经营性土地
|
|
|
- </div> -->
|
|
|
- <div class="stateOwnedButton tdgyButton">
|
|
|
- 国有建设用地
|
|
|
- </div>
|
|
|
- <div class="stateOwnedButton tdgyButton">
|
|
|
- 集体经营性土地
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="stateOwnedOrcollective" v-show="stateOwnedOrcollective">
|
|
|
@@ -114,10 +100,8 @@
|
|
|
<div id="across_echart">
|
|
|
|
|
|
</div>
|
|
|
- <!-- <div class="echartInfo">
|
|
|
- <p>计划供应项目 <span>123</span>个</p>
|
|
|
- </div> -->
|
|
|
- <div id="verticalEchart">
|
|
|
+
|
|
|
+ <div id="vertical_echart">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -154,7 +138,6 @@ export default {
|
|
|
|
|
|
var dom = document.getElementById('across_echart');
|
|
|
var myChart = window.echarts.init(dom);
|
|
|
- console.log(myChart, "myChart");
|
|
|
|
|
|
//做环形图的本质是 radius: ['内半径', '外半径'] 内半径!=0
|
|
|
const backgroundColor = 'rgba(0,0,0,0)';
|
|
|
@@ -266,13 +249,306 @@ export default {
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
+ },
|
|
|
+ init_vertical_echart() {
|
|
|
+
|
|
|
+ var dom = document.getElementById('vertical_echart');
|
|
|
+ var myChart = window.echarts.init(dom);
|
|
|
+ let option = {
|
|
|
+ "backgroundColor": "rgba(0,0,0,1)",
|
|
|
+ "color": [
|
|
|
+ "rgba(81, 151, 214, 1)",
|
|
|
+ "rgba(16, 67, 118, 1)",
|
|
|
+ ],
|
|
|
+ "title": {
|
|
|
+ },
|
|
|
+ "legend": {
|
|
|
+ "orient": "horizontal",
|
|
|
+ "data": [
|
|
|
+ {
|
|
|
+ "name": "计划供应面积"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "已供应面积"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "计划供应项目"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "完成供应项目"
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ "left": 0,
|
|
|
+ "top": "4%",
|
|
|
+ "textStyle": {
|
|
|
+ "color": "#666",
|
|
|
+ "fontSize": 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "grid": {
|
|
|
+ left: '2%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '6%',
|
|
|
+ top: '16%',
|
|
|
+ "containLabel": true
|
|
|
+ },
|
|
|
+ "tooltip": {
|
|
|
+ "trigger": "axis",
|
|
|
+ "axisPointer": {
|
|
|
+ "type": "shadow"
|
|
|
+ },
|
|
|
+ "textStyle": {
|
|
|
+ "align": "left"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "xAxis": [
|
|
|
+ {
|
|
|
+
|
|
|
+ "type": "category",
|
|
|
+ "data": [
|
|
|
+ "公告管理", "公共管理与公共服务用地", "商业服务业用地", "工矿用地仓储用地", "交通运输用地", "公用设施用地", "绿地与开敞空间用地特殊用地", "留白用地"
|
|
|
+ ],
|
|
|
+ "axisTick": {
|
|
|
+ "show": true,
|
|
|
+
|
|
|
+ },
|
|
|
+ "axisLine": {
|
|
|
+ "show": true,//是否显示轴线
|
|
|
+ "lineStyle": {
|
|
|
+ "color": '#D9D9D9',//刻度线的颜色
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ "axisLabel": {
|
|
|
+ "show": true,
|
|
|
+ "textStyle": {
|
|
|
+ "color": "#fff",
|
|
|
+ "fontSize": 14
|
|
|
+ },
|
|
|
+ "formatter": function (value) {
|
|
|
+ let fast = "";
|
|
|
+ if (value.length >= 4) {
|
|
|
+ fast = value.slice(0, 4);
|
|
|
+ fast += "..."
|
|
|
+ } else {
|
|
|
+ fast = value
|
|
|
+ }
|
|
|
+ return fast;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "yAxis": [
|
|
|
+ {
|
|
|
+ name: "面积/公顷",
|
|
|
+
|
|
|
+ "type": "value",
|
|
|
+ "max": "260",
|
|
|
+ "axisTick": {
|
|
|
+ "show": false
|
|
|
+ },
|
|
|
+ "axisLine": {
|
|
|
+ "show": true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "axisLabel": {
|
|
|
+ "show": true,
|
|
|
+ "textStyle": {
|
|
|
+ "color": "#fff",
|
|
|
+ "fontSize": 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ "splitLine": {
|
|
|
+ "show": true,
|
|
|
+ "lineStyle": {
|
|
|
+ "color": "rgba(255,255,255,0.4)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "项目数/个",
|
|
|
+ "max": "45",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ },
|
|
|
+ position: "right",
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#cdd5e2'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ formatter: "{value}", //右侧Y轴文字显示
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 14,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // dataZoom: [
|
|
|
+ // {
|
|
|
+ // show: true,
|
|
|
+ // realtime: true,
|
|
|
+ // "height": 12,
|
|
|
+ // start: 0,
|
|
|
+ // end: 70,
|
|
|
+ // bottom: '2%',
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: 'inside',
|
|
|
+ // realtime: true,
|
|
|
+ // "height": 12,
|
|
|
+ // start: 0,
|
|
|
+ // end: 70
|
|
|
+ // }
|
|
|
+ // ],
|
|
|
+ "series": [
|
|
|
+ // {symbol: 'circle'},
|
|
|
+
|
|
|
+ {
|
|
|
+ "name": "计划供应面积",
|
|
|
+ "type": "bar",
|
|
|
+ "stack": "总量",
|
|
|
+ "barWidth": "40%",
|
|
|
+ "data": [
|
|
|
+ "33",
|
|
|
+ "34",
|
|
|
+ "36",
|
|
|
+ "39",
|
|
|
+ "44",
|
|
|
+ "49",
|
|
|
+ "65",
|
|
|
+ "69",
|
|
|
+ "75",
|
|
|
+ "3",
|
|
|
+ ],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false, //开启显示
|
|
|
+ textStyle: { //数值样式
|
|
|
+ color: '#333',
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "已供应面积",
|
|
|
+ "type": "bar",
|
|
|
+ "stack": "总量",
|
|
|
+ "barWidth": "40%",
|
|
|
+ "data": [
|
|
|
+ "10",
|
|
|
+ "10",
|
|
|
+ "10",
|
|
|
+ "10",
|
|
|
+ "11",
|
|
|
+ "11",
|
|
|
+ "11",
|
|
|
+ "10",
|
|
|
+ "10",
|
|
|
+ "3",
|
|
|
+ ],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false, //开启显示
|
|
|
+ // position: 'top', //在上方显示
|
|
|
+ textStyle: { //数值样式
|
|
|
+ color: '#333',
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "计划供应项目",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
|
+ smooth: false, //平滑曲线显示
|
|
|
+ symbol: "circle", //标记的图形为实心圆
|
|
|
+ symbolSize: 8, //标记的大小
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgba(255,255,255, 1)',
|
|
|
+ borderColor: 'rgba(70, 138, 115,1)', //圆点透明 边框
|
|
|
+ borderWidth: 3
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(70, 138, 115, 1)'
|
|
|
+ },
|
|
|
+ data: ["23",
|
|
|
+ "24",
|
|
|
+ "26",
|
|
|
+ "28",
|
|
|
+ "29",
|
|
|
+ "31",
|
|
|
+ "32",
|
|
|
+ "31",
|
|
|
+ "33",
|
|
|
+ "34",]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "完成供应项目",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
|
+ smooth: false, //平滑曲线显示
|
|
|
+ symbol: "circle", //标记的图形为实心圆
|
|
|
+ symbolSize: 8, //标记的大小
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgba(255,255,255, 1)',
|
|
|
+
|
|
|
+ borderColor: 'rgba(144, 60, 80, 1)', //圆点透明 边框
|
|
|
+ borderWidth: 3
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(144, 60, 80, 1)"
|
|
|
+ },
|
|
|
+ data: ["30",
|
|
|
+ "32",
|
|
|
+ "34",
|
|
|
+ "39",
|
|
|
+ "41",
|
|
|
+ "32",
|
|
|
+ "30",
|
|
|
+ "25",
|
|
|
+ "28",
|
|
|
+ "34",]
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
}
|
|
|
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
this.init_across_echart();
|
|
|
-
|
|
|
+ this.init_vertical_echart();
|
|
|
+
|
|
|
},
|
|
|
beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
updated() { }, //生命周期 - 更新之后
|
|
|
@@ -413,15 +689,6 @@ export default {
|
|
|
right: 30px;
|
|
|
}
|
|
|
|
|
|
-.tdgyButton {
|
|
|
- display: inline-block;
|
|
|
- color: #AAAAAA;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- border: 1px solid #AAAAAA;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 2px;
|
|
|
-}
|
|
|
|
|
|
.list {
|
|
|
position: absolute;
|
|
|
@@ -478,12 +745,6 @@ export default {
|
|
|
height: 19px;
|
|
|
}
|
|
|
|
|
|
- .buttons {
|
|
|
- display: inline-block;
|
|
|
- position: absolute;
|
|
|
- left: 35px;
|
|
|
- top: 29px;
|
|
|
- }
|
|
|
|
|
|
.lableValue {
|
|
|
|
|
|
@@ -513,6 +774,14 @@ export default {
|
|
|
height: 11rem
|
|
|
}
|
|
|
|
|
|
+#vertical_echart {
|
|
|
+ left: 13rem;
|
|
|
+ top: -10rem;
|
|
|
+ width: 55.5rem;
|
|
|
+ height: 15rem;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
.deficiency_echart {
|
|
|
width: 9.5rem;
|
|
|
height: 9.5rem;
|
zpf