echarts demo

README.md

@@ -14,7 +14,7 @@
     class rootNode{
 
     }
-    class rowNode{
+    class rowNode{  
         
     }
     class colNode{

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <div id="nav">
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/echartDemo">echartDemo</router-link>
     </div>
     <router-view />
   </div>

src/components/echarts/data.js

@@ -0,0 +1,279 @@
+class areaData {
+  constructor() {
+    return [
+      {
+        areaName: "东城区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "西城区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "朝阳区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "300"
+          }
+        ]
+      },
+      {
+        areaName: "丰台区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "石景山区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "海淀区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "门头沟区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "房山区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "通州区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "90"
+          },
+          {
+            title: "标题3",
+            value: "1230"
+          }
+        ]
+      },
+      {
+        areaName: "顺义区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "昌平区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "大兴区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "怀柔区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "平谷区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "密云区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "延庆区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      }
+    ];
+  }
+}
+export default areaData;

src/components/echarts/echartsSimple.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="echartDemo">
+    <div class="wrap" style="position: relative;">
+      <div id="map" style="width: 100%; height: 800px;">
+        <div :style="{ height: '400px', width: '100%' }" ref="myEchart"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+import "echarts/map/js/province/beijing";
+import AreaData from "./data";
+import EchartsOption from "./optionConfig";
+export default {
+  name: "EchartsDemo",
+  props: {
+    areaData: {
+      type: Array,
+      default() {
+        return new AreaData();
+      }
+    },
+    option: {
+      type: Object,
+      default() {
+        return new EchartsOption();
+      }
+    },
+    colorList: {
+      type: Array,
+      default() {
+        return ["#F4E001", "#F0805A", "#26C0C0"];
+      }
+    }
+  },
+  data() {
+    return {
+      myChart: null,
+      // 地区坐标
+      areaItems: {
+        东城区: [116.418757, 39.937544],
+        西城区: [116.366794, 39.910309],
+        朝阳区: [116.486409, 39.991489],
+        丰台区: [116.286968, 39.863642],
+        石景山区: [116.170445, 39.974601],
+        海淀区: [116.280316, 40.039074],
+        门头沟区: [115.905381, 40.009183],
+        房山区: [115.701157, 39.735535],
+        通州区: [116.758603, 39.802486],
+        顺义区: [116.753525, 40.128936],
+        昌平区: [116.235906, 40.318085],
+        大兴区: [116.338033, 39.658908],
+        怀柔区: [116.607122, 40.524272],
+        平谷区: [117.112335, 40.244783],
+        密云区: [116.943352, 40.477362],
+        延庆区: [115.985006, 40.465325]
+      },
+      selfAreaData: new AreaData(),
+      selfOption: new EchartsOption()
+    };
+  },
+
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.selfAreaData = JSON.parse(JSON.stringify(this.areaData));
+      this.selfOption = JSON.parse(JSON.stringify(this.option));
+      this.selfColor = JSON.parse(JSON.stringify(this.colorList));
+      this.myChart = echarts.init(this.$refs.myEchart);
+      window.onresize = this.myChart.resize;
+      this.myChart.setOption(this.option);
+      // 拖拽跟缩放重置
+      let throttledRenderEachCity = this.throttle(this.renderItems, 0);
+      this.myChart.on("geoRoam", throttledRenderEachCity);
+      this.renderItems();
+    },
+    // 缩放和拖拽
+    throttle(fn, delay, debounce) {
+      var currCall;
+      var lastCall = 0;
+      var lastExec = 0;
+      var timer = null;
+      var diff;
+      var scope;
+      var args;
+      delay = delay || 0;
+      function exec() {
+        lastExec = new Date().getTime();
+        timer = null;
+        fn.apply(scope, args || []);
+      }
+
+      var cb = function() {
+        currCall = new Date().getTime();
+        scope = this;
+        args = arguments;
+        diff = currCall - (debounce ? lastCall : lastExec) - delay;
+
+        clearTimeout(timer);
+
+        if (debounce) {
+          timer = setTimeout(exec, delay);
+        } else {
+          if (diff >= 0) {
+            exec();
+          } else {
+            timer = setTimeout(exec, -diff);
+          }
+        }
+
+        lastCall = currCall;
+      };
+
+      return cb;
+    },
+    // 填充 地图点位
+    renderItems() {
+      var option = Object.assign(this.option, {
+        xAxis: [],
+        yAxis: [],
+        grid: [],
+        series: [],
+        tooltip: {
+          trigger: "item",
+          axisPointer: {
+            type: "none"
+          }
+        }
+      });
+      this.areaData.forEach((item, idx) => {
+        let nodeCoord = this.areaItems[item.areaName];
+        let coord = this.myChart.convertToPixel("geo", nodeCoord);
+        let titleItems = item.DateItems.map(i => i.title);
+        let itemData = item.DateItems.map(i => Number(i.value));
+        option.xAxis.push({
+          id: idx + item.areaName,
+          gridId: idx + item.areaName,
+          type: "category",
+          name: item.areaName,
+          nameLocation: "middle",
+          nameGap: 3,
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            onZero: false,
+            lineStyle: {
+              color: "#666"
+            }
+          },
+          data: titleItems,
+          z: 100
+        });
+        option.yAxis.push({
+          id: idx + item.areaName,
+          gridId: idx + item.areaName,
+          type: "value",
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "red"
+            }
+          },
+          min: 0,
+          max: "dataMax"
+        });
+        option.grid.push({
+          id: idx + item.areaName,
+          width: 30,
+          height: 40,
+          left: coord[0] - 15,
+          top: coord[1] - 15,
+          z: 100
+        });
+        option.series.push({
+          id: idx + item.areaName,
+          type: "bar",
+          xAxisId: idx + item.areaName,
+          yAxisId: idx + item.areaName,
+          barGap: 0,
+          barCategoryGap: 0,
+          data: itemData,
+          z: 100,
+          itemStyle: {
+            normal: {
+              color: params => {
+                // build a color map as your need.
+                let color = this.selfColor[params.dataIndex];
+                return color;
+              }
+            },
+            opacity: 0,
+            emphasis: {
+              label: {
+                show: false
+              }
+            }
+          }
+        });
+      });
+      this.myChart.setOption(option);
+    }
+  }
+};
+</script>
+
+<style></style>

src/components/echarts/index.js

@@ -0,0 +1,6 @@
+import EchartsDemo from "./echartsSimple";
+/* istanbul ignore next */
+EchartsDemo.install = function(Vue) {
+  Vue.component(EchartsDemo.name, EchartsDemo);
+};
+export default EchartsDemo;

src/components/echarts/optionConfig.js

@@ -0,0 +1,33 @@
+export default class EchartsOptions {
+  constructor() {
+    return {
+      backgroundColor: "#02AFDB",
+      tooltip: {},
+      geo: {
+        map: "北京",
+        roam: true,
+        label: {
+          normal: {
+            show: true,
+            textStyle: {
+              color: "rgba(0,0,0,0.4)"
+            }
+          }
+        },
+        itemStyle: {
+          normal: {
+            borderColor: "rgba(0, 0, 0, 0.2)"
+          },
+          emphasis: {
+            areaColor: null,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowBlur: 20,
+            borderWidth: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)"
+          }
+        }
+      }
+    };
+  }
+}

src/main.js

@@ -4,9 +4,11 @@ import router from "./router";
 import store from "./store";
 import ant from "ant-design-vue";
 import DrawFlow from "./components/DrawFlow";
+import EchartsDemo from "./components/echarts";
 import "ant-design-vue/dist/antd.less";
 Vue.config.productionTip = false;
 Vue.use(ant);
+Vue.use(EchartsDemo);
 Vue.use(DrawFlow);
 new Vue({
   router,

src/router/index.js

@@ -11,13 +11,13 @@ const routes = [
     component: Home
   },
   {
-    path: "/about",
-    name: "About",
+    path: "/echartDemo",
+    name: "echartDemo",
     // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
+    // this generates a separate chunk (echartDemo.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
+      import(/* webpackChunkName: "echartDemo" */ "../views/echartDemo.vue")
   }
 ];
 

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/data.js

@@ -0,0 +1,279 @@
+class areaData {
+  constructor() {
+    return [
+      {
+        areaName: "东城区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "西城区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "朝阳区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "300"
+          }
+        ]
+      },
+      {
+        areaName: "丰台区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "石景山区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "海淀区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "门头沟区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "房山区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "通州区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "90"
+          },
+          {
+            title: "标题3",
+            value: "1230"
+          }
+        ]
+      },
+      {
+        areaName: "顺义区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "昌平区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "大兴区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "怀柔区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "平谷区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "密云区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      },
+      {
+        areaName: "延庆区",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      }
+    ];
+  }
+}
+export default areaData;

src/views/echartDemo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="echartDemo">
+    <echarts-demo></echarts-demo>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EachartsDom",
+  data() {
+    return {
+      // areaData
+      // option
+      // colorList
+    };
+  },
+  mounted() {}
+};
+</script>
+
+<style></style>

src/views/optionConfig.js

@@ -0,0 +1,72 @@
+export default class EchartsOptions {
+  constructor() {
+    return {
+      // 进行相关配置
+      backgroundColor: "#02AFDB",
+      tooltip: {}, // 鼠标移到图里面的浮动提示框
+      geo: {
+        // 这个是重点配置区
+        map: "北京", // 表示中国地图
+        roam: true,
+        label: {
+          normal: {
+            show: true, // 是否显示对应地名
+            textStyle: {
+              color: "rgba(0,0,0,0.4)"
+            }
+          }
+        },
+        itemStyle: {
+          normal: {
+            borderColor: "rgba(0, 0, 0, 0.2)"
+          },
+          emphasis: {
+            areaColor: null,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowBlur: 20,
+            borderWidth: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)"
+          }
+        }
+      },
+      series: [
+        {
+          type: "scatter",
+          coordinateSystem: "geo" // 对应上方配置
+        },
+        {
+          name: "启动次数", // 浮动框的标题
+          type: "map",
+          geoIndex: 0,
+          data: [
+            {
+              name: "北京",
+              value: 599
+            },
+            {
+              name: "上海",
+              value: 142
+            },
+            {
+              name: "黑龙江",
+              value: 1144
+            },
+            {
+              name: "深圳",
+              value: 92
+            },
+            {
+              name: "湖北",
+              value: 810
+            },
+            {
+              name: "四川",
+              value: 453
+            }
+          ]
+        }
+      ]
+    };
+  }
+}