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

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

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

  1. export default {
  2.   mode: 'universal',
  3.   /*
  4.   ** Headers of the page
  5.   */
  6.   head: {
  7.     title: process.env.npm_package_name || '',
  8.     meta: [
  9.       { charset: 'utf-8' },
  10.       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  11.       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
  12.     ],
  13.     link: [
  14.       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  15.     ]
  16.   },
  17.   /*
  18.   ** Customize the progress-bar color
  19.   */
  20.   loading: { color: '#fff' },
  21.   /*
  22.   ** Global CSS
  23.   */
  24.   css: [
  25.   ],
  26.   /*
  27.   ** Plugins to load before mounting the App
  28.   */
  29.   plugins: [
  30.   ],
  31.   /*
  32.   ** Nuxt.js dev-modules
  33.   */
  34.   buildModules: [
  35.     // Doc: https://github.com/nuxt-community/eslint-module
  36.     '@nuxtjs/eslint-module'
  37.   ],
  38.   /*
  39.   ** Nuxt.js modules
  40.   */
  41.   modules: [
  42.     // Doc: https://axios.nuxtjs.org/usage
  43.     '@nuxtjs/axios',
  44.     '@nuxtjs/pwa',
  45.     // Doc: https://github.com/nuxt-community/dotenv-module
  46.     '@nuxtjs/dotenv'
  47.   ],
  48.   /*
  49.   ** Axios module configuration
  50.   ** See https://axios.nuxtjs.org/options
  51.   */
  52.   axios: {
  53.   },
  54.   /*
  55.   ** Build configuration
  56.   */
  57.   build: {
  58.     /*
  59.     ** You can extend webpack config here
  60.     */
  61.     extend (config, ctx) {
  62.       config.module.rules.push({
  63.         enforce: 'pre',
  64.         test: /\.(js|vue)$/,
  65.         loader: 'eslint-loader',
  66.         exclude: /(node_modules)/,
  67.         options: {
  68.           fix: true
  69.         }
  70.       })
  71.     }
  72.   }
  73. }
  1. helloword.vue
    <template>
  2.   <div class="hello">
  3.     <!-- 初始化echarts需要一个有宽高的盒子 -->
  4.     <div id="mychart" ref="mapbox" style="width:100%;min-width:300px;height:100%;min-height:400px" />
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. import echarts from 'echarts'
  10. import 'echarts/map/js/china'
  11. import jsonp from 'jsonp'
  12. // const option1 = {
  13. //   xAxis: {
  14. //     type: 'category',
  15. //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  16. //   },
  17. //   yAxis: {
  18. //     type: 'value'
  19. //   },
  20. //   series: [{
  21. //     data: [820, 932, 901, 934, 1290, 1330, 1320],
  22. //     type: 'line'
  23. //   }]
  24. // }
  25. // 使用地图先注册地图
  26. const option2 = {
  27.   title: { text: '疫情地图', link: 'http://tangdd.cn', subtext: '全国疫情地图一览表' },
  28.   series: [{
  29.     data: [], // 用来展示后台给的数据
  30.     type: 'map', // 控制是折线图还是地图
  31.     map: 'china', // 控制是那个地区地图
  32.     label: { show: true, color: 'black', fontSize: 10 }, // 控制对应地区的汉字
  33.     itemStyle: {
  34.       areaColor: 'pink',
  35.       borderColor: '#776a6a'
  36.     }, // 控制地图的颜色还有边框
  37.     emphasis: {
  38.       label: {
  39.         color: 'black',
  40.         fontSize: 12
  41.       },
  42.       itemStyle: {
  43.         areaColor: '#ccc'
  44.       }
  45.     }, // 控制鼠标滑过之后背景色和字体颜色
  46.     zoom: 1// 控制地图的放大缩小
  47.   }],
  48.   // 分层次显示地图颜色用下面这个东西,就是地图左下角那个东西
  49.   visualMap: [{
  50.     zoom: 1,
  51.     type: 'piecewise', // 条状
  52.     show: true,
  53.     splitNumber: 5, // 默认分为几条，就是看你要搞几个间断
  54.     pieces: [
  55.       { min: 10000 },
  56.       { min: 1000, max: 9999 },
  57.       { min: 100, max: 999 },
  58.       { min: 10, max: 99 },
  59.       { min: 1, max: 9 }
  60.     ],
  61.     align: 'right', // 控制字和条的位置，默认放到左边
  62.     // orient:'horizontal',//控制整块的位置是平铺一大长条还是垂直啥的,默认垂直
  63.     // left:40 ,//控制分段位置控制整块的位置
  64.     // right:100 //控制分段位置控制整块的位置
  65.     // showLabel:false,//这个没什么用处，会隐藏字
  66.     // textStyle：{},//这个很明显是搞字体的
  67.     inRange: {
  68.       symbol: 'rect',
  69.       color: ['#ffc9c9', '#9c0505']
  70.     }, // 这个控制小图是圆的还是方的啥的还有渐变色
  71.     itemWidth: 8,
  72.     itemHeight: 4
  73.   }]
  74. }
  75. export default {
  76.   name: 'HelloWorld',
  77.   mounted () {
  78.     this.getData()
  79.     this.mychart = echarts.init(this.$refs.mapbox)
  80.     // mychart.setOption(option1)
  81.     this.mychart.setOption(option2)
  82.     this.resizeTheChart()
  83.     window.addEventListener('resize', this.resizeTheChart)
  84.   },
  85.   methods: {
  86.     resizeTheChart () {
  87.       if (this.$refs && this.$refs.mapbox) {
  88.         const mychartNode = document.getElementById('mychart')
  89.         mychartNode.style.height = mychartNode.offsetWidth * 0.8 + 'px'
  90.         this.mychart.resize()
  91.       }
  92.     },
  93.     // 接口采用自'https://renjinhui.github.io/review_vue/dist/index.html#/yqdt'
  94.     getData () {
  95.       jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427&callback=__jp0', {}, (err, data) => {
  96.         if (!err) {
  97.           // eslint-disable-next-line no-console
  98.           console.log(data)
  99.           const list = data.data.list.map(item => ({ name: item.name, value: item.value }))
  100.           option2.series[0].data = list
  101.           // eslint-disable-next-line no-console
  102.           console.log(list)
  103.           this.mychart.setOption(option2)// 这行代码必须是DOM渲染完成才可以执行哦
  104.         }
  105.       })
  106.     }
  107.   }
  108. }
  109. </script>
  110.  
  111. <!-- Add "scoped" attribute to limit CSS to this component only -->
  112. <style scoped lang="less">
  113. h3 {
  114.   margin: 40px 0 0;
  115. }
  116. ul {
  117.   list-style-type: none;
  118.   padding: 0;
  119. }
  120. li {
  121.   display: inline-block;
  122.   margin: 0 10px;
  123. }
  124. a {
  125.   color: #42b983;
  126. }
  127. </style>
  1. index.vue
  2. <template>
  3.   <div class="container">
  4.     <!-- 头部1 -->
  5.     <div class="item item_top">
  6.       <img src="../static/img/top.jpg" alt class="w_100">
  7.       <div class="index_item_topfont">
  8.         <h4>新型冠状病毒</h4>
  9.         <h4>疫情实时动态 · 省市地图</h4>
  10.       </div>
  11.     </div>
  12.     <!-- 头部2 -->
  13.     <!-- 中间 -->
  14.     <div class="font_statement">
  15.       <div class="statement_title">
  16.         全国疫情状况
  17.       </div>
  18.       <div class="update_time">
  19.         截止{{ mydata1 }}
  20.       </div>
  21.     </div>
  22.     <!-- 中间 -->
  23.     <!-- 卡片 -->
  24.     <div class="myrow">
  25.       <div class="tag">
  26.         <p>{{ confirmedCount }}</p>
  27.         确诊
  28.       </div>
  29.       <div class="tag">
  30.         <p>{{ suspectedCount }}</p>
  31.         疑似
  32.       </div>
  33.       <div class="tag">
  34.         <p>{{ deadCount }}</p>
  35.         死亡
  36.       </div>
  37.       <div class="tag">
  38.         <p>{{ curedCount }}</p>
  39.         治愈
  40.       </div>
  41.     </div>
  42.     <!-- 卡片 -->
  43.   </div>
  44. </template>
  45.  
  46. <script>
  47. // import Logo from '~/components/Logo.vue'
  48.  
  49. export default {
  50.   components: {
  51.     // Logo
  52.   },
  53.   data () {
  54.     return {
  55.       mydata1: '111',
  56.       confirmedCount: '',
  57.       suspectedCount: '',
  58.       curedCount: '',
  59.       deadCount: ''
  60.     }
  61.   },
  62.   created () {
  63.     this.setDate()
  64.     this.getData()
  65.   },
  66.   methods: {
  67.     getData () {
  68.       this.$axios.get('https://lab.ahusmart.com/nCoV/api/overall').then((res) => {
  69.         if (res.status === 200) {
  70.           const _ = res.data.results[0]
  71.           this.confirmedCount = _.confirmedCount
  72.           this.suspectedCount = _.suspectedCount
  73.           this.curedCount = _.curedCount
  74.           this.deadCount = _.deadCount
  75.         }
  76.         // eslint-disable-next-line no-console
  77.         console.log(res)
  78.       })
  79.     },
  80.     setDate () {
  81.       this.mydata1 = this.getweek()
  82.       // eslint-disable-next-line
  83.       console.log(this.mydata1)
  84.     },
  85.     getweek (dateString) {
  86.       let da = ''
  87.       if (dateString === undefined) {
  88.         // 需要修改时间，改为昨天
  89.         const aaa = new Date() - 86400000
  90.         const now = new Date(aaa)
  91.         let nowM = now.getMonth() + 1
  92.         // eslint-disable-next-line camelcase
  93.         nowM = nowM < 10 ? '0' + nowM : nowM
  94.         let nowD = now.getDate()
  95.         nowD = nowD < 10 ? '0' + nowD : nowD
  96.         da = now.getFullYear() + '-' + nowM + '-' + nowD
  97.         // eslint-disable-next-line no-console
  98.         console.log('今天系统时间是:' + da)
  99.       } else {
  100.         da = dateString.toString()
  101.         // 日期格式2015-12-30
  102.       }
  103.       // 下面备用
  104.       const date1 = new Date(
  105.         da.substring(0, 4),
  106.         parseInt(da.substring(5, 7)) - 1,
  107.         da.substring(8, 10)
  108.       )
  109.       // 当前日期
  110.       const date2 = new Date(da.substring(0, 4), 0, 1)
  111.       // 1月1号
  112.       // 获取1月1号星期（以周一为第一天，0周一~6周日）
  113.       let dateWeekNum = date2.getDay() - 1
  114.       if (dateWeekNum < 0) {
  115.         dateWeekNum = 6
  116.       }
  117.       if (dateWeekNum < 4) {
  118.         // 前移日期
  119.         date2.setDate(date2.getDate() - dateWeekNum)
  120.       } else {
  121.         // 后移日期
  122.         date2.setDate(date2.getDate() + 7 - dateWeekNum)
  123.       }
  124.       const d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000)
  125.       if (d < 0) {
  126.         const date3 = date1.getFullYear() - 1 + '-12-31'
  127.         return this.getweek(date3)
  128.       } else {
  129.         // 得到年数周数
  130.         const year = date1.getFullYear()
  131.         const week = Math.ceil((d + 1) / 7)
  132.         // eslint-disable-next-line no-console
  133.         console.log(year + '年第' + week + '周')
  134.         return da
  135.       }
  136.     }
  137.   }
  138. }
  139. </script>
  140.  
  141. <style lang='less' scoped>
  142. .container {
  143.   width: 100%;
  144.   min-width: 12rem;
  145.   // max-width: 50rem;
  146.   margin: 0 auto;
  147.   .item_top {
  148.     position: relative;
  149.     color: white;
  150.     .index_item_topfont {
  151.       position: absolute;
  152.       color: white;
  153.       bottom: 10%;
  154.       font-size: 2rem;
  155.       left: 1rem;
  156.     }
  157.     @media screen and (max-width: 550px) {
  158.       .index_item_topfont {
  159.         left: 0.8rem;
  160.         h4 {
  161.           font-size: 1rem;
  162.         }
  163.       }
  164.     }
  165.     @media screen and (max-width: 280px) {
  166.       .index_item_topfont {
  167.         left: 0.5rem;
  168.         h4 {
  169.           font-size: 0.5rem;
  170.         }
  171.       }
  172.     }
  173.   }
  174.   .font_statement{
  175.     position: relative;
  176.     text-align: left;
  177.     margin: 15px 15px;
  178.     padding: 0px 0px 5px 10px;
  179.     border-left: .2rem solid #f60;
  180.     border-bottom: 1px solid #efefef;
  181.     .statement_title{
  182.       font-size: 20px;
  183.       font-weight: bold;
  184.     }
  185.     .update_time{
  186.       font-size: 12px;
  187.       color: #b6b6b6;
  188.       font-weight: normal;
  189.       vertical-align: middle;
  190.     }
  191.   }
  192.   .myrow{
  193.     display: flex;
  194.     align-items: center;
  195.     justify-content: center;
  196.     .tag{
  197.       width: 20%;
  198.       text-align: center;
  199.       border-radius: 4px;
  200.       padding: 10px 10px;
  201.       background-color: #f3f3f3;
  202.       font-size: 15px;
  203.       // margin-right: 5px;
  204.       p{
  205.       color: red;
  206.       font-size: 20px;
  207.       }
  208.     }
  209.   }
  210.   .myrow .tag:not(:nth-child(4n)) {
  211.  margin-right: 5px;
  212. }
  213. }
  214. /* 公共样式1 */
  215. .w_100 {
  216.   width: 100%;
  217. }
  218. .font_h1 {
  219.   font-size: 2rem;
  220. }
  221. .font_h2 {
  222.   font-size: 1.5rem;
  223. }
  224. @media screen and (max-width: 550px) {
  225.   .font_h1 {
  226.     font-size: 1rem;
  227.   }
  228.   .font_h2 {
  229.     font-size: 0.8rem;
  230.   }
  231. }
  232. @media screen and (max-width: 280px) {
  233.   .font_h1 {
  234.     font-size: 0.5rem;
  235.   }
  236.   .font_h2 {
  237.     font-size: 0.2rem;
  238.   }
  239. }
  240. /* 公共样式2*/
  241. </style>

接下来是  vuecli  前端渲染版本

不同之处很细微

  1. top.vue
  2. /* eslint-disable camelcase */
  3. <template>
  4.   <div class="container">
  5.     <!-- 头部1 -->
  6.     <div class="item item_top">
  7.       <img src="../assets/img/top.jpg" alt class="w_100">
  8.       <div class="index_item_topfont">
  9.         <h4>新型冠状病毒</h4>
  10.         <h4>疫情实时动态 · 省市地图</h4>
  11.       </div>
  12.     </div>
  13.     <!-- 头部2 -->
  14.     <!-- 中间 -->
  15.     <div class="font_statement">
  16.       <div class="statement_title">
  17.         全国疫情状况
  18.       </div>
  19.       <div class="update_time">
  20.         截止{{ mydata1 }}
  21.       </div>
  22.     </div>
  23.     <!-- 中间 -->
  24.     <!-- 卡片 -->
  25.     <div class="myrow">
  26.       <div class="tag">
  27.         <p>{{ confirmedCount }}</p>
  28.         确诊
  29.       </div>
  30.       <div class="tag">
  31.         <p>{{ suspectedCount }}</p>
  32.         疑似
  33.       </div>
  34.       <div class="tag">
  35.         <p>{{ deadCount }}</p>
  36.         死亡
  37.       </div>
  38.       <div class="tag">
  39.         <p>{{ curedCount }}</p>
  40.         治愈
  41.       </div>
  42.     </div>
  43.     <!-- 卡片 -->
  44.   </div>
  45. </template>
  46.  
  47. <script>
  48. // import Logo from '~/components/Logo.vue'
  49. import axios from 'axios'
  50.  
  51. export default {
  52.   components: {
  53.     // Logo
  54.   },
  55.   data () {
  56.     return {
  57.       mydata1: '111',
  58.       confirmedCount: '',
  59.       suspectedCount: '',
  60.       curedCount: '',
  61.       deadCount: ''
  62.     }
  63.   },
  64.   created () {
  65.     this.setDate()
  66.     this.getData()
  67.   },
  68.   methods: {
  69.     getData () {
  70.       axios.get('https://lab.ahusmart.com/nCoV/api/overall').then((res) => {
  71.         if (res.status === 200) {
  72.           const _ = res.data.results[0]
  73.           this.confirmedCount = _.confirmedCount
  74.           this.suspectedCount = _.suspectedCount
  75.           this.curedCount = _.curedCount
  76.           this.deadCount = _.deadCount
  77.         }
  78.         // eslint-disable-next-line no-console
  79.         console.log(res)
  80.       })
  81.     },
  82.     setDate () {
  83.       this.mydata1 = this.getweek()
  84.       // eslint-disable-next-line
  85.       console.log(this.mydata1)
  86.     },
  87.     getweek (dateString) {
  88.       let da = ''
  89.       if (dateString === undefined) {
  90.         // 需要修改时间，改为昨天
  91.         const aaa = new Date() - 86400000
  92.         const now = new Date(aaa)
  93.         let nowM = now.getMonth() + 1
  94.         // eslint-disable-next-line camelcase
  95.         nowM = nowM < 10 ? '0' + nowM : nowM
  96.         let nowD = now.getDate()
  97.         nowD = nowD < 10 ? '0' + nowD : nowD
  98.         da = now.getFullYear() + '-' + nowM + '-' + nowD
  99.         // eslint-disable-next-line no-console
  100.         console.log('昨天系统时间是(偷偷减掉了一天嘿嘿):' + da)
  101.       } else {
  102.         da = dateString.toString()
  103.         // 日期格式2015-12-30
  104.       }
  105.       // 下面备用
  106.       const date1 = new Date(
  107.         da.substring(0, 4),
  108.         parseInt(da.substring(5, 7)) - 1,
  109.         da.substring(8, 10)
  110.       )
  111.       // 当前日期
  112.       const date2 = new Date(da.substring(0, 4), 0, 1)
  113.       // 1月1号
  114.       // 获取1月1号星期（以周一为第一天，0周一~6周日）
  115.       let dateWeekNum = date2.getDay() - 1
  116.       if (dateWeekNum < 0) {
  117.         dateWeekNum = 6
  118.       }
  119.       if (dateWeekNum < 4) {
  120.         // 前移日期
  121.         date2.setDate(date2.getDate() - dateWeekNum)
  122.       } else {
  123.         // 后移日期
  124.         date2.setDate(date2.getDate() + 7 - dateWeekNum)
  125.       }
  126.       const d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000)
  127.       if (d < 0) {
  128.         const date3 = date1.getFullYear() - 1 + '-12-31'
  129.         return this.getweek(date3)
  130.       } else {
  131.         // 得到年数周数
  132.         const year = date1.getFullYear()
  133.         const week = Math.ceil((d + 1) / 7)
  134.         // eslint-disable-next-line no-console
  135.         console.log(year + '年第' + week + '周')
  136.         return da
  137.       }
  138.     }
  139.   }
  140. }
  141. </script>
  142.  
  143. <style lang='less' scoped>
  144. *{
  145.  padding:0;
  146.   margin: 0;
  147. }
  148. h4{
  149.  
  150.   text-align: left;
  151. }
  152. .container {
  153.   width: 100%;
  154.   min-width: 300px;
  155.   // max-width: 50rem;
  156.   margin: 0 auto;
  157.   .item_top {
  158.     position: relative;
  159.     color: white;
  160.     .index_item_topfont {
  161.       position: absolute;
  162.       color: white;
  163.       bottom: 10%;
  164.       font-size: 2rem;
  165.       left: 1rem;
  166.     }
  167.     @media screen and (max-width: 550px) {
  168.       .index_item_topfont {
  169.         left: 0.8rem;
  170.         h4 {
  171.           font-size: 1rem;
  172.         }
  173.       }
  174.     }
  175.     @media screen and (max-width: 300px) {
  176.       .index_item_topfont {
  177.         left: 0.5rem;
  178.         h4 {
  179.           font-size: 0.5rem;
  180.         }
  181.       }
  182.     }
  183.   }
  184.   .font_statement{
  185.     position: relative;
  186.     text-align: left;
  187.     margin: 15px 15px;
  188.     padding: 0px 0px 5px 10px;
  189.     border-left: .2rem solid #f60;
  190.     border-bottom: 1px solid #efefef;
  191.     .statement_title{
  192.       font-size: 20px;
  193.       font-weight: bold;
  194.     }
  195.     .update_time{
  196.       font-size: 12px;
  197.       color: #b6b6b6;
  198.       font-weight: normal;
  199.       vertical-align: middle;
  200.     }
  201.   }
  202.   .myrow{
  203.     display: flex;
  204.     align-items: center;
  205.     flex-wrap: wrap;
  206.     justify-content: center;
  207.     .tag{
  208.       width: 17%;
  209.       margin:0.2rem 0;
  210.       text-align: center;
  211.       border-radius: 4px;
  212.       padding: 10px 10px;
  213.       background-color: #f3f3f3;
  214.       font-size: 15px;
  215.       // margin-right: 5px;
  216.       p{
  217.       color: red;
  218.       font-size: 20px;
  219.       }
  220.     }
  221.   }
  222.   .myrow .tag:not(:nth-child(4n)) {
  223.  margin-right: 5px;
  224. }
  225. }
  226. /* 公共样式1 */
  227. .w_100 {
  228.   width: 100%;
  229. }
  230. .font_h1 {
  231.   font-size: 2rem;
  232. }
  233. .font_h2 {
  234.   font-size: 1.5rem;
  235. }
  236. @media screen and (max-width: 550px) {
  237.   .font_h1 {
  238.     font-size: 1rem;
  239.   }
  240.   .font_h2 {
  241.     font-size: 0.8rem;
  242.   }
  243. }
  244. @media screen and (max-width: 300px) {
  245.   .font_h1 {
  246.     font-size: 0.5rem;
  247.   }
  248.  
  249.     .container .myrow .tag{
  250.       width: 30%;}
  251.      .container   .myrow .tag:not(:nth-child(4n)) {
  252.  margin-right: 0px;
  253. }
  254.   .container .myrow .tag:not(:nth-child(2n)) {
  255.  margin-right: 0.4rem;}
  256.   .font_h2 {
  257.     font-size: 0.2rem;
  258.   }
  259. }
  260. /* 公共样式2*/
  261. </style>
  1. helloword.vue
  2. <template>
  3.   <div class="hello">
  4.     <mytop/>
  5.   <!-- 初始化echarts需要一个有宽高的盒子 -->
  6.   <div id="mychart" ref='mapbox' style='margin-top:10px;width:100%;min-width:300px;height:100%;min-height:400px'>
  7.  
  8.   </div>
  9.   </div>
  10. </template>
  11.  
  12. <script>
  13. import mytop from './top.vue'
  14. import echarts from 'echarts'
  15. import 'echarts/map/js/china'
  16. import jsonp from 'jsonp'
  17. const option1 = {
  18.     xAxis: {
  19.         type: 'category',
  20.         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  21.     },
  22.     yAxis: {
  23.         type: 'value'
  24.     },
  25.     series: [{
  26.         data: [820, 932, 901, 934, 1290, 1330, 1320],
  27.         type: 'line'
  28.     }]
  29. }
  30. // 使用地图先注册地图
  31. const option2 = {
  32.   title:{text:'疫情地图',link:'http://tangdd.cn',subtext:'全国疫情地图一览表'},
  33.   series:[{
  34.     data:[],//用来展示后台给的数据
  35.     type:'map',//控制是折线图还是地图
  36.     map:'china',//控制是那个地区地图
  37.     label:{ show:true ,color: 'black',fontSize:10},//控制对应地区的汉字
  38.     itemStyle:{
  39.       areaColor:'pink',
  40.       borderColor:'#776a6a'
  41.     },//控制地图的颜色还有边框
  42.     emphasis:{
  43.       label:{
  44.         color:'black',
  45.         fontSize:12
  46.       },
  47.       itemStyle:{
  48.         areaColor:'#ccc'
  49.       }
  50.     },//控制鼠标滑过之后背景色和字体颜色
  51.     zoom:1,//控制地图的放大缩小
  52.   }],
  53.   //分层次显示地图颜色用下面这个东西,就是地图左下角那个东西
  54.   visualMap:[{
  55.     zoom:1,
  56.     type:'piecewise',//条状
  57.     show:true,
  58.     splitNumber:5,//默认分为几条，就是看你要搞几个间断
  59.     pieces:[
  60.       {min:10000},
  61.       {min:1000,max:9999},
  62.       {min:100,max:999},
  63.       {min:10,max:99},
  64.       {min:1,max:9}
  65.       ],
  66.       align:'right',//控制字和条的位置，默认放到左边
  67.       // orient:'horizontal',//控制整块的位置是平铺一大长条还是垂直啥的,默认垂直
  68.       // left:40 ,//控制分段位置控制整块的位置
  69.       // right:100 //控制分段位置控制整块的位置
  70.       // showLabel:false,//这个没什么用处，会隐藏字
  71.       // textStyle：{},//这个很明显是搞字体的
  72.       inRange:{
  73.         symbol:'rect',
  74.         color:['#ffc9c9','#9c0505']
  75.       },//这个控制小图是圆的还是方的啥的还有渐变色
  76.       itemWidth:8,
  77.       itemHeight:4
  78.   }]
  79. }
  80. export default {
  81.   name: 'HelloWorld',
  82.   components: {
  83.     mytop
  84.   },
  85.   mounted(){
  86.     this.getData()
  87.     this.mychart = echarts.init(this.$refs.mapbox)
  88.     // mychart.setOption(option1)
  89.     this.mychart.setOption(option2)
  90.     this.resizeTheChart()
  91.     window.addEventListener("resize", this.resizeTheChart);
  92.   },
  93.   methods:{
  94.      resizeTheChart() {
  95.       if (this.$refs && this.$refs.mapbox) {
  96.         let mychartNode = document.getElementById('mychart');
  97.         mychartNode.style.height = mychartNode.offsetWidth*0.8+'px'
  98.         this.mychart.resize();
  99.       }
  100.     },
  101.     // 接口采用自'https://renjinhui.github.io/review_vue/dist/index.html#/yqdt'
  102.     getData(){
  103.       jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427&callback=__jp0',{},(err,data)=>{
  104.         if(!err){
  105.           console.log(data)
  106.           let list = data.data.list.map(item=>({name:item.name,value:item.value}))
  107.           option2.series[0].data = list;
  108.           console.log(list)
  109.           this.mychart.setOption(option2)//这行代码必须是DOM渲染完成才可以执行哦
  110.         }
  111.       })
  112.     }
  113.   }
  114. }
  115. </script>
  116.  
  117. <!-- Add "scoped" attribute to limit CSS to this component only -->
  118. <style scoped lang="less">
  119.  
  120. *{
  121.  padding:0;
  122.   margin: 0;
  123. }
  124. h3 {
  125.   margin: 40px 0 0;
  126. }
  127. ul {
  128.   list-style-type: none;
  129.   padding: 0;
  130. }
  131. li {
  132.   display: inline-block;
  133.   margin: 0 10px;
  134. }
  135. a {
  136.   color: #42b983;
  137. }
  138. </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制作疫情地图 代码略有不同哦~~~的更多相关文章

  1. vue中使用echarts来绘制世界地图和中国地图

    第一步,下载echarts cnpm install echarts --save-dev 第二步,在main.js中全局引入 //引入echarts import echarts from 'ech ...

  2. 在vue中调用echarts中的地图散点图~

    首先!当然是在vue中引入echarts! 命令行  npm install echarts --save 在main.js文件中里引入        import echarts from 'ech ...

  3. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  4. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  5. 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题

    今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...

  6. vue中使用echarts（vue+vue-cli+axios+jsonp+echarts）

    一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...

  7. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

  8. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  9. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

  10. 在VUE中使用Echarts

    第一步:下载echarts npm install echarts --save 第二步:在项目中main.js引入 import echarts from 'echarts' Vue.prototy ...

随机推荐

  1. 《上传那些事儿之Nest与Koa》——文件格式怎么了！

    转载自:juejin - 马睿不想说话 概要 本文主要针对在使用node作为服务端接口时,前端上传上传文件至node作为中转,再次上传至oss/cdn的场景.以及针对在这个过程中,需要对同一个文件进行 ...

  2. C# String.Empty和""的区别

    个人观点 Empty其实是string类中的一个静态的只读字段,因为是静态成员变量,所以String.Empty是在设计String类的时候就已经在内存上分配好了空间,故在使用Empty这个变量的时候 ...

  3. VP记录

    预计在最后的日子里适量VP 简单记录一下 CF 1037 Link 上来秒了ABCD,很快啊 A是二进制拆分,B是一眼贪心,C是一个非常简单且好写的dp D把边遍历顺序按照所需的bfs顺序排序,最后比 ...

  4. python中的浅拷贝，深拷贝

    直接引用,间接引用 # 1.列表存储的是索引对应值的内存地址,值会单独的开辟一个内存空间 list = ["a","b"] 内存里面存储的就是list[0],l ...

  5. Vue实现离开页面二次确认

    在项目开发中遇到用户编辑内容后未保存推出编辑页面时需要提示用户"当前数据未保存,是否退出",实际开发中利用window.onbeforeunload方法与vue.$on方法在upd ...

  6. [leetcode] 994. Rotting Oranges

    题目 You are given an m x n grid where each cell can have one of three values: 0 representing an empty ...

  7. 2018 Web开发人员学习路线图

    以下 Web 开发人员学习路线图是来自 Github developer-roadmap 项目,目前已经有繁体版翻译 developer-roadmap-chinese. 主要有三个方向,分别为前端开 ...

  8. UBOOT编译--- UBOOT的顶层config.mk(五)

    1. 前言 UBOOT版本:uboot2018.03,开发板myimx8mmek240. 2. 概述 此文件包含在 ./Makefile 和 spl/Makefile 中. 清理状态以避免添加两次相同 ...

  9. 重新认识下JVM级别的本地缓存框架Guava Cache(2)——深入解读其容量限制与数据淘汰策略

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 通过<重新认识下JVM级别的本地 ...

  10. apktool回编译报错

    报错 error: No resource identifier found for attribute 'XXX' in package 'XXX' 解决 将xml文件中 "http:// ...