vue 开发数据可视化地图

小白兔奶糖ovo

已于 2022-07-14 20:39:55 修改

阅读量1.8k

点赞数

文章标签： vue.js echarts 前端

于 2022-07-08 10:44:00 首次发布

本文链接：https://blog.csdn.net/qq_54053990/article/details/125673662

版权

vue 项目：

 安装 axios：

npm install axios -D

 安装 echarts

npm install echarts@4.9.0 -D

其中，@+版本号！

当然，npm 的安装方式请自行某度！
同时推荐 cnpm：
（使用淘宝镜像）
npm install -g cnpm -registry=https://registry.npm.taobao.org
然后，
cnpm -v
检查是否安装成功。

阿里云数据可视化平台
用于下载 json api
不多说，直接上代码：

<template>

  <div class="map">
  
       <div id="myChartChina" :style="{ width: '80%', height: '80%' }"></div>
       
  </div>
  
</template>

<script>

require("echarts/map/json/china.json");

export default {

  props: {},

  data() {

    return {};

  },

  created() {

  },

  mounted(){

this.drawLine()

  },

  methods: {

       drawLine() {

      var myChartContainer = document.getElementById("myChartChina"); //绑定div容器

      var resizeMyChartContainer = function () {

        myChartContainer.style.width = 100 + "%";

        myChartContainer.style.height = window.innerHeight * 0.7 + "px";

      };

      resizeMyChartContainer();

      var myChartChina = this.$echarts.init(myChartContainer);

      function randomData() {

        return Math.round(Math.random() * 500);

      }

      // 绘制图表

      var optionMap = {

        tooltip: {

          trigger: "item",

        },

        //左侧小导航图标

        visualMap: {

          show: false,

          x: "left",

          y: "center",

          //改变地图区域颜色

          splitList: [

            { start: 500, end: 600 },

            { start: 400, end: 500 },

            { start: 300, end: 400 },

            { start: 200, end: 300 },

            { start: 100, end: 200 },

            { start: 0, end: 100 },

          ],

          color: [

            "#ffff00",

            "#0e94eb",

            "#70bcf0",

            "#f0f26c",

            "#00cd00",

            "#eff26f",

          ],

        },

        //配置属性

        series: [

          {

            name: "数据",

            type: "map",

            mapType: "china",

            roam: false,

            label: {

              normal: {

                show: false, //省份名称

              },

              emphasis: {

                show: false,

              },

            },

            data: [

              { name: "北京", value: "100" },

              { name: "天津", value: randomData() },

              { name: "上海", value: randomData() },

              { name: "重庆", value: randomData() },

              { name: "河北", value: randomData() },

              { name: "河南", value: randomData() },

              { name: "云南", value: randomData() },

              { name: "辽宁", value: randomData() },

              { name: "黑龙江", value: randomData() },

              { name: "湖南", value: randomData() },

              { name: "安徽", value: randomData() },

              { name: "山东", value: randomData() },

              { name: "新疆", value: randomData() },

              { name: "江苏", value: randomData() },

              { name: "浙江", value: randomData() },

              { name: "江西", value: randomData() },

              { name: "湖北", value: randomData() },

              { name: "广西", value: randomData() },

              { name: "甘肃", value: randomData() },

              { name: "山西", value: randomData() },

              { name: "内蒙古", value: randomData() },

              { name: "陕西", value: randomData() },

              { name: "吉林", value: randomData() },

              { name: "福建", value: randomData() },

              { name: "贵州", value: randomData() },

              { name: "广东", value: randomData() },

              { name: "青海", value: randomData() },

              { name: "西藏", value: randomData() },

              { name: "四川", value: randomData() },

              { name: "宁夏", value: randomData() },

              { name: "海南", value: randomData() },

              { name: "台湾", value: randomData() },

              { name: "香港", value: randomData() },

              { name: "澳门", value: randomData() },

            ], //数据

          },

        ],

      };

      myChartChina.setOption(optionMap);

      window.onresize = function () {

        resizeMyChartContainer();

        myChartChina.resize();

      };

    },

  }

};

</script>

实现案例如下图所示：
nice
参考优秀博客

记录下在使用踩过的坑，
由于自己是个火狐控，发现在 vue 编译出来的页面中无法显示 map，
经过某度的查询，发现只有谷歌浏览器支持！
（怪不得谷歌浏览器的用户总量高居不下！）
为了坚持初心！

安装babel-polyfill

npm install --save babel-polyfill

import  'babel-polyfill'
require("babel-polyfill");

用于使用webpack构建的项目,加入到webpack配置文件(webpack.config.js)entry项中重新执行构建命令，在低版本的浏览器中就可以正常打开页面了。

module.exports = {
    entry: ["babel-polyfill", "./app/js"]
};

补充：

babel-polyfill

Babel是一个转码器，可以将ES6代码转为ES5代码，而不用考虑环境支持的问题。默认只转换语法,而不
转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill

补充：
对于 vue 中路由及页面跳转问题，
深思了很长时间，但是，就官方文档来看，并没有找到一些灵活性的调用方法，
故此，在这里补充强调一下，加深自己印象的同时，给需要的同志一点灵感。所以，下文所述，各位权当是鄙人的抛砖引玉，如有更好的解决方案，欢迎斧正，鄙人将感激不尽！
分三次试验过程:

第一次:

 <router-link to="/pages/me/me">
	<button type="warn">进入我的！</button>
</router-link>

此时的页面呈现如下图所示：

跳转的话没什么问题，美中不足的是，下面多了个下划线，非常影响页面的整体美观性，于是，有了第二次尝试：

<button type="warn">进入我的！
	<router-link to="/pages/me/me">
	</router-link>
</button>

此时按钮上的下划线被抹去了

呜呜呜呜，没法进行页面跳转了…(ノへ￣、)
然后，就有了第三次：

<button type="default" @click="upPage">
    打开top页面
</button>

不出各位所料，成功了！
但是，要注意的是：此时，要写一个methods 方法，

upPage() {
	this.$router.replace({
	path: '/pages/top/top'
});

大功告成！！！

add（）{
      /* 关于毛玻璃的处理 */
      .css
      filter: blur(10px);
		-webkit-filter: blur(10px);
		-moz-filter: blur(10px);
		-ms-filter: blur(10px);
		-o-filter: blur(10px);
}