basic_config

package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^1.1.3",
         "core-js": "^3.8.3",
         "deep-clone": "^3.0.3",
+        "echarts": "^5.4.0",
         "element-ui": "^2.15.10",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
@@ -4605,6 +4606,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.0.tgz",
+      "integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -9717,6 +9732,19 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.0.tgz",
+      "integrity": "sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   },
   "dependencies": {
@@ -13275,6 +13303,22 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
+    "echarts": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.0.tgz",
+      "integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -17291,6 +17335,21 @@
       "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.0.tgz",
+      "integrity": "sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -10,6 +10,7 @@
     "axios": "^1.1.3",
     "core-js": "^3.8.3",
     "deep-clone": "^3.0.3",
+    "echarts": "^5.4.0",
     "element-ui": "^2.15.10",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",

src/components/chart/BarChart.vue

@@ -0,0 +1,143 @@
+<template>
+  <div id="barChart" ref="barChart"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { street, soilData, waterData, forestryData } from "../../config/common";
+export default {
+  name: "barChart",
+  data() {
+    return {
+      barChart: null,
+    };
+  },
+  props: {
+    categoryData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    soilValueData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    waterValueData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    forestryValueData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    sourceType: {
+      type: String,
+      default: "A",
+    },
+  },
+  mounted() {
+    this.initEchart(
+      this.categoryData,
+      this.soilValueData,
+      this.waterValueData,
+      this.forestryValueData
+    );
+  },
+  watch: {
+    sourceType(val) {
+      console.log(val, "sourceType");
+      this.initEchart(
+        this.categoryData,
+        this.soilValueData,
+        this.waterValueData,
+        this.forestryValueData
+      );
+    },
+  },
+  methods: {
+    initEchart(categoryData, soil, water, forestry) {
+      if (!this.barChart) {
+        this.barChart = echarts.init(this.$refs.barChart);
+      }
+      let option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {},
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          show: false,
+        },
+        yAxis: {
+          // axisLine: "none",
+          axisTick: "none",
+          axisLabel: {
+            //  inside:true,
+          },
+          type: "category",
+          data: categoryData,
+          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        series: [
+          {
+            name: "土地资源",
+            type: "bar",
+            stack: "total",
+            // label: {
+            //   show: true
+            // },
+            emphasis: {
+              focus: "series",
+            },
+            data: soil,
+            // data: [320, 302, 301, 334, 390, 330, 320],
+          },
+          {
+            name: "水资源",
+            type: "bar",
+            stack: "total",
+            // label: {
+            //   show: true
+            // },
+            emphasis: {
+              focus: "series",
+            },
+            data: water,
+            // data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: "林地资源",
+            type: "bar",
+            stack: "total",
+            // label: {
+            //   show: true
+            // },
+            emphasis: {
+              focus: "series",
+            },
+            data: forestry,
+            // data: [220, 182, 191, 234, 290, 330, 182],
+          },
+        ],
+      };
+      this.barChart.setOption(option);
+    },
+  },
+};
+</script>

src/components/chart/LineChart.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="lineChart" ref="line"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "LineChart",
+  data() {
+    return {
+      lineChart: null,
+    };
+  },
+  props: {
+    categoryData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    valueData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  watch: {
+    categoryData: {
+      handler(val) {
+        console.log(val, "categoryData");
+      },
+      immediate: true,
+    },
+    // categoryData(val){
+    //   console.log(val,"categoryData");
+    // }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initEchart(this.categoryData, this.valueData);
+    });
+  },
+  methods: {
+    initEchart(xData, seriesData) {
+      if (!this.lineChart) {
+        this.lineChart = echarts.init(this.$refs.line);
+      }
+      let option = {
+        xAxis: {
+          type: "category",
+          data: xData,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: seriesData,
+            // data: this.seriesData,
+            type: "line",
+            smooth: true,
+          },
+        ],
+      };
+      this.lineChart.setOption(option);
+    },
+  },
+};
+</script>

src/components/common/NewSelect.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-select
+    size="small"
+    class="re-select-container"
+    v-model="imgValue"
+    placeholder="请选择"
+    @change="currentSel"
+  >
+    <!-- popper-append-to-body:是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性-->
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    >
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: "NewSelect",
+  props: {
+    options: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    value: [String, Number],
+    popper: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  model: {
+    prop: "value", //绑定的值，通过父组件传递,
+    event: "selectEvent", //自定义事件名
+  },
+  data() {
+    return {
+      imgValue: this.value,
+    };
+  },
+  watch: {
+    imgValue(nv) {
+      this.$emit("changeColor", nv);
+    },
+  },
+  created() {
+    console.log(this.imgValue);
+  },
+  mounted() {},
+  methods: {
+    currentSel() {
+      this.$emit("selectEvent", this.imgValue);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/* .re-select-container {
+  font-size: 1rem;
+  .select-trigger {
+    height: 100%;
+  }
+
+  .el-input--suffix {
+    height: 100%;
+
+    .el-input__inner {
+      height: 100%;
+      line-height: 100%;
+    }
+  }
+  .el-input--suffix .el-input__inner {
+    background: transparent !important;
+  }
+} */
+</style>

src/config/common.js

@@ -0,0 +1,239 @@
+// 街道
+export const street = {
+    '全部街道':'全部街道',
+    '潍坊新村街道':'潍坊新村街道',
+    '陆家嘴街道':'陆家嘴街道',
+    '周家渡街道':'周家渡街道',
+    '塘桥街道':'塘桥街道',
+    '上钢新村街道':'上钢新村街道',
+    '南码头路街道':'南码头路街道',
+    '沪东新村街道':'沪东新村街道',
+    '金杨新村街道':'金杨新村街道',
+    '洋泾街道':'洋泾街道',
+    '浦兴路街道':'浦兴路街道',
+    '东明路街道':'东明路街道',
+    '花木街道':'花木街道'
+} 
+
+// 街道地址
+export const streetLocation = {
+    '全部街道':[31.209453,121.555531],
+    '潍坊新村街道':[31.222874,121.523662],
+    '陆家嘴街道':[31.236490,121.514115],
+    '周家渡街道':[31.182553,121.504840],
+    '塘桥街道':[31.208764,121.521792],
+    '上钢新村街道':[31.175747,121.481091],
+    '南码头路街道':[31.193814,121.514550],
+    '沪东新村街道':[31.273855,121.576895],
+    '金杨新村街道':[31.252801,121.568576],
+    '洋泾街道':[31.241746,121.545513],
+    '浦兴路街道':[31.269637,121.596475],
+    '东明路街道':[31.145477,121.515708],
+    '花木街道':[31.209453,121.555531]
+}
+
+// 土地资源
+export const soilData = {
+    '全部街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '潍坊新村街道':{
+        A:330,
+        B:334,
+        C:250
+    },
+    '陆家嘴街道':{
+        A:400,
+        B:320,
+        C:367
+    },
+    '周家渡街道':{
+        A:240,
+        B:320,
+        C:289
+    },
+    '塘桥街道':{
+        A:120,
+        B:90,
+        C:101
+    },
+    '上钢新村街道':{
+        A:230,
+        B:320,
+        C:210
+    },
+    '南码头路街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '沪东新村街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '金杨新村街道':{
+        A:182,
+        B:320,
+        C:300
+    },
+    '洋泾街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '浦兴路街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '东明路街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '花木街道':{
+        A:182,
+        B:210,
+        C:182
+    }
+}
+
+// 水资源
+export const waterData = {
+    '全部街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '潍坊新村街道':{
+        A:330,
+        B:334,
+        C:250
+    },
+    '陆家嘴街道':{
+        A:400,
+        B:320,
+        C:367
+    },
+    '周家渡街道':{
+        A:240,
+        B:320,
+        C:289
+    },
+    '塘桥街道':{
+        A:120,
+        B:90,
+        C:101
+    },
+    '上钢新村街道':{
+        A:230,
+        B:320,
+        C:210
+    },
+    '南码头路街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '沪东新村街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '金杨新村街道':{
+        A:182,
+        B:320,
+        C:300
+    },
+    '洋泾街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '浦兴路街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '东明路街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '花木街道':{
+        A:182,
+        B:210,
+        C:182
+    }
+}
+// 林地资源
+export const forestryData = {
+    '全部街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '潍坊新村街道':{
+        A:330,
+        B:334,
+        C:250
+    },
+    '陆家嘴街道':{
+        A:400,
+        B:320,
+        C:367
+    },
+    '周家渡街道':{
+        A:240,
+        B:320,
+        C:289
+    },
+    '塘桥街道':{
+        A:120,
+        B:90,
+        C:101
+    },
+    '上钢新村街道':{
+        A:230,
+        B:320,
+        C:210
+    },
+    '南码头路街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '沪东新村街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '金杨新村街道':{
+        A:182,
+        B:320,
+        C:300
+    },
+    '洋泾街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '浦兴路街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '东明路街道':{
+        A:300,
+        B:320,
+        C:280
+    },
+    '花木街道':{
+        A:182,
+        B:210,
+        C:182
+    }
+}