|
|
@@ -52,53 +52,23 @@
|
|
|
></el-input>
|
|
|
</div>
|
|
|
<div class="infoLIst">
|
|
|
- <div class="infoItem">
|
|
|
- <div class="itemIcon"></div>
|
|
|
- <div class="itemCon">
|
|
|
- <p>吉阳区大茅村太葵组</p>
|
|
|
- <p>
|
|
|
- <span>已出让</span>
|
|
|
- <span>商服用地</span>
|
|
|
- <span>0.99公顷</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="itemStatus"></div>
|
|
|
- </div>
|
|
|
- <div class="infoItem">
|
|
|
- <div class="itemIcon"></div>
|
|
|
- <div class="itemCon">
|
|
|
- <p>吉阳区大茅村太葵组</p>
|
|
|
- <p>
|
|
|
- <span>已出让</span>
|
|
|
- <span>商服用地</span>
|
|
|
- <span>0.99公顷</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="itemStatus"></div>
|
|
|
- </div>
|
|
|
- <div class="infoItem">
|
|
|
- <div class="itemIcon"></div>
|
|
|
- <div class="itemCon">
|
|
|
- <p>吉阳区大茅村太葵组</p>
|
|
|
- <p>
|
|
|
- <span>已出让</span>
|
|
|
- <span>商服用地</span>
|
|
|
- <span>0.99公顷</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="itemStatus"></div>
|
|
|
- </div>
|
|
|
- <div class="infoItem">
|
|
|
+ <div
|
|
|
+ class="infoItem"
|
|
|
+ v-for="(item, index) in jiDataInfo"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
<div class="itemIcon"></div>
|
|
|
<div class="itemCon">
|
|
|
- <p>吉阳区大茅村太葵组</p>
|
|
|
+ <p>{{ item.xmmc }}</p>
|
|
|
<p>
|
|
|
- <span>已出让</span>
|
|
|
- <span>商服用地</span>
|
|
|
- <span>0.99公顷</span>
|
|
|
+ <span>{{ item.yelx }}</span>
|
|
|
+ <span>{{ item.tdyt }}</span>
|
|
|
+ <span>{{ item.crnj }}公顷</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
- <div class="itemStatus"></div>
|
|
|
+ <div
|
|
|
+ :class="item.yelx == '已出让' ? 'itemStatus1' : 'itemStatus2'"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -115,7 +85,8 @@
|
|
|
|
|
|
<script>
|
|
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
-
|
|
|
+// 定义myCharts用于统计图自适应
|
|
|
+let myCharts;
|
|
|
export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
@@ -132,7 +103,10 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
value: "国有建设用地",
|
|
|
- input: ""
|
|
|
+ input: "",
|
|
|
+ jiDataInfo: [], //集体信息列表
|
|
|
+ option: {},
|
|
|
+ setInterValAl: null
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -144,12 +118,51 @@ export default {
|
|
|
created() {}, //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
methods: {
|
|
|
+ getInfo() {
|
|
|
+ this.jiDataInfo = [
|
|
|
+ {
|
|
|
+ yelx: "未出让",
|
|
|
+ xmmc: "吉阳区大茅村太葵组",
|
|
|
+ crnj: 0.99,
|
|
|
+ val0: "区",
|
|
|
+ id: "46",
|
|
|
+ tdyt: "商服用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yelx: "未出让",
|
|
|
+ xmmc: "崖州区南山村委员会大出水小组",
|
|
|
+ crnj: 0.31,
|
|
|
+ val0: "区",
|
|
|
+ id: "46",
|
|
|
+ tdyt: "工业用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yelx: "未出让",
|
|
|
+ xmmc: "崖州区梅联社区居民委员会农民集体",
|
|
|
+ crnj: 0.89,
|
|
|
+ val0: "区",
|
|
|
+ id: "46",
|
|
|
+ tdyt: "商服用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ yelx: "已出让",
|
|
|
+ xmmc: "天涯区集体经营性建设用地",
|
|
|
+ crnj: 0.26,
|
|
|
+ val0: "区",
|
|
|
+ id: "46",
|
|
|
+ tdyt: "商服用地"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ },
|
|
|
changeCharts(evt) {
|
|
|
console.log(evt);
|
|
|
this.value = evt;
|
|
|
this.stateOwnedOrcollective = !this.stateOwnedOrcollective;
|
|
|
if (this.stateOwnedOrcollective) {
|
|
|
this.init_rsyt_echart();
|
|
|
+ this.getInfo();
|
|
|
+ // 清楚定时器
|
|
|
+ clearInterval(this.setInterValAl);
|
|
|
// this.init_rsyt_echart2();
|
|
|
}
|
|
|
},
|
|
|
@@ -161,20 +174,57 @@ export default {
|
|
|
var dom = document.getElementById("across_echart");
|
|
|
var myChart = window.echarts.init(dom);
|
|
|
|
|
|
- var dataList = [
|
|
|
+ // window.addEventListener("resize", function() {
|
|
|
+ // myCharts.resize();
|
|
|
+ // });
|
|
|
+
|
|
|
+ var tempdata = [
|
|
|
{
|
|
|
- value: 310,
|
|
|
- name: "已出让"
|
|
|
+ yelx: "已出让",
|
|
|
+ xmmc: "崖州区南山村委员会大出水小组",
|
|
|
+ crnj: 0.31,
|
|
|
+ val0: "区",
|
|
|
+ id: "46",
|
|
|
+ tdyt: "工业用地"
|
|
|
},
|
|
|
{
|
|
|
- value: 234,
|
|
|
- name: "已划拨"
|
|
|
+ yelx: "已划拨",
|
|
|
+ xmmc: "崖州区梅联社区居民委员会农民集体",
|
|
|
+ crnj: 0.89,
|
|
|
+ val0: "区",
|
|
|
+ id: "46",
|
|
|
+ tdyt: "商服用地"
|
|
|
},
|
|
|
{
|
|
|
- value: 135,
|
|
|
- name: "未供应"
|
|
|
+ yelx: "未供应",
|
|
|
+ xmmc: "天涯区集体经营性建设用地",
|
|
|
+ crnj: 0.26,
|
|
|
+ val0: "区",
|
|
|
+ id: "46",
|
|
|
+ tdyt: "商服用地"
|
|
|
}
|
|
|
];
|
|
|
+
|
|
|
+ var dataList = [];
|
|
|
+ tempdata.forEach(item => {
|
|
|
+ dataList.push({ value: item.crnj, name: item.yelx });
|
|
|
+ });
|
|
|
+
|
|
|
+ // var dataList = [
|
|
|
+ // {
|
|
|
+ // value: 310,
|
|
|
+ // name: "已出让"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // value: 234,
|
|
|
+ // name: "已划拨"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // value: 135,
|
|
|
+ // name: "未供应"
|
|
|
+ // }
|
|
|
+ // ];
|
|
|
+
|
|
|
var color2 = [
|
|
|
{
|
|
|
color: {
|
|
|
@@ -353,8 +403,271 @@ export default {
|
|
|
},
|
|
|
init_vertical_echart() {
|
|
|
var dom = document.getElementById("vertical_echart");
|
|
|
- var myChart = window.echarts.init(dom);
|
|
|
- let option = {
|
|
|
+ myCharts = window.echarts.init(dom);
|
|
|
+
|
|
|
+ var jhgymj = []; //计划供应面积
|
|
|
+ var ygimj = []; //已供应面积
|
|
|
+ var jhgyxm = []; //计划供应项目
|
|
|
+ var wcgyxm = []; //完成供应项目
|
|
|
+ var allType = []; //所有统计类型名称
|
|
|
+
|
|
|
+ let tempdata = [
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 0,
|
|
|
+ ce_xzqhdm_number: 4,
|
|
|
+ jh_xzqhdm_number: 4,
|
|
|
+ ce_crmj: 16.27,
|
|
|
+ sj_crmj: 0,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0,
|
|
|
+ jh_crmj: 16.27,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "仓储用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 1,
|
|
|
+ ce_xzqhdm_number: 5,
|
|
|
+ jh_xzqhdm_number: 6,
|
|
|
+ ce_crmj: 42.24,
|
|
|
+ sj_crmj: 12.39,
|
|
|
+ sj_hb_xzqhdm_number: 1,
|
|
|
+ sj_hb_crmj: 12.39,
|
|
|
+ jh_crmj: 54.63,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0.0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "工矿用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 0,
|
|
|
+ ce_xzqhdm_number: 1,
|
|
|
+ jh_xzqhdm_number: 1,
|
|
|
+ ce_crmj: 4.87,
|
|
|
+ sj_crmj: 0,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0,
|
|
|
+ jh_crmj: 4.87,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "工矿用地、商业服务业用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 3,
|
|
|
+ ce_xzqhdm_number: 24,
|
|
|
+ jh_xzqhdm_number: 27,
|
|
|
+ ce_crmj: 91.5,
|
|
|
+ sj_crmj: 2.25,
|
|
|
+ sj_hb_xzqhdm_number: 1,
|
|
|
+ sj_hb_crmj: 2.18,
|
|
|
+ jh_crmj: 93.75,
|
|
|
+ sj_cr_xzqhdm_number: 2,
|
|
|
+ sj_cr_crmj: 0.07,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "公共管理与公共服务用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 0,
|
|
|
+ ce_xzqhdm_number: 1,
|
|
|
+ jh_xzqhdm_number: 1,
|
|
|
+ ce_crmj: 0.33,
|
|
|
+ sj_crmj: 0,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0,
|
|
|
+ jh_crmj: 0.33,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "公共设施用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 0,
|
|
|
+ ce_xzqhdm_number: 11,
|
|
|
+ jh_xzqhdm_number: 11,
|
|
|
+ ce_crmj: 23.42,
|
|
|
+ sj_crmj: 0,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0,
|
|
|
+ jh_crmj: 23.42,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "公用设施用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 0,
|
|
|
+ ce_xzqhdm_number: 2,
|
|
|
+ jh_xzqhdm_number: 2,
|
|
|
+ ce_crmj: 7.43,
|
|
|
+ sj_crmj: 0,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0,
|
|
|
+ jh_crmj: 7.43,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "交通运"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 1,
|
|
|
+ ce_xzqhdm_number: 23,
|
|
|
+ jh_xzqhdm_number: 24,
|
|
|
+ ce_crmj: 146.91,
|
|
|
+ sj_crmj: 10.97,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0.0,
|
|
|
+ jh_crmj: 157.88,
|
|
|
+ sj_cr_xzqhdm_number: 1,
|
|
|
+ sj_cr_crmj: 10.97,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "交通运输用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 1,
|
|
|
+ ce_xzqhdm_number: 22,
|
|
|
+ jh_xzqhdm_number: 23,
|
|
|
+ ce_crmj: 93.15,
|
|
|
+ sj_crmj: 13.06,
|
|
|
+ sj_hb_xzqhdm_number: 1,
|
|
|
+ sj_hb_crmj: 13.06,
|
|
|
+ jh_crmj: 106.21,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0.0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "居住用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 0,
|
|
|
+ ce_xzqhdm_number: 1,
|
|
|
+ jh_xzqhdm_number: 1,
|
|
|
+ ce_crmj: 1.98,
|
|
|
+ sj_crmj: 0,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0,
|
|
|
+ jh_crmj: 1.98,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "居住用地混合公共管理与公共服务用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 0,
|
|
|
+ ce_xzqhdm_number: 1,
|
|
|
+ jh_xzqhdm_number: 1,
|
|
|
+ ce_crmj: 0.27,
|
|
|
+ sj_crmj: 0,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0,
|
|
|
+ jh_crmj: 0.27,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "居住用地混合交通运输用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 0,
|
|
|
+ ce_xzqhdm_number: 1,
|
|
|
+ jh_xzqhdm_number: 1,
|
|
|
+ ce_crmj: 10.61,
|
|
|
+ sj_crmj: 0,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0,
|
|
|
+ jh_crmj: 10.61,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "居住用地混合其他用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 0,
|
|
|
+ ce_xzqhdm_number: 5,
|
|
|
+ jh_xzqhdm_number: 5,
|
|
|
+ ce_crmj: 27.16,
|
|
|
+ sj_crmj: 0,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0,
|
|
|
+ jh_crmj: 27.16,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "居住用地混合商业服务业用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 0,
|
|
|
+ ce_xzqhdm_number: 1,
|
|
|
+ jh_xzqhdm_number: 1,
|
|
|
+ ce_crmj: 24.23,
|
|
|
+ sj_crmj: 0,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0,
|
|
|
+ jh_crmj: 24.23,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "绿地与开敞空间用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 1,
|
|
|
+ ce_xzqhdm_number: 13,
|
|
|
+ jh_xzqhdm_number: 14,
|
|
|
+ ce_crmj: 48.68,
|
|
|
+ sj_crmj: 7.19,
|
|
|
+ sj_hb_xzqhdm_number: 1,
|
|
|
+ sj_hb_crmj: 7.19,
|
|
|
+ jh_crmj: 55.87,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0.0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "商业服务业用地"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sj_xzqhdm_number: 0,
|
|
|
+ ce_xzqhdm_number: 2,
|
|
|
+ jh_xzqhdm_number: 2,
|
|
|
+ ce_crmj: 18.59,
|
|
|
+ sj_crmj: 0,
|
|
|
+ sj_hb_xzqhdm_number: 0,
|
|
|
+ sj_hb_crmj: 0,
|
|
|
+ jh_crmj: 18.59,
|
|
|
+ sj_cr_xzqhdm_number: 0,
|
|
|
+ sj_cr_crmj: 0,
|
|
|
+ id: "46",
|
|
|
+ tdyt: "特殊用地"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ tempdata.forEach(item => {
|
|
|
+ allType.push(item.tdyt);
|
|
|
+ jhgymj.push(item.jh_crmj);
|
|
|
+ ygimj.push(item.sj_crmj);
|
|
|
+ jhgyxm.push(item.jh_xzqhdm_number);
|
|
|
+ wcgyxm.push(item.sj_xzqhdm_number);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 统计图的滚动属性
|
|
|
+ const dataZoom = [
|
|
|
+ {
|
|
|
+ show: false,
|
|
|
+ height: 12,
|
|
|
+ xAxisIndex: [0],
|
|
|
+ bottom: "5%",
|
|
|
+ start: 0,
|
|
|
+ end: 30,
|
|
|
+ handleIcon:
|
|
|
+ "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
|
|
|
+ handleSize: "110%",
|
|
|
+ handleStyle: {
|
|
|
+ color: "#d3dee5"
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ },
|
|
|
+ borderColor: "#90979c"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ this.option = {
|
|
|
backgroundColor: "rgba(0,0,0,0)",
|
|
|
// backgroundColor: transparent,
|
|
|
color: ["rgba(81, 151, 214, 1)", "rgba(16, 67, 118, 1)"],
|
|
|
@@ -402,20 +715,21 @@ export default {
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
- data: [
|
|
|
- "居住用地",
|
|
|
- "公共管理与公共服务用地",
|
|
|
- "商业服务业用地",
|
|
|
- "工矿用地",
|
|
|
- "仓储用地",
|
|
|
- // "工矿用地仓储用地",
|
|
|
- "交通运输用地",
|
|
|
- "公用设施用地",
|
|
|
- // "绿地与开敞空间用地特殊用地",
|
|
|
- "绿地与开敞空间用地",
|
|
|
- "特殊用地",
|
|
|
- "留白用地"
|
|
|
- ],
|
|
|
+ // data: [
|
|
|
+ // "居住用地",
|
|
|
+ // "公共管理与公共服务用地",
|
|
|
+ // "商业服务业用地",
|
|
|
+ // "工矿用地",
|
|
|
+ // "仓储用地",
|
|
|
+ // // "工矿用地仓储用地",
|
|
|
+ // "交通运输用地",
|
|
|
+ // "公用设施用地",
|
|
|
+ // // "绿地与开敞空间用地特殊用地",
|
|
|
+ // "绿地与开敞空间用地",
|
|
|
+ // "特殊用地",
|
|
|
+ // "留白用地"
|
|
|
+ // ],
|
|
|
+ data: allType,
|
|
|
axisTick: {
|
|
|
show: true
|
|
|
},
|
|
|
@@ -502,14 +816,13 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
- // {symbol: 'circle'},
|
|
|
-
|
|
|
{
|
|
|
name: "计划供应面积",
|
|
|
type: "bar",
|
|
|
stack: "总量",
|
|
|
barWidth: "40%",
|
|
|
- data: ["33", "34", "36", "39", "44", "49", "65", "69", "75", "3"],
|
|
|
+ // data: ["33", "34", "36", "39", "44", "49", "65", "69", "75", "3"],
|
|
|
+ data: jhgymj,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
@@ -529,7 +842,8 @@ export default {
|
|
|
stack: "总量",
|
|
|
// barWidth: "40%",
|
|
|
barWidth: 39,
|
|
|
- data: ["10", "10", "10", "10", "11", "11", "11", "10", "10", "3"],
|
|
|
+ // data: ["10", "10", "10", "10", "11", "11", "11", "10", "10", "3"],
|
|
|
+ data: ygimj,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
@@ -561,7 +875,8 @@ export default {
|
|
|
lineStyle: {
|
|
|
color: "rgba(70, 138, 115, 1)"
|
|
|
},
|
|
|
- data: ["23", "24", "26", "28", "29", "31", "32", "31", "33", "34"]
|
|
|
+ // data: ["23", "24", "26", "28", "29", "31", "32", "31", "33", "34"]
|
|
|
+ data: jhgyxm
|
|
|
},
|
|
|
{
|
|
|
name: "完成供应项目",
|
|
|
@@ -581,16 +896,19 @@ export default {
|
|
|
lineStyle: {
|
|
|
color: "rgba(144, 60, 80, 1)"
|
|
|
},
|
|
|
- data: ["30", "32", "34", "39", "41", "32", "30", "25", "28", "34"]
|
|
|
+ // data: ["30", "32", "34", "39", "41", "32", "30", "25", "28", "34"]
|
|
|
+ data: wcgyxm
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ dataZoom
|
|
|
};
|
|
|
|
|
|
- myChart.on('click', function(params) {
|
|
|
- console.log('点击了柱状图:', params.name,params.data);
|
|
|
- });
|
|
|
+ myCharts.on("click", function(params) {
|
|
|
+ console.log("点击了柱状图:", params.name, params.data);
|
|
|
+ });
|
|
|
|
|
|
- myChart.setOption(option);
|
|
|
+ myCharts.setOption(this.option);
|
|
|
+ this.setIntervalAll();
|
|
|
},
|
|
|
|
|
|
init_rsyt_echart() {
|
|
|
@@ -609,6 +927,47 @@ export default {
|
|
|
"#ea7ccc"
|
|
|
];
|
|
|
// 传入数据生成 option
|
|
|
+
|
|
|
+ // var tempdata = [
|
|
|
+ // {
|
|
|
+ // sj_xzqhdm_number: 0,
|
|
|
+ // ce_xzqhdm_number: 1,
|
|
|
+ // jh_xzqhdm_number: 1,
|
|
|
+ // ce_crmj: 0.31,
|
|
|
+ // sj_crmj: 0,
|
|
|
+ // sj_hb_xzqhdm_number: 0,
|
|
|
+ // sj_hb_crmj: 0,
|
|
|
+ // jh_crmj: 0.31,
|
|
|
+ // sj_cr_xzqhdm_number: 0,
|
|
|
+ // sj_cr_crmj: 0,
|
|
|
+ // id: "46",
|
|
|
+ // tdyt: "工业用地"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // sj_xzqhdm_number: 1,
|
|
|
+ // ce_xzqhdm_number: 1,
|
|
|
+ // jh_xzqhdm_number: 2,
|
|
|
+ // ce_crmj: 1.62,
|
|
|
+ // sj_crmj: 0.26,
|
|
|
+ // sj_hb_xzqhdm_number: 1,
|
|
|
+ // sj_hb_crmj: 0.26,
|
|
|
+ // jh_crmj: 1.88,
|
|
|
+ // sj_cr_xzqhdm_number: 0,
|
|
|
+ // sj_cr_crmj: 0.0,
|
|
|
+ // id: "46",
|
|
|
+ // tdyt: "商服用地"
|
|
|
+ // }
|
|
|
+ // ];
|
|
|
+ // let optionsData = []
|
|
|
+ // tempdata.forEach((item)=>{
|
|
|
+ // optionsData.push(
|
|
|
+ // {
|
|
|
+ // name: item.tdyt,
|
|
|
+ // value: 68
|
|
|
+ // },
|
|
|
+ // )
|
|
|
+ // })
|
|
|
+
|
|
|
const optionsData = [
|
|
|
{
|
|
|
name: "商服用地面积",
|
|
|
@@ -947,16 +1306,44 @@ export default {
|
|
|
series: series
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @return {*}
|
|
|
+ * @author: liukeke
|
|
|
+ * @description: 设置定时器保证统计图的轮播
|
|
|
+ */
|
|
|
+ setIntervalAll() {
|
|
|
+ // 重设this指向
|
|
|
+ const that = this;
|
|
|
+ // 定时器
|
|
|
+ this.setInterValAl = setInterval(function() {
|
|
|
+ // 每次向后滚动一个，最后一个从头开始。
|
|
|
+ if (that.option.dataZoom[0].start == 30) {
|
|
|
+ that.option.dataZoom[0].end = 30;
|
|
|
+ that.option.dataZoom[0].start = 0;
|
|
|
+ } else {
|
|
|
+ that.option.dataZoom[0].end = that.option.dataZoom[0].end + 5;
|
|
|
+ that.option.dataZoom[0].start = that.option.dataZoom[0].start + 5;
|
|
|
+ // console.log(that.option_sevenWG.dataZoom[0].end);
|
|
|
+ // console.log(that.option_sevenWG.dataZoom[0].start);
|
|
|
+ }
|
|
|
+ myCharts.setOption(that.option);
|
|
|
+ }, 5000);
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.init_across_echart();
|
|
|
- this.init_vertical_echart();
|
|
|
this.init_rsyt_echart();
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.init_vertical_echart();
|
|
|
+ });
|
|
|
},
|
|
|
beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ beforeDestroy() {
|
|
|
+ // 清楚定时器
|
|
|
+ clearInterval(this.setInterValAl);
|
|
|
+ }, //生命周期 - 销毁之前
|
|
|
destroy() {}, //生命周期 - 销毁完成
|
|
|
activated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
|
|
|
deactivated() {} //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
|
|
|
@@ -1062,18 +1449,18 @@ export default {
|
|
|
.el-select-dropdown__item.selected {
|
|
|
color: #409eff;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-/deep/ .el-popper[x-placement^=bottom] {
|
|
|
- margin-top: 12px;
|
|
|
- background: #163253;
|
|
|
-}
|
|
|
-/deep/ .el-select-dropdown{
|
|
|
- border: none;
|
|
|
-}/deep/ .el-popper[x-placement^=bottom] .popper__arrow::after{
|
|
|
- border-bottom-color:#163253;
|
|
|
- top: 0;
|
|
|
-}
|
|
|
+ /deep/ .el-popper[x-placement^="bottom"] {
|
|
|
+ margin-top: 12px;
|
|
|
+ background: #163253;
|
|
|
+ }
|
|
|
+ /deep/ .el-select-dropdown {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ /deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
|
|
|
+ border-bottom-color: #163253;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1310,11 +1697,17 @@ export default {
|
|
|
// background-color: #faa012;
|
|
|
// line-height: 1.55rem;
|
|
|
p {
|
|
|
- width: 80%5;
|
|
|
height: 41%;
|
|
|
line-height: 1.55rem;
|
|
|
color: #ecf6ff;
|
|
|
}
|
|
|
+ p:first-child {
|
|
|
+ width: 177px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ color: #ecf6ff;
|
|
|
+ }
|
|
|
p:nth-child(2) {
|
|
|
span {
|
|
|
padding: 0 0.4rem;
|
|
|
@@ -1326,7 +1719,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .itemStatus {
|
|
|
+ .itemStatus1 {
|
|
|
background: url("/static/images/overview/yrsIcon.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 62px;
|
|
|
@@ -1334,6 +1727,14 @@ export default {
|
|
|
position: relative;
|
|
|
right: -30px;
|
|
|
}
|
|
|
+ .itemStatus2 {
|
|
|
+ background: url("/static/images/overview/wrsIcon.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 62px;
|
|
|
+ height: 18px;
|
|
|
+ position: relative;
|
|
|
+ right: -30px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
zpf
