{"id":323,"date":"2021-12-03T17:33:38","date_gmt":"2021-12-03T09:33:38","guid":{"rendered":"http:\/\/gjweb.top\/?p=323"},"modified":"2021-12-03T17:33:39","modified_gmt":"2021-12-03T09:33:39","slug":"echarts%e4%bd%bf%e7%94%a8%e4%b8%ad%e5%9b%bd%e5%9c%b0%e5%9b%be","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=323","title":{"rendered":"Echarts\u4f7f\u7528\u4e2d\u56fd\u5730\u56fe"},"content":{"rendered":"\n

\u65e9\u8d77\u7684Echarts3\u7248\u672c\u63d0\u4f9b\u4e86\u5730\u56fe\u7684JSON\u5305,\u4f46\u662f\u7531\u4e8e\u81ea\u8eab\u7248\u672c\u7684\u8fed\u4ee3,\u8fd9\u4e00\u6a21\u5757\u5728\u6700\u65b0\u76844.0\u548c5.0\u4e2d\u6d88\u5931\u4e86.\u4e0b\u9762\u9644\u4e0a\u4e2d\u56fd\u5730\u56fe\u7684CDN\u6587\u4ef6, \u4f46\u6ce8\u610f\u7684\u662f,\u4f7f\u7528Echarts\u5730\u56fe\u5fc5\u987b\u7528\u8fc7 CDN \u7684\u65b9\u5f0f\u5148\u5f15\u5165 echarts.js \u5728\u5f15\u5165 china.js<\/strong><\/p>\n\n\n\n

\u4ee3\u7801\u5982\u4e0b\u5728 index.html \u4e2d,\u4e3a\u4e86\u9632\u6b62\u7b2c\u4e09\u65b9CDN\u6302\u6389,\u5efa\u8bae\u5c06\u9879\u76ee\u4e2d\u7528\u5230\u7684\u6240\u6709\u7b2c\u4e09\u65b9\u6587\u4ef6\u4e0b\u8f7d\u5230\u672c\u5730\u9879\u76ee\u4e2d<\/p>\n\n\n\n

echarts.js && china.js<\/a>\u4e0b\u8f7d<\/a><\/div>\n\n\n\n
<script src=\".\/static\/echarts.min.js\"><\/script>
<script src=\".\/static\/china.js\"><\/script><\/code><\/pre>\n\n\n\n
\u6784\u5efa\u5730\u56fe<\/p>\n\n\n\n
\u6ce8\u610f\u70b9: \u56e0\u4e3a\u4f7f\u7528\u7684\u662fCDN\u7684\u5f15\u5165\u65b9\u5f0f echarts\u7684\u5b9e\u4f8b\u4f1a\u7ed1\u5b9a\u5728window\u4e0a, \u6240\u4ee5\u5728\u8c03\u7528\u7684\u65f6\u5019\u4f7f\u7528 window.echarts \u8c03\u7528<\/strong><\/p>\n\n\n\n
<!-- \u5730\u56fe -->
<template>
  <div class=\"mapstyle\" id=\"mapEcharts\"><\/div>
<\/template>
\u200b
<script>
export default {
  data () {
    return {
      myChart:\"\",
      option:{
        tooltip: {
            padding: 0,
            enterable: true,
            transitionDuration: 1,
            textStyle: {
                color: '#000',
                decoration: 'none',
            },
            formatter:(params)=>{
              if(params.data){
                return \"\"
              }else{
                return ''
              }
              
            }
        },
        grid:{
          top:\"0px\",
          left:\"0px\"
        },
        geo: {
            show: true,
            map: \"china\",
            aspectScale:0.75,
            zoom:1.2,
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                },
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: 'rgba(255,255,255,0)',
                    borderColor: '#1180c7',
                },
                emphasis: {
                    areaColor: '#4499d0',
                },
            },
        },
        series: [
          {
            name: '\u6563\u70b9',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [],
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: '#fff',
              },
            },
          },
          {
            type: 'map',
            map: \"china\",
            geoIndex: 0,
            aspectScale: 0.75, \/\/\u957f\u5bbd\u6bd4
            showLegendSymbol: false, \/\/ \u5b58\u5728legend\u65f6\u663e\u793a
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff',
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077',
              },
              emphasis: {
                areaColor: '#2B91B7',
              },
            },
            animation: false,
            data: [],
          },
          {
            name: '\u70b9',
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 6,
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: function (val) {
              return val[2] \/ 10;
            },
            data: [],
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke',
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'left',
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow',
              },
            },
            zlevel: 1,
          },
        ],
      }
    
    };
  },
\u200b
  components:{},
\u200b
  computed:{},
\u200b
  mounted(){
    window.addEventListener(\"resize\", () => { 
      this.myChart.resize()
    })
    this.render_map()
  },
\u200b
  methods:{
    \/\/ \u6e32\u67d3echarts
    async render_map(){
      let response = await this.$axios({
        methods:'get',
        url:``
      })
      let res = response.data.map_data;
      let dataA = []
      let dataB = []
      res.forEach((item,index)=>{
        dataA[index] = {
          name:item.province,
          value:[item.longi,item.lati,item.provincenum]
        }
        dataB[index] = {
          name:item.province,
          value:item.provincenum
        }
      })
      this.option.series[0].data = dataA
      this.option.series[2].data = dataB
      this.option.series[3].data = dataA
      this.myChart = window.echarts.init(document.getElementById('mapEcharts'));
      this.myChart.setOption(this.option);
    }
  }
}
\u200b
<\/script>
<style scoped>
.mapstyle {
  width:100%;
  height: 100%;
}
<\/style><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u65e9\u8d77\u7684Echarts3\u7248\u672c\u63d0\u4f9b\u4e86\u5730\u56fe\u7684JSON\u5305,\u4f46\u662f\u7531\u4e8e\u81ea\u8eab\u7248\u672c\u7684\u8fed\u4ee3,\u8fd9\u4e00\u6a21\u5757\u5728\u6700\u65b0\u76844.0\u548c5.0\u4e2d\u6d88\u5931 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-323","post","type-post","status-publish","format-standard","hentry","category-ecahrts"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=323"}],"version-history":[{"count":0,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/323\/revisions"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}