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'}}},