vue+echarts大屏地图以及在大屏上画线和数值(最新echart5.0)

最近工时要求开发一个大屏项目做到

 

直接上代码

首先做出地图效果

在  https://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

这里获取你想要的城市，省份json数据，再将其放入你的项目文件中

下面代码

  <div class="echart_map" ref="hunan_map">




var hunan = require(`../../assets/js/湖南省.json`)  // 引入json
methods: {

 // echart单位换算
    nowSize (val,initWidth) {
      initWidth = 1920
      return val * (this.c_width / initWidth);
    },
 huNanMap (val) {
      var that = this
      this.$echarts.registerMap('hunan', hunan); // 取数据
      var myChart = this.$echarts.init(this.$refs.hunan_map)

      var data = json.data;
      var series = [];

        // 画线，点的函数
        var convertLineData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var coordS = dataItem.lineS; // 线起点
          var coordM = dataItem.lineM; // 线中间点
          var coordE = dataItem.lineE; // 线尾点
          if (coordS && coordM && coordE) {
            res.push({
              coords: [coordS, coordM, coordE]
            });
          }
        }
        return res;
      };
      var convertValData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          res.push({
            name: dataItem.areaName,
            value: dataItem.lineE.concat(dataItem.value)
          });
        }
        return res;
      };
        
        // 这里是你要在地图上画的点，线配置，往data里面加就行
        var json = {
        data: [{
          areaName: '长沙市',
          value: 94,
          lineS: [113.482279,28.19409],
          lineM: [113.441, 28.4242],
          lineE: [113.8648, 29.2891]
        }]
            };

      series.push(
            {    // 这是画的线配置
          name: '',
          type: 'lines',
          zlevel: 2,
          symbol: 'none',
          // silent: true, //不响应鼠标点击或事件
          effect: {
            show: false // 关闭特效
          },
          tooltip: {
            show: false
          },
          labelLayout: {
            draggable: true
          },
          polyline: true, // 支持多点连线
          itemStyle:{
            normal:{
              lineStyle:{
                width: that.nowSize(2),
                type:'dotted' //'dotted'虚线 'solid'实线
              }
            }
          },
          lineStyle: {
            normal: {
              color: 'green',
              opacity: 0.9,
              curveness: 0
            }
          },
          data: convertLineData(data)
        },
        {   // 这里是点还有点旁边的内容
          name: '',
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          hoverAnimation: false, // hover时不高亮点
          cursor: 'default', // 鼠标设置为箭头
          itemStyle: {
            normal: {
              color: 'red'
            }
          },
          tooltip: {
            show: false,
          },
          label: {
            rich: {
              //自定义样式a
              a: {
                fontFamily: 'lcd',   //字体名称
                color: '#fff',  //字体颜色
                fontSize: that.nowSize(12),  //字体大小
                borderColor: 'rgba(30, 157, 222, 1)',
                borderWidth: that.nowSize(1.2),
                padding: [8, 8, 8, 8]
              },
              //**自定义样式b**
              b: {
                color: '#fff',
                fontSize: 16
              }
            },
            // normal: {
            show: true,
            position: 'right',
            fontSize: that.nowSize(14),
            fontWeight: 'bold',
            color: '#f5a623',
            formatter: function (param) {
              return '{a|' + param.value[2] + '/工单' + '}' // 此处用到自定义样式
            },
           
          },
          data: convertValData(data)
        }
        )

        var option = {  // 这里是地图内容配置
        // backgroundColor: '#404a59', // 背景色
        title: {
          text: '全省人工服务概况',
          left: 'center',
          textStyle: {
            color: '#2b9de0',
            fontSize: that.nowSize(18)
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false,
          selectorLabel: {
            backgroundColor: 'black'
          }
        },
        geo: {
          map: 'hunan',
          label: {
            color: 'black',
            fontSize: that.nowSize(14),
            emphasis: {
              show: true,
              color: 'green',
              areaColor: 'yellow'
            },
          },
          roam: false,
          selectedMode: 'single',
          itemStyle: {
            areaColor: 'red',
            normal: {
              // areaColor: 'black', // 地图整体的颜色
              borderColor: '#404a59' // 边缘线颜色
            },
            emphasis: {
              itemStyle: {
                areaColor: 'red' // hover 的背景色
              }
            }
          },
          select: [{
            itemStyle: {
              areaColor: 'black' // hover 的背景色
            }
          }
          ],
          regions: [{ // 默认选择
            name: val.name,
            selected: true,
            itemStyle: {
              normal: {
                areaColor: '#AADDFF'
              }
              // areaColor: 'red', // 地图背景色
              // backgroundColor: 'black',
              // opacity: 0
            }
          },],
        },
        series: series
      };
      myChart.setOption(option);  // 应用配置

       // 加个点击事件
      myChart.on('click', function (e) {
        // e.color = '#d50000'
        if (e.hasOwnProperty('region')) {
          option.geo.regions[0].name = e.region.name
          myChart.setOption(option);
        } else {
          return false;
        }
        console.log(e.region,option)
      });
}

建议线画地图出来，再一步步移植代码。

线，点或者其它什么样式基本都是label里面能改，字体样式什么的就是itemStyle里面改。

反正2个互相用就能解决大部分问题

最后formatter是个很有用的东西，在这是编辑点右边的数据。你们可以自己定义。

最后放个echart文档地址

https://echarts.apache.org/zh/option.html#title