图表调整优化

package.json

@@ -12,13 +12,14 @@
     "dependencies": {
         "axios": "^0.19.2",
         "echarts": "^4.8.0",
+        "highcharts": "^9.2.2",
         "element-ui": "^2.15.14",
         "lodash": "^4.17.19",
         "url-loader": "^4.1.0",
         "view-design": "^4.3.2",
         "vue": "^2.6.12",
         "vue-lazyload": "^1.3.3",
-        "vue-template-compiler": "2.7.16"
+        "vue-template-compiler": "2.6.12"
     },
     "devDependencies": {
         "autoprefixer": "^7.1.2",
@@ -84,4 +85,4 @@
         "last 2 versions",
         "not ie <= 8"
     ]
-}
+}

src/components/echartsTemplate/sankey.vue

@@ -25,6 +25,7 @@ let option = {
       curveness: 0.5,
     },
     nodeWidth: 10,
+    nodeAlign: 'left',
   },
 };
 export default {

src/views/cockpitNew1/datePicker.vue

@@ -8,7 +8,7 @@
     range-separator="-"
     start-placeholder="开始日期"
     end-placeholder="结束日期"
-    align="right"
+    align="left"
     @change="dateChange"
   >
   </el-date-picker>
@@ -64,10 +64,16 @@ export default {
   mounted() {},
   methods: {
     dateChange() {
-      this.$emit("dateChange");
+      this.$emit("dateChange", this.dateValue);
     },
   },
 };
 </script>
 <style lang="scss" scoped>
+.block {
+  position: absolute;
+  top: 10%;
+  left: 30%;
+  z-index: 100;
+}
 </style>

src/views/cockpitNew1/wpjg.vue

@@ -12,13 +12,13 @@
           <span class="dvalue">{{ sdata.value || 0 }}公顷</span>
         </div>
       </div>
-      <!-- <sankey id="wpjp_echart" ref="echartRef"></sankey> -->
+      <sankey id="wpjp_echart" ref="echartRef"></sankey>
     </div>
   </div>
 </template>
 
 <script>
-// import sankey from "../../components/echartsTemplate/sankey.vue";
+import sankey from "../../components/echartsTemplate/sankey.vue";
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 let lcolors = ["#1677CA", "#5BB57A", "#B1651F"];
 let rcolors = [
@@ -33,7 +33,7 @@ let rcolors = [
   "#D4E0FF",
 ];
 export default {
-  // components: { sankey },
+  components: { sankey },
   data() {
     return {
       sdata: {},
@@ -46,24 +46,154 @@ export default {
 
   methods: {
     getComputedStyle() {
+      // let data = [
+      //   { name: "农用地", itemStyle: { color: lcolors[0] } },
+      //   { name: "林地", itemStyle: { color: lcolors[1] } },
+      //   { name: "耕地", itemStyle: { color: lcolors[2] } },
+      //   { name: "a1" },
+      //   { name: "a2" },
+      //   { name: "b1" },
+      //   { name: "c" },
+      // ];
+      // let data = [
+      //   { name: "耕地", v: 1 },
+      //   { name: "园地", v: 2 },
+      //   { name: "林地", v: 3 },
+      //   { name: "草地", v: 4 },
+      //   { name: "湿地", v: 5 },
+      //   { name: "农业设施用地", v: 6 },
+      //   {
+      //     name: "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+      //     v: 7,
+      //   },
+      //   { name: "交通运输用地", v: 8 },
+      //   { name: "公共设施用地", v: 9 },
+      //   { name: "绿地与开敞空间用地", v: 10 },
+
+      //   { name: "陆地水城", v: 11 },
+      //   { name: "其他土地", v: 12 },
+      //   {
+      //     name: "渔业用海、工矿通信用海、交通运输用海、游憩用海、特殊用海、其他海域",
+      //     v: 13,
+      //   },
+      // ];
       let data = [
-        { name: "农用地", itemStyle: { color: lcolors[0] } },
-        { name: "林地", itemStyle: { color: lcolors[1] } },
-        { name: "耕地", itemStyle: { color: lcolors[2] } },
-        { name: "a1" },
-        { name: "a2" },
-        { name: "b1" },
-        { name: "c" },
+        { name: "耕地" },
+        { name: "园地" },
+        { name: "林地" },
+        { name: "草地" },
+        { name: "湿地" },
+        { name: "农业设施用地" },
+        {
+          name: "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+        },
+        { name: "交通运输用地" },
+        { name: "公共设施用地" },
+        { name: "绿地与开敞空间用地" },
+
+        { name: "陆地水城" },
+        { name: "其他土地" },
+        {
+          name: "渔业用海、工矿通信用海、交通运输用海、游憩用海、特殊用海、其他海域",
+        },
       ];
+      // let l = [
+      //   { source: "农用地", target: "a1", value: 5 },
+      //   { source: "农用地", target: "a2", value: 3 },
+      //   { source: "林地", target: "b1", value: 8 },
+      //   { source: "农用地", target: "b1", value: 3 },
+      //   { source: "林地", target: "a1", value: 1 },
+      //   { source: "林地", target: "c", value: 2 },
+      //   { source: "耕地", target: "c", value: 2 },
+      // ];
+
       let l = [
-        { source: "农用地", target: "a1", value: 5 },
-        { source: "农用地", target: "a2", value: 3 },
-        { source: "林地", target: "b1", value: 8 },
-        { source: "农用地", target: "b1", value: 3 },
-        { source: "林地", target: "a1", value: 1 },
-        { source: "林地", target: "c", value: 2 },
-        { source: "耕地", target: "c", value: 2 },
+        { source: "耕地", target: "陆地水城", value: 1 },
+        { source: "耕地", target: "农业设施用地", value: 1 },
+        {
+          source: "耕地",
+          target:
+            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          value: 25,
+        },
+        { source: "耕地", target: "交通运输用地", value: 16 },
+        {
+          source: "陆地水城",
+          target:
+            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          value: 1,
+        },
+        { source: "陆地水城", target: "交通运输用地", value: 5 },
+        { source: "园地", target: "农业设施用地", value: 2 },
+        {
+          source: "园地",
+          target:
+            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          value: 3,
+        },
+        { source: "林地", target: "陆地水城", value: 1 },
+        { source: "林地", target: "农业设施用地", value: 4 },
+        {
+          source: "林地",
+          target:
+            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          value: 56,
+        },
+        { source: "林地", target: "交通运输用地", value: 6 },
+        { source: "草地", target: "农业设施用地", value: 1 },
+        {
+          source: "草地",
+          target:
+            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          value: 89,
+        },
+        { source: "草地", target: "交通运输用地", value: 8 },
+        {
+          source:
+            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          target: "绿地与开敞空间用地",
+          value: 3,
+        },
+        // {
+        //   source:
+        //     "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+        //   target: "陆地水城",
+        //   value: 1,
+        // },
+        {
+          source:
+            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          target: "农业设施用地",
+          value: 2,
+        },
+        // {
+        //   source:
+        //     "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+        //   target:
+        //     "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+        //   value: 170,
+        // },
+        {
+          source:
+            "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+          target: "交通运输用地",
+          value: 10,
+        },
+        // {
+        //   source:
+        //     "居住用地、公共管理与公共服务用地、商业服务业用地、工矿用地、仓储用地",
+        //   target: "交通运输用地",
+        //   value: 1,
+        // },
+        // { source: "交通运输用地", target: "交通运输用地", value: 1 },
       ];
+      // l.forEach((a)=>{
+      //   data.push({name:a.source})
+      // })
+      // l.forEach((item, k) => {
+
+      //   option.series.push(o);
+      // });
       this.$nextTick(() => {
         this.$refs.echartRef.setOptions(data, l);
       });