|
|
@@ -0,0 +1,317 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="divrow">
|
|
|
+ <div class="divCol">
|
|
|
+ <div class="divImg">
|
|
|
+ <img
|
|
|
+ src="/static/images/overview/icon_yrkkg.png"
|
|
|
+ style="height: 3.1rem; width: 3.1rem"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="divText">
|
|
|
+ <div>
|
|
|
+ <span style="color: #fff">监测图斑数</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="numberColor">{{ 158.38 }}km²</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="divCol">
|
|
|
+ <div class="divImg">
|
|
|
+ <img
|
|
|
+ src="/static/images/overview/icon_yrkkg.png"
|
|
|
+ style="height: 3.1rem; width: 3.1rem"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="divText">
|
|
|
+ <div>
|
|
|
+ <span style="color: #fff">监测面积</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="numberColor">{{ 153.17 }}km²</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="echars">
|
|
|
+ <div class="echartTitle">
|
|
|
+ <div class="block-title">监测类型情况</div>
|
|
|
+ <div class="selectTab">
|
|
|
+ <el-select
|
|
|
+ v-model="tab"
|
|
|
+ placeholder="请选择"
|
|
|
+ :popper-append-to-body="true"
|
|
|
+ @change="GetInfo()"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="echars2">
|
|
|
+ <div ref="echars_pie" id="echars_pie"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Statistics
|
|
|
+ title="图斑分布情况"
|
|
|
+ :cityList="cityList"
|
|
|
+ height="270"
|
|
|
+ ></Statistics>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Statistics from "./statistics";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Statistics,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tab: 1,
|
|
|
+ options: [
|
|
|
+ { name: "图斑数", value: 1 },
|
|
|
+ { name: "监测面积", value: 2 },
|
|
|
+ ],
|
|
|
+ myChart: null,
|
|
|
+ cityList: [
|
|
|
+ {
|
|
|
+ name: "天涯区",
|
|
|
+ number: 125,
|
|
|
+ area: 48.73,
|
|
|
+ unit: "km²",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "崖州区",
|
|
|
+ number: 125,
|
|
|
+ area: 48.73,
|
|
|
+ unit: "km²",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "海棠区",
|
|
|
+ number: 125,
|
|
|
+ area: 48.73,
|
|
|
+ unit: "km²",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "吉阳区",
|
|
|
+ number: 125,
|
|
|
+ area: 48.73,
|
|
|
+ unit: "km²",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted() {
|
|
|
+ this.initEcharts();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initEcharts(payload) {
|
|
|
+ console.log(payload);
|
|
|
+ this.myChart = echarts.init(this.$refs.echars_pie);
|
|
|
+
|
|
|
+ var names = [
|
|
|
+ "新增耕地",
|
|
|
+ "新增园地",
|
|
|
+ "新增林地",
|
|
|
+ "新增草地",
|
|
|
+ "新增湿地",
|
|
|
+ "新增农村道路用地",
|
|
|
+ "新增农业设施大棚",
|
|
|
+ "新增教育用地、体育用地",
|
|
|
+ "新增建筑物",
|
|
|
+ "新增工业用地、物流仓储用地、储备库用地",
|
|
|
+ ],
|
|
|
+ values = [];
|
|
|
+ for (var a = 0; a < 10; a++) {
|
|
|
+ values.push(Math.round(Math.random() * 100));
|
|
|
+ }
|
|
|
+
|
|
|
+ // qxslyqsLineEcharts.setOption({
|
|
|
+
|
|
|
+ // });
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ // backgroundColor: "#041139",
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 10,
|
|
|
+ left: 30,
|
|
|
+ right: 20,
|
|
|
+ bottom: 60,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ data: names,
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#D8F0FF",
|
|
|
+ fontSize: 11,
|
|
|
+ },
|
|
|
+ interval: 0,
|
|
|
+ // rotate: 30,
|
|
|
+ margin: 10, //刻度标签与轴线之间的距离。
|
|
|
+ rotate: 40,
|
|
|
+ // 超过4个字显示省略号
|
|
|
+ formatter: function (value) {
|
|
|
+ if (value.length > 5) {
|
|
|
+ return `${value.slice(0, 5)}...`;
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false, //不显示x轴
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(53,65,95,1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false, //不显示刻度
|
|
|
+ },
|
|
|
+ boundaryGap: true,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false, //不显示x轴
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(53,65,95,1)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#D8F0FF",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ // 柱体
|
|
|
+ {
|
|
|
+ name: "监测类型情况",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 15,
|
|
|
+ showBackground: true,
|
|
|
+ backgroundStyle: {
|
|
|
+ color: "rgba(105,160,231,0.2)",
|
|
|
+ borderRadius: [30, 30, 30, 30],
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: "#E5E5E5",
|
|
|
+ // barBorderRadius: 24
|
|
|
+ // },
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ type: "linear",
|
|
|
+ global: false,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ //第一节下面
|
|
|
+ offset: 0,
|
|
|
+ color: "#00D5FF",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#10274B",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ borderRadius: [30, 30, 30, 30],
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false, //每条柱状图是否显示数字
|
|
|
+ formatter: "{c}",
|
|
|
+ position: "top",
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ data: values,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ beforeDestroy() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.divrow {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.divImg {
|
|
|
+ width: 30%;
|
|
|
+}
|
|
|
+
|
|
|
+img {
|
|
|
+ height: 3.1rem;
|
|
|
+ width: 3.1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.divCol {
|
|
|
+ width: 184px;
|
|
|
+ height: 75px;
|
|
|
+ background: inherit;
|
|
|
+ background-color: rgba(104, 244, 251, 0.21568627);
|
|
|
+ border: none;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ white-space: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 15px;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+
|
|
|
+.divText {
|
|
|
+ width: 65%;
|
|
|
+ padding-left: 0.5rem;
|
|
|
+ .numberColor {
|
|
|
+ font-weight: 700;
|
|
|
+ font-style: normal;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #00ffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+#echars_pie {
|
|
|
+ height: 260px;
|
|
|
+ width: 402px;
|
|
|
+}
|
|
|
+</style>
|
lkk
