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

其他 2020-02-20 07:34:10 阅读次数: 0

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

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

猜你喜欢

转载自www.cnblogs.com/sugartang/p/12334152.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022