vue中使用echarts来绘制中国地图,NuxtJS制作疫情地图，内有详细注释，我就懒得解释了，vue cli制作疫情地图 代码略有不同哦~~~

Posted 2020-11-25 糖~豆豆

我的代码自我感觉----注释一向十分详细，就不用过多解释都是什么了~~

因为最近疫情期间在家实在是没事干，想找点事，就练手了个小demo

首先上 NuxtJs版本代码，这里面

export default {
  mode: \'universal\',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || \'\',
    meta: [
      { charset: \'utf-8\' },
      { name: \'viewport\', content: \'width=device-width, initial-scale=1\' },
      { hid: \'description\', name: \'description\', content: process.env.npm_package_description || \'\' }
    ],
    link: [
      { rel: \'icon\', type: \'image/x-icon\', href: \'/favicon.ico\' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: \'#fff\' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    \'@nuxtjs/eslint-module\'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    \'@nuxtjs/axios\',
    \'@nuxtjs/pwa\',
    // Doc: https://github.com/nuxt-community/dotenv-module
    \'@nuxtjs/dotenv\'
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
      config.module.rules.push({
        enforce: \'pre\',
        test: /\\.(js|vue)$/,
        loader: \'eslint-loader\',
        exclude: /(node_modules)/,
        options: {
          fix: true
        }
      })
    }
  }
}

helloword.vue
<template>
  <div class="hello">
    <!-- 初始化echarts需要一个有宽高的盒子 -->
    <div id="mychart" ref="mapbox" style="width:100%;min-width:300px;height:100%;min-height:400px" />
  </div>
</template>

<script>
import echarts from \'echarts\'
import \'echarts/map/js/china\'
import jsonp from \'jsonp\'
// const option1 = {
//   xAxis: {
//     type: \'category\',
//     data: [\'Mon\', \'Tue\', \'Wed\', \'Thu\', \'Fri\', \'Sat\', \'Sun\']
//   },
//   yAxis: {
//     type: \'value\'
//   },
//   series: [{
//     data: [820, 932, 901, 934, 1290, 1330, 1320],
//     type: \'line\'
//   }]
// }
// 使用地图先注册地图
const option2 = {
  title: { text: \'疫情地图\', link: \'http://tangdd.cn\', subtext: \'全国疫情地图一览表\' },
  series: [{
    data: [], // 用来展示后台给的数据
    type: \'map\', // 控制是折线图还是地图
    map: \'china\', // 控制是那个地区地图
    label: { show: true, color: \'black\', fontSize: 10 }, // 控制对应地区的汉字
    itemStyle: {
      areaColor: \'pink\',
      borderColor: \'#776a6a\'
    }, // 控制地图的颜色还有边框
    emphasis: {
      label: {
        color: \'black\',
        fontSize: 12
      },
      itemStyle: {
        areaColor: \'#ccc\'
      }
    }, // 控制鼠标滑过之后背景色和字体颜色
    zoom: 1// 控制地图的放大缩小
  }],
  // 分层次显示地图颜色用下面这个东西,就是地图左下角那个东西
  visualMap: [{
    zoom: 1,
    type: \'piecewise\', // 条状
    show: true,
    splitNumber: 5, // 默认分为几条，就是看你要搞几个间断
    pieces: [
      { min: 10000 },
      { min: 1000, max: 9999 },
      { min: 100, max: 999 },
      { min: 10, max: 99 },
      { min: 1, max: 9 }
    ],
    align: \'right\', // 控制字和条的位置，默认放到左边
    // orient:\'horizontal\',//控制整块的位置是平铺一大长条还是垂直啥的,默认垂直
    // left:40 ,//控制分段位置控制整块的位置
    // right:100 //控制分段位置控制整块的位置
    // showLabel:false,//这个没什么用处，会隐藏字
    // textStyle：{},//这个很明显是搞字体的
    inRange: {
      symbol: \'rect\',
      color: [\'#ffc9c9\', \'#9c0505\']
    }, // 这个控制小图是圆的还是方的啥的还有渐变色
    itemWidth: 8,
    itemHeight: 4
  }]
}
export default {
  name: \'HelloWorld\',
  mounted () {
    this.getData()
    this.mychart = echarts.init(this.$refs.mapbox)
    // mychart.setOption(option1)
    this.mychart.setOption(option2)
    this.resizeTheChart()
    window.addEventListener(\'resize\', this.resizeTheChart)
  },
  methods: {
    resizeTheChart () {
      if (this.$refs && this.$refs.mapbox) {
        const mychartNode = document.getElementById(\'mychart\')
        mychartNode.style.height = mychartNode.offsetWidth * 0.8 + \'px\'
        this.mychart.resize()
      }
    },
    // 接口采用自\'https://renjinhui.github.io/review_vue/dist/index.html#/yqdt\'
    getData () {
      jsonp(\'https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427&callback=__jp0\', {}, (err, data) => {
        if (!err) {
          // eslint-disable-next-line no-console
          console.log(data)
          const list = data.data.list.map(item => ({ name: item.name, value: item.value }))
          option2.series[0].data = list
          // eslint-disable-next-line no-console
          console.log(list)
          this.mychart.setOption(option2)// 这行代码必须是DOM渲染完成才可以执行哦
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

index.vue
<template>
  <div class="container">
    <!-- 头部1 -->
    <div class="item item_top">
      <img src="../static/img/top.jpg" alt class="w_100">
      <div class="index_item_topfont">
        <h4>新型冠状病毒</h4>
        <h4>疫情实时动态 · 省市地图</h4>
      </div>
    </div>
    <!-- 头部2 -->
    <!-- 中间 -->
    <div class="font_statement">
      <div class="statement_title">
        全国疫情状况
      </div>
      <div class="update_time">
        截止{{ mydata1 }}
      </div>
    </div>
    <!-- 中间 -->
    <!-- 卡片 -->
    <div class="myrow">
      <div class="tag">
        <p>{{ confirmedCount }}</p>
        确诊
      </div>
      <div class="tag">
        <p>{{ suspectedCount }}</p>
        疑似
      </div>
      <div class="tag">
        <p>{{ deadCount }}</p>
        死亡
      </div>
      <div class="tag">
        <p>{{ curedCount }}</p>
        治愈
      </div>
    </div>
    <!-- 卡片 -->
  </div>
</template>

<script>
// import Logo from \'~/components/Logo.vue\'

export default {
  components: {
    // Logo
  },
  data () {
    return {
      mydata1: \'111\',
      confirmedCount: \'\',
      suspectedCount: \'\',
      curedCount: \'\',
      deadCount: \'\'
    }
  },
  created () {
    this.setDate()
    this.getData()
  },
  methods: {
    getData () {
      this.$axios.get(\'https://lab.ahusmart.com/nCoV/api/overall\').then((res) => {
        if (res.status === 200) {
          const _ = res.data.results[0]
          this.confirmedCount = _.confirmedCount
          this.suspectedCount = _.suspectedCount
          this.curedCount = _.curedCount
          this.deadCount = _.deadCount
        }
        // eslint-disable-next-line no-console
        console.log(res)
      })
    },
    setDate () {
      this.mydata1 = this.getweek()
      // eslint-disable-next-line
      console.log(this.mydata1)
    },
    getweek (dateString) {
      let da = \'\'
      if (dateString === undefined) {
        // 需要修改时间，改为昨天
        const aaa = new Date() - 86400000
        const now = new Date(aaa)
        let nowM = now.getMonth() + 1
        // eslint-disable-next-line camelcase
        nowM = nowM < 10 ? \'0\' + nowM : nowM
        let nowD = now.getDate()
        nowD = nowD < 10 ? \'0\' + nowD : nowD
        da = now.getFullYear() + \'-\' + nowM + \'-\' + nowD
        // eslint-disable-next-line no-console
        console.log(\'今天系统时间是:\' + da)
      } else {
        da = dateString.toString()
        // 日期格式2015-12-30
      }
      // 下面备用
      const date1 = new Date(
        da.substring(0, 4),
        parseInt(da.substring(5, 7)) - 1,
        da.substring(8, 10)
      )
      // 当前日期
      const date2 = new Date(da.substring(0, 4), 0, 1)
      // 1月1号
      // 获取1月1号星期（以周一为第一天，0周一~6周日）
      let dateWeekNum = date2.getDay() - 1
      if (dateWeekNum < 0) {
        dateWeekNum = 6
      }
      if (dateWeekNum < 4) {
        // 前移日期
        date2.setDate(date2.getDate() - dateWeekNum)
      } else {
        // 后移日期
        date2.setDate(date2.getDate() + 7 - dateWeekNum)
      }
      const d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000)
      ifVue Echarts绘制世界地图

 不习惯的 Vue3 起步六 の Echarts绘制下钻地图
 不习惯的 Vue3 起步六 の Echarts绘制下钻地图
 不习惯的 Vue3 起步六 の Echarts绘制下钻地图
 不习惯的 Vue3 起步六 の Echarts绘制下钻地图
 Vue封装echarts组件