vue+echart地图+弹窗

最新推荐文章于 2024-05-08 13:15:46 发布
最新推荐文章于 2024-05-08 13:15:46 发布
阅读量734 收藏 2
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/henghahouhei/article/details/131918786
版权 

<template>
  <div id="gbznt" class="gbznt" ref="gbznt">
    <div id="mapContainer" class="mapContainer"></div>
  </div>
</template>
<script>
  let flag= 1
  import * as echarts from "echarts";
  let hdOption, initEcharts;
  import $ from 'jquery'
  import drill from '@/utils/drill'
  var aTimer;
  export default {
    name: 'centerMap',
    data(){
      let areaColor=['#56CCFB', '#0160AD'];
      let borderColor='#37C1FD';
      let emphasizeColor="#0160AD";
      let labelColor=['#bafdff', '#ffffff'];
      return{
        tmpLunboInfo:{
          index: 0,
          areaColor: {
            type: 'radial',
            x: 0.7,
            y: 0.5,
            r: 0.4,
            colorStops: [{
              offset: 0,
              color: '#56CCFB' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#0160AD' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
        },
        tmpLunboInfo1:{
          index: 0,
          areaColor: {
            type: 'radial',
            x: 0.6,
            y: 0.6,
            r: 1,
            colorStops: [{
              offset: 0,
              color: '#0d61ab' // 0% 处的颜色
            },{
              offset: 0.5,
              color: 'rgb(255,250,0)' // 100% 处的颜色
            },{
              offset: 1,
              color: 'rgb(251,255,2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
        },
        mapIndex:1,
        isClick: false,
        regionsData:[
          {
            name: '黄岛区',
            value: [120.095262, 36.101767],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '红石崖街道',
            value: [120.095262, 36.101767],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '黄岛街道',
            value: [120.223051, 36.044854],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '薛家岛街道',
            value: [120.209532, 35.960284],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '辛安街道',
            value: [120.139688, 36.019265],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '王台镇',
            value: [120.002972, 36.0779441],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '灵珠山街道',
            value: [120.085354, 36.0163451],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '长江路街道',
            value: [120.156758, 35.949159],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '灵山卫街道',
            value: [120.140558, 35.941005],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '隐珠街道',
            value: [120.020412, 35.841401],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '宝山镇',
            value: [119.895833, 36.001432],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '六汪镇',
            value: [119.784986, 35.944079],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '铁山街道',
            value: [119.93574, 35.902106],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '珠山街道',
            value: [119.982206, 35.881178],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '珠海街道',
            value: [119.999568, 35.848121],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '滨海街道',
            value: [119.977144, 35.821489],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '张家楼镇',
            value: [119.926292, 35.793926],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '大村镇',
            value: [119.72593, 35.805443],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '藏马镇',
            value: [119.815722, 35.756631],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '琅琊镇',
            value: [119.858827, 35.686819],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '泊里镇',
            value: [119.78662, 35.7045341],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '大场镇',
            value: [119.638675, 35.674932],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          },
          {
            name: '海青镇',
            value: [119.569741, 35.659232],
            totals:'186.85',
            xZzArea:'88.21',
            xLsYield:'816.85',
            qZzArea:'88.22',
            qLsYield:'956.85',
            itemStyle: {
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [{
                  offset: 0,
                  color:areaColor[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color:areaColor[1] // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor:borderColor,
              borderWidth: 2,
              //选中效果
              emphasis: {
                areaColor:emphasizeColor, // hover效果
              },
            },
            label: {
              textStyle: {
                color:labelColor[0]
              }
            },
          }
        ]
      }
    },
    methods: {
      initChartMap(){
        var _this = this;
        initEcharts=echarts.init(document.getElementById('mapContainer'))
        initEcharts.clear()
        var huangDao = "../js/huangdao.json";
        var url = huangDao;
        $.getJSON(url, function (geoJson) {

          hdOption = {
            backgroundColor: 'rgba(128, 128, 128, 0.0)', //rgba设置透明度0.1
            color: ['#D4EDF2', '#00BDFE', '#FACA32'],
            grid: {
              top: "2%", // 等价于 y: '16%'
              left: "2%",
              right: "2%",
              bottom: "2%",

            },
            geo: [
              //底层地图
              {
                map: 'huangDao',
                aspectScale: 0.9,
                roam: false, //是否允许缩放
                //zoom: 1.1, //默认显示级别
                layoutSize: '95%',
                layoutCenter: ['50%', '52%'],
                itemStyle: {
                  areaColor: '#0d376f',
                  borderColor: '#0080d8',
                  borderWidth: 2,
                },
                // zlevel: 1,
                silent: true,
              },
              {
                map: 'huangDao',
                aspectScale: 0.9,
                roam: false, //是否允许缩放
                //zoom: 1.1, //默认显示级别
                layoutSize: '95%',
                layoutCenter: ['50%', '50%'],
                regions: _this.regionsData,
                // zlevel: 2,
                silent: false,
                label: {
                  show: true
                }
              },
            ],
            tooltip: {
              show: true,
              trigger: 'item', //触发类型。item,axis,none
              enterable: true,//鼠标是否可进入提示框浮层中，默认为false，
              showContent: true,      //是否显示提示框浮层
              triggerOn: 'none', //提示框触发的条件(mousemove|click|none)
              //showDelay: 200,         //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove'有效。
              textStyle: {
                color: 'white',
                fontSize: 12
              },
              padding: [0, 8],
              position: function(point, params, dom, rect, size) {
                // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                // 提示框位置
                var x = 0; // x坐标位置
                var y = 0; // y坐标位置

                // 当前鼠标位置
                var pointX = point[0];
                var pointY = point[1];
                // 提示框大小
                var boxWidth = size.contentSize[0]/2;
                var boxHeight = size.contentSize[1]+50;

                // boxWidth > pointX 说明鼠标左边放不下提示框
                if (boxWidth > pointX) {
                  x = 5;
                } else { // 左边放的下
                  x = pointX - boxWidth;
                }

                // boxHeight > pointY 说明鼠标上边放不下提示框
                if (boxHeight > pointY) {
                  y = 5;
                } else { // 上边放得下
                  y = pointY - boxHeight;
                }
                return [x, y];
              },
              // hideDelay: 10,
              formatter: (o) => {
                var arr=_this.regionsData
                let _str = ``;
                for(var i in arr){
                  if(arr[i].name == o.name){
                    _str+=`<div class="echart-dialog">`
                    if (_this.isClick){
                      _str+=`<span onclick="returnArea()" class="echarts-close"></span>`
                    }
                /*    _str+=`<div class="echart-dialog-head">${arr[i].name}</div>
                        <div class="echart-dialog-item">
                          <div class="e-d-t">在线数/联网农机数</div>
                          <div class="e-d-n">
                            <span class="e-d-n1">${arr[i].inlineNum}</span>
                            <span class="e-d-n2">/${arr[i].inlineNums}</span>
                            辆
                          </div>
                        </div>
                        <div class="echart-dialog-item">
                          <div class="e-d-t">作业面积</div>
                          <div class="e-d-n">
                                <span class="e-d-n2">${arr[i].work}</span>亩
                          </div>
                        </div>
                        <div class="echart-dialog-item">
                          <div class="e-d-t">补贴金额</div>
                          <div class="e-d-n">
                                <span class="e-d-n2">${arr[i].money}</span>万元
                          </div>
                        </div>
                        </div>`*/
                    _str+=`<div class="echart-dialog-head">${arr[i].name}</div>
                        <div class="echart-item">
                          <div class="gdLeft">
                              <div class="item-left">${arr[i].totals}</div>
                              <div class="lableName">耕地面积（万亩）</div>
                          </div>
                          <div class="gdRight">
                            <div class="gdRight-item">
                                <div class="gdRight-Name">夏粮</div>
                                <div class="gdRight-item1">
                                    <div class="e-d-t">种植面积</div>
                                    <div class="e-d-n">
                                      <span class="e-d-n1">${arr[i].xZzArea}</span>万亩
                                    </div>
                                </div>
                                <div class="gdRight-item1">
                                  <div class="e-d-t">粮食产量</div>
                                  <div class="e-d-n">
                                    <span class="e-d-n1">${arr[i].xLsYield}</span>万吨
                                  </div>
                               </div>
                            </div>

                             <div class="gdRight-item">
                                <div class="gdRight-Name">秋粮</div>
                                <div class="gdRight-item1">
                                    <div class="e-d-t">种植面积</div>
                                    <div class="e-d-n">
                                      <span class="e-d-n1">${arr[i].qZzArea}</span>万亩
                                    </div>
                                </div>
                                <div class="gdRight-item1">
                                  <div class="e-d-t">粮食产量</div>
                                  <div class="e-d-n">
                                    <span class="e-d-n1">${arr[i].qLsYield}</span>万吨
                                  </div>
                               </div>
                            </div>
                          </div>

                        </div>

                        </div>`
                    return _str;
                  }
                }
              },
              extraCssText: 'box-shadow: none',
              borderWidth:'0',
              boxShadow:'none',
              backgroundColor: 'none',  //提示框浮层的背景颜色。
              alwaysShowContent: true,
              transitionDuration: 1,      //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
            },
            legend: {show: false},
            //配置属性
            series: [
              {
                name: '自定义图标',
                map: 'huangDao',
                type: "scatter",
                coordinateSystem: "geo",
                symbolSize: 0,
                silent: 'none',
                data: _this.regionsData.map(item => {
                  return {
                    name: item.name,
                    value: item.value
                  };
                })
              }
            ],
            visualMap: {show: false},
          }
          //地图组件
          echarts.registerMap("huangDao", geoJson);
          // 使用刚指定的配置项和数据显示图表。
          initEcharts.setOption(hdOption);
          // 开始轮播
          aTimer = setInterval(_this.setMapArea, 5000);

          initEcharts.on('mouseOver', function (e) {//停止轮播
            if (!_this.isClick){
              _this.mapIndex = _this.regionsData.findIndex(rec => rec.name === e.name);
              if(aTimer !== '') clearInterval(aTimer)
              aTimer = ''
              _this.regionsData[_this.tmpLunboInfo.index].itemStyle.areaColor = _this.tmpLunboInfo.color;
              _this.tmpLunboInfo.index = _this.mapIndex;
              _this.tmpLunboInfo.color = _this.regionsData[_this.mapIndex].itemStyle.areaColor;
              _this.regionsData[_this.mapIndex].itemStyle.areaColor =  _this.tmpLunboInfo1.areaColor;
              hdOption.geo[1].regions = _this.regionsData;
              initEcharts.clear()
              initEcharts.setOption(hdOption);
              initEcharts.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: _this.mapIndex
              });
              _this.mapIndex++
            }
          })
          initEcharts.on('mouseOut', function (e) {
            if (!_this.isClick){
              if (aTimer != '') clearInterval(aTimer)
              aTimer = setInterval(_this.setMapArea, 5000);
            }
          })
          initEcharts.on('click', function (e) {
            if (e.name==='海青镇' || e.name==='张家楼镇'){
              clearInterval(aTimer)
              aTimer = ''
              _this.isClick = true;
              _this.mapIndex = _this.regionsData.findIndex(rec => rec.name === e.name);
              _this.setMapArea()
              drill.$emit('changeLeftArea',e.name)
              drill.$emit('changeRightArea',e.name)
            }
          })
        })
      },
      returnArea(){
        this.isClick = false
        this.setMapArea()
        aTimer = setInterval(this.setMapArea, 5000);
        drill.$emit('changeLeftArea','')
        drill.$emit('changeRightArea','')
      },
      setMapArea() {
        var _this = this;
        _this.mapIndex = _this.mapIndex % _this.regionsData.length;
        if (_this.mapIndex === 0) {
          _this.mapIndex++
        }
        _this.regionsData[_this.tmpLunboInfo.index].itemStyle.areaColor = _this.tmpLunboInfo.color;
        _this.tmpLunboInfo.index = _this.mapIndex;
        _this.tmpLunboInfo.color = _this.regionsData[_this.mapIndex].itemStyle.areaColor;
        _this.regionsData[_this.mapIndex].itemStyle.areaColor = _this.tmpLunboInfo1.areaColor;
        hdOption.geo[1].regions = _this.regionsData;
        initEcharts.clear()
        initEcharts.setOption(hdOption);
        initEcharts.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: _this.mapIndex
        });
        _this.mapIndex++;
      }
    },
   created() {
      window.returnArea =this.returnArea
  },
    mounted() {
      if(flag == 1){
        flag = 0
        this.initChartMap()
      }

    },

  };
</script>

<style lang="scss" scoped>
  .gbznt {
    width: 100%;
    height: 100%;
  }
  .mapContainer {
    width: 50vw;
    height: 86vh;
    top: 4vh;
    left: 25vw;
    position: relative;
  }

  .gbznt::v-deep .echart-dialog {
    position: relative;
    top: 0;
    left: 0;
    padding: 13px 15px;
    width: 418px;
    height: 275px;
    background-image: url("../../img/machineryManagement/map/e-d-bg.png");
    background-size: 100% 100%;
    .echarts-close{
      position: absolute;
      right: 26px;
      top: 27px;
      width: 15px;
      height: 15px;
      background-image: url("../../img/machineryManagement/map/mao-close.png");
      background-size: 100% 100%;
      cursor: pointer;
    }
    .echart-dialog-head{
      width: 100%;
      height: 42px;
      font-size: 14px;
      line-height: 45px;
      text-align: left;
      padding-left: 10px;
     /* background-image: url("../../img/map/e-d-h-bg.png");
      background-size: 100% 100%;*/
    }
    .echart-dialog-head::after{
      content: "";
      width: 418px;
      height: 1px;
      pointer-events: none;
      user-select: none;
      background-image: url("../../img/machineryManagement/main2/line.png");
      background-size: 100% 100%;
      position: absolute;
      z-index: 5;
      left: 15px;
      top: 52px;
    }
    .echart-dialog-item{
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: left;
      padding-left: 10px;
      display: flex;
      .e-d-t{
        color: #848b9a;
        width: 120px;
        font-size: 12px;
      }
      .e-d-n{
        color: #78bafc;
        width: 80px;
        text-align: right;
        .e-d-nNum{
          font-size: 28px;
          font-family: Bahnschrift;
          color: #78bafc;
        }
        .e-d-n2{
          font-size: 14px;
        }
      }
    }
    .echart-item{
      width: 100%;
      height: calc(100% - 45px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1vh 1.2vw;
      .gdLeft{
        width: 123px;
        height: 100%;
        .item-left{
          margin-top: 1vh;
          width: 125px;
          height: 133px;
          background-image: url("../../img/planting/main1/alertBg.png");
          background-size: 100% 100%;
          font-size: 2.4vh;
          font-family: Bahnschrift;
          line-height: 133px;
          color: #ffb628;
        }
        .lableName{
          font-size: 1vh;
          color: #848b9a;
          margin-top: 1vh;
        }
      }
      .gdRight{
        width: 205px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .gdRight-item{
          width: 100%;
          height: 85px;
          background-image: url("../../img/planting/main1/dialogBg.png");
          background-size: 100% 100%;
          padding: 0 0.5vw;
          .gdRight-Name{
            text-align: left;
            margin-top: 1vh;
          }
          .gdRight-item1{
            display: flex;
            text-align: left;
            height: 2.6vh;
            line-height: 2.6vh;
            .e-d-t{
              color: #848b9a;
              width: 120px;
              font-size: 12px;
            }
            .e-d-n{
              color: #78bafc;
              width: 80px;
              text-align: right;
              .e-d-n1{
                font-size: 20px;
                color: #79d8ff;
                font-family: Bahnschrift;
              }

            }
          }

        }
      }

    }
  }
</style>

 

是可爱的大福呀~
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+echart的封装
08-15
vue+echart的封装，包括宽度自适应等问题的解决
中国地图 vue+echart5.x
06-15
中国地图 vue+echart5.x
vue项目echarts绘制地图，实现点击地图弹窗效果（内附各个省json文件）
恒二哥的博客
11-18 3362
业务需求：点击地图上的某个市，显示市区的对应的数据信息，运用Echart插件绑定事件。注意：环境配置，需要配置node环境，安装所所依赖的包，然后运行。1、全局引入Echart插件。
echarts tooltip绑定点击事件并弹出弹框
yyXieDaiMa的博客
11-18 1万+
1.问题描述 实现如图效果，当鼠标悬浮/点击小脚位置时，弹出tooltip框，并且鼠标点击查看更多按钮弹出弹框。 2. 实现步骤 2.1问题汇总 样式不生效（提示框设置样式必须为全局样式） 按钮点击无响应（按钮样式增加 pointer-events:auto） 按钮点击方法不执行（需增加全局作用域的样式， tooltip无法使用vue组件的方法， 必须定义windows全局上） tooltip字段主要配置如下 tooltip: { // 鼠标是否可以进入悬浮.
Echarts 点击地图区域弹出框
smallMirror_的博客
10-27 2万+
点击地图里面的区域，弹出信息html 准备两个容器，一个装地图，一个装弹出框<!-- 地图 --> <div id="map" style="height: 600px;width: 600px;"></div> <!-- 弹出框 --> <div id="box" > <span id="box-title"></span>
echarts全国地图点击弹窗（Vue）
Ethan's Blog
11-02 5122
实现echart 全国地图点击标记有弹窗
在Vue中使用echarts弹窗
KangMino的博客
02-19 3405
前言： 需要做的效果是，点击一个事件，弹出弹窗，弹窗中显示柱状图。 问题： 我的做法是在index.vue文件中写点击事件，然后调用子组件./components/ProgressDialog.vue，并且在ProgressDialog中渲染echart。结果发现打开弹窗，图表效果并没有加载出来。 原因： 点击事件一触发，就会更改弹窗的visible状态为true，而此时弹窗里的内容还没有渲染到dom。 解决方法： 将echart内容写在一个子组件中，在ProgressDialog中调用，发现
vue结合echarts-点击echarts图表内容，在图表上面出现一个弹框，
u010022260的博客
09-24 4072
最后有一个效果，就是在vue项目中使用echarts图表，点击图表的时候，弹一个框，在点击图表其它部分，弹框消失，并且，弹框要显示在图表范围内，不可超出图表区域。 看一下效果图 上代码： <style> #gxid { height: 100%; width: 100%; border: 1px solid #efefef; } .con_box{ position: relative; height: 600px; width: 900px; margin:
vue echarts 3D地图+省+弹窗
coldriversnow的专栏
06-15 2917
先看效果图 首先下载echarts 插件，3d地图需要依赖echarts-gl npm install echarts --save npm install echarts-gl --save
echarts地图设置elment弹出框
m0_53164768的博客
06-20 1279
echarts地图设置elment弹出框
基于vue+echart实现疫情地图（源码+项目说明）.zip
03-15
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料...基于vue+echart实现疫情地图（源码+项目说明）.zip
vue + Echart + Cesium 绘制剖面分析图源码
03-15
vue + Echart + Cesium 绘制剖面分析图源码
echart-bmap：vue + echart + bmap结合演示
02-12
echart-bmap项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。 echarts与bmap结合使用，同时使用了bmap的集群标记和echarts中的...
Echarts 地图+散点图结合 +闪点+轮播
热门推荐
ahhmdwg的专栏
12-18 2万+
Echarts 地图+散点图结合 +闪点+轮播 1.jsp： &amp;lt;%-- Created by IntelliJ IDEA. User: lenovo Date: 2018/12/11 Time: 19:12 To change this template use File | Settings | File Templates. --%&amp;gt; &amp;lt;%@ page ...
ECharts中国地图 悬浮提示 点击铁路弹出layui弹框提示
qq_41154522的博客
08-04 4117
所有数据展示都为静态数据 <div class="map" id="chinaMap"></div> <style> <!--宽度自定义，这里为计算比例所得 有兴趣可以学习calc()--> .map{ width:calc(100% - 20%); height:100%; } </style> var init_chinaMap = function(path){ var geoCoordMap=null; var mapOptio.
echarts点击图形显示弹窗(自定义弹窗样式)
ydZ157的博客
11-16 1万+
echarts点击图形板块区域，弹出自定义弹窗
echarts 伪3D地图设置标记点，点击弹出窗口示例并同步缩放移动
weixin_46408500的博客
01-05 1739
【代码】echarts 伪3D地图设置标记点，点击弹出窗口示例并同步缩放移动。
vue实现 【echarts中graph关系图图例】，制作一个知识点的关系图表，其中包含 “点击节点” 和 “提示弹窗按钮点击事件” 实现【页面跳转】
weixin_50450473的博客
11-09 7451
1、安装echarts npm install echarts --save 2、在需要的页面引入 import * as echarts from "echarts" KnowChart.vue <template> <div> <div id="atlasChart"></div> </div> </template> <script> import * as echarts f...
vue3中的reactive和ref
最新发布
weixin_43784341的博客
05-08 554
在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。
vue+echart生产任务看板
09-07
Vue是一种流行的JavaScript框架，用于构建用户界面。ECharts是一种用于创建交互性和可视化图表的图表库。在生产环境中，可以使用Vue和ECharts来创建一个生产任务看板。 首先，我们可以使用Vue框架来构建用户界面。通过Vue的组件化架构，我们可以将任务看板拆分为多个可重用的组件，例如任务列表、进度条、功能按钮等。这样可以使代码更可维护和可扩展。同时，Vue提供了响应式的数据绑定机制，可以实时更新任务看板的数据，并与后端进行数据交互。 然后，我们可以使用ECharts图表库来创建可视化图表，以展示任务看板上的数据。例如，可以使用饼图来显示任务的进度分布，柱状图来展示各个任务的完成情况，折线图来展示任务的趋势等。ECharts提供了丰富的图表类型和交互功能，可以根据实际需求进行灵活配置。 在整个过程中，我们可以利用Vue的生命周期钩子函数来实现数据的获取、更新和渲染。当用户发起操作时，可以通过Vue的事件机制来触发相应的业务逻辑。例如，当用户点击任务列表中的某个任务时，可以发送请求获取该任务的详细信息，并在界面上展示出来。 最后，为了提高用户体验，我们可以将任务看板进行排版和样式的优化，使其在不同设备和浏览器上都能良好展示。同时，可以增加一些交互功能，例如拖拽任务、快速搜索任务等，以提高用户的生产效率。 总结而言，通过使用Vue和ECharts，我们可以实现一个功能齐全、交互性强的生产任务看板。它可以直观展示任务的状态和进度，并提供方便的操作和管理功能，帮助用户更好地进行生产任务的监控和调度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值