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

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

因为最近疫情期间在家实在是没事干，想找点事，就练手了个小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)

      if (d < 0) {

        const date3 = date1.getFullYear() - 1 + '-12-31'

        return this.getweek(date3)

      } else {

        // 得到年数周数

        const year = date1.getFullYear()

        const week = Math.ceil((d + 1) / 7)

        // eslint-disable-next-line no-console

        console.log(year + '年第' + week + '周')

        return da

      }

    }

  }

}

</script>

<style lang='less' scoped>

.container {

  width: 100%;

  min-width: 12rem;

  // max-width: 50rem;

  margin: 0 auto;

  .item_top {

    position: relative;

    color: white;

    .index_item_topfont {

      position: absolute;

      color: white;

      bottom: 10%;

      font-size: 2rem;

      left: 1rem;

    }

    @media screen and (max-width: 550px) {

      .index_item_topfont {

        left: 0.8rem;

        h4 {

          font-size: 1rem;

        }

      }

    }

    @media screen and (max-width: 280px) {

      .index_item_topfont {

        left: 0.5rem;

        h4 {

          font-size: 0.5rem;

        }

      }

    }

  }

  .font_statement{

    position: relative;

    text-align: left;

    margin: 15px 15px;

    padding: 0px 0px 5px 10px;

    border-left: .2rem solid #f60;

    border-bottom: 1px solid #efefef;

    .statement_title{

      font-size: 20px;

      font-weight: bold;

    }

    .update_time{

      font-size: 12px;

      color: #b6b6b6;

      font-weight: normal;

      vertical-align: middle;

    }

  }

  .myrow{

    display: flex;

    align-items: center;

    justify-content: center;

    .tag{

      width: 20%;

      text-align: center;

      border-radius: 4px;

      padding: 10px 10px;

      background-color: #f3f3f3;

      font-size: 15px;

      // margin-right: 5px;

      p{

      color: red;

      font-size: 20px;

      }

    }

  }

  .myrow .tag:not(:nth-child(4n)) {

 margin-right: 5px;

}

}

/* 公共样式1 */

.w_100 {

  width: 100%;

}

.font_h1 {

  font-size: 2rem;

}

.font_h2 {

  font-size: 1.5rem;

}

@media screen and (max-width: 550px) {

  .font_h1 {

    font-size: 1rem;

  }

  .font_h2 {

    font-size: 0.8rem;

  }

}

@media screen and (max-width: 280px) {

  .font_h1 {

    font-size: 0.5rem;

  }

  .font_h2 {

    font-size: 0.2rem;

  }

}

/* 公共样式2*/

</style>

接下来是 vuecli 前端渲染版本

不同之处很细微

top.vue

/* eslint-disable camelcase */

<template>

  <div class="container">

    <!-- 头部1 -->

    <div class="item item_top">

      <img src="../assets/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'

import axios from 'axios'

export default {

  components: {

    // Logo

  },

  data () {

    return {

      mydata1: '111',

      confirmedCount: '',

      suspectedCount: '',

      curedCount: '',

      deadCount: ''

    }

  },

  created () {

    this.setDate()

    this.getData()

  },

  methods: {

    getData () {

      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)

      if (d < 0) {

        const date3 = date1.getFullYear() - 1 + '-12-31'

        return this.getweek(date3)

      } else {

        // 得到年数周数

        const year = date1.getFullYear()

        const week = Math.ceil((d + 1) / 7)

        // eslint-disable-next-line no-console

        console.log(year + '年第' + week + '周')

        return da

      }

    }

  }

}

</script>

<style lang='less' scoped>

*{

 padding:0;

  margin: 0;

}

h4{

  text-align: left;

}

.container {

  width: 100%;

  min-width: 300px;

  // max-width: 50rem;

  margin: 0 auto;

  .item_top {

    position: relative;

    color: white;

    .index_item_topfont {

      position: absolute;

      color: white;

      bottom: 10%;

      font-size: 2rem;

      left: 1rem;

    }

    @media screen and (max-width: 550px) {

      .index_item_topfont {

        left: 0.8rem;

        h4 {

          font-size: 1rem;

        }

      }

    }

    @media screen and (max-width: 300px) {

      .index_item_topfont {

        left: 0.5rem;

        h4 {

          font-size: 0.5rem;

        }

      }

    }

  }

  .font_statement{

    position: relative;

    text-align: left;

    margin: 15px 15px;

    padding: 0px 0px 5px 10px;

    border-left: .2rem solid #f60;

    border-bottom: 1px solid #efefef;

    .statement_title{

      font-size: 20px;

      font-weight: bold;

    }

    .update_time{

      font-size: 12px;

      color: #b6b6b6;

      font-weight: normal;

      vertical-align: middle;

    }

  }

  .myrow{

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: center;

    .tag{

      width: 17%;

      margin:0.2rem 0;

      text-align: center;

      border-radius: 4px;

      padding: 10px 10px;

      background-color: #f3f3f3;

      font-size: 15px;

      // margin-right: 5px;

      p{

      color: red;

      font-size: 20px;

      }

    }

  }

  .myrow .tag:not(:nth-child(4n)) {

 margin-right: 5px;

}

}

/* 公共样式1 */

.w_100 {

  width: 100%;

}

.font_h1 {

  font-size: 2rem;

}

.font_h2 {

  font-size: 1.5rem;

}

@media screen and (max-width: 550px) {

  .font_h1 {

    font-size: 1rem;

  }

  .font_h2 {

    font-size: 0.8rem;

  }

}

@media screen and (max-width: 300px) {

  .font_h1 {

    font-size: 0.5rem;

  }

    .container .myrow .tag{

      width: 30%;}

     .container   .myrow .tag:not(:nth-child(4n)) {

 margin-right: 0px;

}

  .container .myrow .tag:not(:nth-child(2n)) {

 margin-right: 0.4rem;}

  .font_h2 {

    font-size: 0.2rem;

  }

}

/* 公共样式2*/

</style>

helloword.vue

<template>

  <div class="hello">

    <mytop/>

  <!-- 初始化echarts需要一个有宽高的盒子 -->

  <div id="mychart" ref='mapbox' style='margin-top:10px;width:100%;min-width:300px;height:100%;min-height:400px'>

  </div>

  </div>

</template>

<script>

import mytop from './top.vue'

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',

  components: {

    mytop

  },

  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) {

        let 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){

          console.log(data)

          let list = data.data.list.map(item=>({name:item.name,value:item.value}))

          option2.series[0].data = list;

          console.log(list)

          this.mychart.setOption(option2)//这行代码必须是DOM渲染完成才可以执行哦

        }

      })

    }

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="less">

*{

 padding:0;

  margin: 0;

}

h3 {

  margin: 40px 0 0;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>

不同之处很细微，第一个集成了axios this.$axios.get('https://lab.ahusmart.com/nCoV/api/overall').then((res) => {

第二个需要引入axios axios.get('https://lab.ahusmart.com/nCoV/api/overall').then((res) => {

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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