echart 庖丁解牛的使用

<template>
  <div>
    <div id="main-middle" class="x-c" style="width:100%">

    </div>
  </div>
</template>
    
<script>
import axios from 'axios'
export default {
  props: {
    regionData:{
      type:Object,
      default:{}
    }
  },
  components: {},
  data() {
    return {}
  },
  watch: {
    regionData: function() {
      this.getMap()
    }
  },

  computed: {},
  methods: {
    getMap() {//中间地图
      var dom = document.getElementById('main-middle');
      var myChart = this.$echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var app = {};
      var option;
      let that = this
      axios.get('svg.图片').then(svg => {
        that.$echarts.registerMap('Beef_cuts_France', { svg: svg.data });
        option = {
          //                     legend: {
          //     orient: 'vertical'
          // },

          tooltip: {
            //   triggerOn: 'click',
            // position: ['50%', '50%'],
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0)',
            borderColor: 'rgba(0,0,0,0)',
            extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);',
            zIndex: 400,
            enterable: true,
            formatter: function (params, ticket, callback) {
              let content = {
                area: 1,
                areaName: params.name
              }
              var tipHtml = '';
              tipHtml = '<div class="border-container" style="width: 197px;height: 91px;background: #2F558F;border: 2px solid #3D7FFF;  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset !important;">'
                + '<div style="width:100%;margin-bottom:10px;">'
                + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
                + '<div>'
               
                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                +  '浏览量'+'<span style="color:#f4e925;margin:0 6px;">' + (params.value||0) +  '</span>'+  '</p>'
                + '</div>'
                + '<span class="top-left border-span">'
                + '</span>'
                + '<span class="top-right border-span">'
                + ' </span>'
                + ' <span class="bottom-left border-span">'
                + '</span>'
                + '<span class="bottom-right border-span">'
                + '</span>'
                + '</div>';

              return tipHtml;

              return result;
            }

          },
          visualMap: {
           
            show: true,
            min: 0,
          left: 'right',
          top: 'bottom',
          text: ['高', '低'], // 取值范围的文字
            // orient: 'horizontal',
            realtime: true,
            calculable: true,
            inRange: {
              color: ['#DB860B', '#ED9B0E', '#FFAA00', '#FEB710', '#FDC321', '#FFD203', '#FFE460', '#FFEA94', '#FCF8CF', '#FFFCF0']
            },
            pieces: [
             
            ]
          },
          series: [
            {
              name: 'French Beef Cuts',
              type: 'map',
              map: 'Beef_cuts_France',
              roam: false, // 不开启缩放和平移
          zoom: 1.23, // 视角缩放比例
              itemStyle: {
                normal: {
                  borderWidth: 0.25,//边际线大小
                  borderColor: '#ffffff',//边界线颜色
                  areaColor: '#09295b'//默认区域颜色
                },
                emphasis: {
                  show: true,
                  areaColor: '#10376E',//鼠标滑过区域颜色
                  label: {
                    show: true,
                    textStyle: {
                      color: '#fff'
                    }
                  }
                }
              },
              selectedMode: false,
              data: this.regionData.seriesData2 //name 要对应上svg地图的name.值内容才会匹配上

            }
          ]
        };
        myChart.setOption(option);
      })
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }

      window.addEventListener('resize', myChart.resize);
    },
  },
  created() {
  },
  mounted() {
    console.log(this.regionData)
    this.getMap()
  }
}
</script> 
    
<style scoped lang='less'>
#main-middle {
  width: 568px;
  height: 460px;
  background-color: transparent;
}
</style>