Echart，dataV开发可视化数据大屏

最近公司接了一个项目，关于做数据的大屏展示的，在此记录一下一些效果实现遇到的问题和怎么解决的

第一部分

右下角的饼图模块，当其中的标签长度过长的时候，可以采用分页显示

legend: {
       textStyle: {
          fontWeight: 'normal',
          color: '#fff',
          fontSize: fontSize(0.14)
        },
        type: 'scroll', // scroll开启分页
        orient: 'vertical', // 标签展示方向
        right: 0,
        top: fontSize(0.3),
        bottom: fontSize(0.5),
        data: title
      },

核心是中间的地图模块

因为需求不是世界和中国地图，而是区地图，所以只能绘制出区的地图模块，
那么去地图的地理位置数据从这里拿。

拿到对应的json地图数据之后，开始引入

<div class="classNamemap"  :style="{height:height}" ref="myEchart" @click="details"></div>
// js引入
import echarts from 'echarts'
import map from '../../utils/map.json' // 引入的地图json

 this.chart = echarts.init(this.$refs.myEchart)
 echarts.registerMap('longhua', map) // 配置地图
            this.chart.setOption({
              // echarts 配置
              tooltip: {
                trigger: 'item'
              },
              geo: {
                // 地图配置
                show: true,
                left:  'center',
                map: 'longhua',
                label: {
                  show: false,
                  emphasis: {
                    show: false
                  }
                },
                emphasis: {
                  label: {
                    show: false
                  }

                },
                tooltip: {
                  show: false
                },
                roam: false,
                itemStyle: {
                  normal: {  // 修改地图的正常背景色
                    areaColor: '#0F76B1',
                    borderColor: '#06143A'
                  },
                  emphasis: { // 修改地图鼠标悬浮的时候正常背景色
                    areaColor: '#0F76B1'
                  }
                },
                zoom: 1.2
              },
              series: [
                {
                  // 地图配置
                  name: '工程数',
                  type: 'map',
                  mapType: 'longhua', // 自定义扩展图表类型
                  geoIndex: 0,
                  // aspectScale: 0.75, // 长宽比
                  itemStyle: {
                    normal: { label: { show: true } },
                    emphasis: { label: { show: true } }
                  }
                },
              ]
            })

画出来的样子

如果需要配置散点图就在series的属性中加入散点配置

 {
      // 散点配置
      name: '扫码',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: list, // 数据可以去看官网格式
      symbolSize: function (data) {
        return data[1] / 2
      }, // 散点图的大小，造成随机
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke',
        color: '#EF837F',
        period: 4,
        scale: 2.5
      },
      tooltip: {
        formatter: '{b}',
        show: true
      },
      hoverAnimation: true,
      label: {
        color: '#fff',
        show: false,
        emphasis: { // 高亮时
          show: false
        }
      },
      itemStyle: {
        normal: {
          color: '#F65650'
        }
      }
    },