地图轮播和下钻

已于 2024-01-16 09:38:24 修改
阅读量383 收藏 7
点赞数 9
分类专栏： echarts 文章标签： 前端 javascript vue.js
于 2024-01-05 14:53:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiuxialala/article/details/135408705
版权

一、地图下钻

1.效果

地图下钻和返回

2.关键代码

  watch: {
    "hnybRegion.countRegionName": {
      handler() {
        this.renderCharts();
      },
      deep: true,
    },
    
  },
  methods: {
    // 向上返回
    backMain() {},
    // 向下钻
    goIntoMap(item) {
      if (this.provinces.hasOwnProperty(item.name)) {
        let obj = {
          countRegionName: item.name,
          countRegionCode: CodeObjMap[item.name],
        };
        this.$store.commit("changeHnybRegion", obj);
      }
    },
  }

二、地图轮播

1.效果

地图轮播

2.关键代码

注意：地图下钻返回切换的时候要清除定时器，鼠标划入也要清除，页面销毁也要清除。


    initHunanMap(mapData, mapName, visualMapVal) {
      this.mapCharts = this.$echarts.getInstanceByDom(this.$refs.mapCharts);
      if (this.mapCharts == null) {
        this.mapCharts = this.$echarts.init(this.$refs.mapCharts);
      }
      this.$echarts.registerMap(mapName, this.provinces[mapName]);
      let option = this.getMapEchartsOption(
        mapName,
        mapData,
        formatterFunc,
        visualMap
      );
      this.mapCharts.hideLoading();
      this.mapCharts.off('click') //图表渲染前销毁点击事件
      this.mapCharts.on("click", (params) => {
        this.goIntoMap(params);
      }); // 点击
      this.mapCharts.setOption(option);

      this.aniarrayArrays=mapData;
      this.mapSwiper(mapData);
    },
    mapSwiper(mapData){
        if(this.mapEchartsEmpty||this.mapEchartsError){
            this.clearTooltip();
            this.mapCharts.dispatchAction({
                type:'hideTip'
            })
        }else{
          this.faultByHourIndex=0;
          this.setAnimation();
          this.mouseAnimation();
        }
    },
    setAnimation(){
      if(this.faultByHourTime!=''){
        clearInterval(this.faultByHourTime);
        this.faultByHourTime='';
      }
      this.faultByHourTime = setInterval(()=>{
        // 清除之前的高亮
        if(this.faultByHourIndex){//不为0
          this.mapCharts.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: this.faultByHourIndex-1
          });
        }else{//为0
          this.mapCharts.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: this.aniarrayArrays.length-1
          });
        }
         // 当前下标高亮
        this.mapCharts.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: this.faultByHourIndex
        });
        // 当前下标浮窗
        this.mapCharts.dispatchAction({
          type:"showTip",
          seriesIndex:0,
          dataIndex:this.faultByHourIndex,
        });
        this.faultByHourIndex++;
        if(this.faultByHourIndex>=this.aniarrayArrays.length){
          this.faultByHourIndex = 0
        }
      },6000)
    },
    clearTooltip(){// 停止定时器，清除之前的高亮
      if(this.faultByHourTime){
        clearInterval(this.faultByHourTime);
        this.faultByHourTime = '';
      }
      if(this.faultByHourIndex){//不为0
        this.mapCharts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.faultByHourIndex-1
        });
      }else{//为0
        this.mapCharts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.aniarrayArrays.length
        });
      }
      this.faultByHourIndex = 0;
    },
    mouseAnimation() {
      // 鼠标划入
			this.mapCharts.on('mouseover', () => {
				this.clearTooltip();
			});
			// 鼠标划出重新定时器开始
			this.mapCharts.on('mouseout', () => {
        this.setAnimation();
			});
    },

公共部分：字典：largeScreenDict.js

export const RegionCodeOption = [
  { value: "430000", name: "湖南省" },
  { value: "430100", name: "长沙市" },
  { value: "430200", name: "株洲市" },
  { value: "430300", name: "湘潭市" },
  { value: "430400", name: "衡阳市" },
  { value: "430500", name: "邵阳市" },
  { value: "430600", name: "岳阳市" },
  { value: "430700", name: "常德市" },
  { value: "430800", name: "张家界市" },
  { value: "430900", name: "益阳市" },
  { value: "431000", name: "郴州市" },
  { value: "431100", name: "永州市" },
  { value: "431200", name: "怀化市" },
  { value: "431300", name: "娄底市" },
  { value: "433100", name: "湘西土家族苗族自治州" },
]
export const RegionObjMap = {
  "430000": "湖南省",
  "430100": "长沙市",
  "430200": "株洲市",
  "430300": "湘潭市",
  "430400": "衡阳市",
  "430500": "邵阳市",
  "430600": "岳阳市",
  "430700": "常德市",
  "430800": "张家界市",
  "430900": "益阳市",
  "431000": "郴州市",
  "431100": "永州市",
  "431200": "怀化市",
  "431300": "娄底市",
  "433100": "湘西土家族苗族自治州",
}
export const CodeObjMap = {
  "湖南省": "430000",
  "长沙市": "430100",
  "株洲市": "430200",
  "湘潭市": "430300",
  "衡阳市": "430400",
  "邵阳市": "430500",
  "岳阳市": "430600",
  "常德市": "430700",
  "张家界市": "430800",
  "益阳市": "430900",
  "郴州市": "431000",
  "永州市": "431100",
  "怀化市": "431200",
  "娄底市": "431300",
  "湘西土家族苗族自治州": "433100",
}
export const ProvincesMap = {
  湖南省: require("../json/hunan.json"),
  长沙市: require("../json/changsha.json"),
  株洲市: require("../json/zhuzhou.json"),
  湘潭市: require("../json/xiangtang.json"),
  常德市: require("../json/changde.json"),
  郴州市: require("../json/chengzhou.json"),
  衡阳市: require("../json/hengyang.json"),
  怀化市: require("../json/huaihua.json"),
  娄底市: require("../json/loudi.json"),
  邵阳市: require("../json/shaoyang.json"),
  益阳市: require("../json/yiyang.json"),
  永州市: require("../json/yongzhou.json"),
  岳阳市: require("../json/yueyang.json"),
  张家界市: require("../json/zhangjiajie.json"),
  湘西土家族苗族自治州: require("../json/xiangxi.json"),
}

公共部分：echartsOptions.js 可复用的echarts option.供各个大屏引用。

import { outMonthFormat } from "@/utils/util";
//地图
export function getMapEchartsOption(mapName, mapData, formatterFunc, visualMap) {
  let option = {
    tooltip: {
      trigger: 'item',
      triggerOn: "mousemove",
      backgroundColor: "transparent",
      extraCssText: 'box-shadow: none;z-index:9',
      borderWidth: 0,
      padding: 0,
      // confine: true,
      formatter: formatterFunc,
      // position:'bottom'
      position: function (point, params, dom, rect, size) {
        var x = 0; // x坐标位置
        var y = 0; // y坐标位置

        // 当前鼠标位置
        var pointX = point[0];
        var pointY = point[1];

        // 外层div大小
        var viewWidth = size.viewSize[0];
        var viewHeight = size.viewSize[1];

        // 提示框大小
        var boxWidth = size.contentSize[0];
        var boxHeight = size.contentSize[1];

        // console.log("-----",pointX,pointY, viewWidth, viewHeight, boxWidth, boxHeight)
        if (pointY < boxHeight) {//--------------------超出上面了
          if (pointY + boxHeight < viewHeight) {//下面放得下
            return [point[0] - 20, point[1] - 20];
          } else {下面放不下
            return [pointX, 0];
          }
        } else if (pointY + boxHeight > viewHeight) {//-------------------超出下面了
          return [pointX, viewHeight - boxHeight + 20];
        }
        return [point[0] - 20, point[1] - 20];
      }
    },
    toolbox: {
      show: false,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {},
      },
    },
    visualMap: {
      show: false,
      min: visualMap['min'],
      max: visualMap['max'],
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      inRange: {
        color: visualMap['color'],
      },
    },
    series: [
      {
        type: "map",
        map: mapName,
        data: mapData,
        zoom: 1.2,
        label: {
          show: true,
          color: "rgba(255, 255, 255, 1)",
          fontSize: 10,
        },
        itemStyle: {
          borderWidth: 1, //边际线大小
          borderColor: "#1290FA", //边界线颜色
          areaColor: "#17399F ", //默认区域颜色
        },
        emphasis: {
          label: {
            color: "#fff",
          },
          itemStyle: {
            areaColor: "#35e2ff",
          }
        },
        selectedMode: false,
        // select: {// 地图选中区域样式
        //   label: {
        //     color: "rgba(255, 255, 255, 1)",// 选中区域的label(文字)样式
        //   },
        //   itemStyle: {
        //     areaColor: "#17399F",// 选中区域的默认样式
        //   },
        // },
      },
    ],
    // graphic: {
    //   type: 'text',
    //   left: 'center',
    //   top: '40%',
    //   silent: true,
    //   invisible: mapData.length,
    //   style: {
    //     fill: 'rgba(255, 255, 255, 0.5)',
    //     fontWeight: 'bold',
    //     text: '暂无数据',
    //     fontSize: '16px',
    //   }
    // }
  };
  return option;
}
//倒置柱状图
export function getColumnBarEchartsOption(xData, yData, columnBarColor, unit) {
  let option = {
    tooltip: {
      trigger: "axis",
      extraCssText: "max-width:200px;white-space: normal; word-break: break-all;",
      confine: true,
      axisPointer: {
        type: "shadow",
      },
      formatter: "{b}:{c}" + unit,
    },
    legend: {},
    grid: {
      top: "5%",
      left: "1%",
      right: "10%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      show: xData.length,
      type: "value",
      name: unit,
      nameGap: 4,
      nameTextStyle: { color: "rgba(255, 255, 255, 0.5)", padding: [0, 0, 0, 0] },
      splitLine: { show: false },//修改背景线条样式
      axisLine: { show: false, },
      axisTick: { show: false, },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)',
        }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.5)',  //更改坐标轴文字颜色
        fontSize: 12      //更改坐标轴文字大小
      },
    },
    yAxis: {
      show: xData.length,
      type: "category",
      inverse: true,
      data: xData,
      splitLine: { show: false },
      axisTick: { show: false, },
      axisLabel: {
        margin: 8,
        color: 'rgba(255, 255, 255, 0.5)',  //更改坐标轴文字颜色
        fontSize: 12,     //更改坐标轴文字大小
        formatter: function (params) {
          var val = "";
          if (params.length > 4) {
            val = params.substr(0, 3) + "...";
            return val;
          } else {
            return params;
          }
        },
      },
    },
    series: [
      {
        type: "bar",
        data: yData,
        barWidth: 14,
        itemStyle: {
          borderRadius: 7,
          color: columnBarColor
        },
        label: {
          show: true,
          position: 'right',
          color: 'rgba(255, 255, 255, 0.5)',
        },
      },
    ],
    // graphic: {
    //   type: 'text',
    //   left: 'center',
    //   top: 'middle',
    //   silent: true,
    //   invisible: yData.length,
    //   style: {
    //     fill: 'rgba(255, 255, 255, 0.5)',
    //     fontWeight: 'bold',
    //     text: '暂无数据',
    //     fontSize: '14px'
    //   }
    // }
  };
  return option;
}
//横置柱状图
export function getRowBarEchartsOption(xData, yData, columnBarColor, xUnit, yUnit) {
  let option = {
    tooltip: {
      trigger: "axis",
      confine: true,
      axisPointer: {
        type: "shadow",
      },
      formatter: "{b} : {c}" + yUnit,
    },
    legend: {},
    grid: {
      top: "16%",
      left: "2%",
      right: "5%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      // show:xData.length,
      type: "category",
      name: xUnit,
      nameGap: 4,
      nameTextStyle: { color: "rgba(255, 255, 255, 0.5)", padding: [0, 0, 0, 0] },
      data: xData,
      splitLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        interval: 0,
        fontSize: 10,
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    yAxis: {
      // show:xData.length,
      type: "value",
      name: yUnit,
      nameGap: 4,
      nameTextStyle: { color: "rgba(255, 255, 255, 0.5)", padding: [0, 0, 8, -30] },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)',
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisTick: { show: false, },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.5)',  //更改坐标轴文字颜色
        fontSize: 12      //更改坐标轴文字大小
      },
    },
    series: [
      {
        type: "bar",
        data: yData,
        barWidth: 14,
        itemStyle: {
          borderRadius: 7,
          color: columnBarColor,
        },
        label: {
          show: true,
          position: 'top',
          color: 'rgba(255, 255, 255, 0.5)',
        },
      },
    ],
    // graphic: {
    //   type: 'text',
    //   left: 'center',
    //   top: 'middle',
    //   silent: true,
    //   invisible: yData.length,
    //   style: {
    //     fill: 'rgba(255, 255, 255, 0.5)',
    //     fontWeight: 'bold',
    //     text: '暂无数据',
    //     fontSize: '14px'
    //   }
    // }
  };
  return option;
}
//横置两个柱子柱状图
export function getRowTwoBarEchartsOption(xData, series1, series2, columnBar1Color, columnBar2Color, xUnit, yUnit) {
  let option = {
    tooltip: {
      trigger: "axis",
      confine: true,
      axisPointer: {
        type: "shadow",
      },
      // formatter: "{b} : {c}"+yUnit,
    },
    legend: {
      x: "center",
      y: "top",
      textStyle: {
        color: "rgba(255, 255, 255, 0.5)",
      },
    },
    grid: {
      top: "20%",
      left: "2%",
      right: "5%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      // show:xData.length,
      type: "category",
      name: xUnit,
      nameGap: 4,
      nameTextStyle: { color: "rgba(255, 255, 255, 0.5)", padding: [0, 0, 0, 0] },
      data: xData,
      splitLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        interval: 0,
        fontSize: 10,
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    yAxis: {
      // show:xData.length,
      type: "value",
      name: yUnit,
      nameGap: 4,
      nameTextStyle: { color: "rgba(255, 255, 255, 0.5)", padding: [0, 0, 8, -30] },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)',
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisTick: { show: false, },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.5)',  //更改坐标轴文字颜色
        fontSize: 12      //更改坐标轴文字大小
      },
    },
    series: [
      {
        type: "bar",
        data: series1,
        name: '有效',
        barWidth: 14,
        itemStyle: {
          borderRadius: 7,
          color: '#008dff',
        },
        label: {
          show: true,
          position: 'top',
          color: 'rgba(255, 255, 255, 0.5)',
        },
      },
      {
        type: "bar",
        data: series2,
        name: '无效',
        barWidth: 14,
        itemStyle: {
          borderRadius: 7,
          color: columnBar2Color,
        },
        label: {
          show: true,
          position: 'top',
          color: 'rgba(255, 255, 255, 0.5)',
        },
      },
    ],
    // graphic: {
    //   type: 'text',
    //   left: 'center',
    //   top: 'middle',
    //   silent: true,
    //   invisible: yData.length,
    //   style: {
    //     fill: 'rgba(255, 255, 255, 0.5)',
    //     fontWeight: 'bold',
    //     text: '暂无数据',
    //     fontSize: '14px'
    //   }
    // }
  };
  return option;
}
//饼图
export function getPieEchartsOption(data, title, subTitle, subColor) {
  let options = {
    tooltip: {
      trigger: "item",
      confine: true,
      formatter: "{b} : {c} ({d}%)",
    },
    legend: {
      show: !!data.length,
      x: "right",
      y: "center",
      orient: "verical",
      textStyle: {
        color: "rgba(255, 255, 255, 0.5)",
      },
    },
    grid: {
      top: "1%",
      left: "1%",
      right: "1%",
      bottom: "0%",
      containLabel: false,
    },
    title: {
      show: !!data.length,
      text: title,
      subtext: subTitle,
      itemGap: 4,
      left: '38%',
      top: '40%',
      textStyle: {
        color: "rgba(255, 255, 255, 0.5)",
        fontSize: 12,
        fontWeight: 'bold',
      },
      subtextStyle: {
        color: subColor,
        fontSize: 12,
        fontWeight: 'bold',
      },
      textAlign: 'center'
    },
    series: [
      {
        type: "pie",
        radius: !!data.length ? ["50%", "70%"] : ["0%", "0%"],
        center: ["40%", "50%"], // 中心位置。默认都是50%
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
    // graphic: {
    //   type: 'text',
    //   left: 'center',
    //   top: 'middle',
    //   silent: true,
    //   invisible: data.length,
    //   style: {
    //     fill: 'rgba(255, 255, 255, 0.5)',
    //     fontWeight: 'bold',
    //     text: '暂无数据',
    //     fontSize: '14px'
    //   }
    // }
  };
  return options;
}
//折线图阴影图
export function getShadowLineEchartsOption(xData, yData, xAxisLabel) {
  xData = outMonthFormat(xData);
  let options = {
    tooltip: {
      trigger: "axis",
      confine: true,
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: "shadow"        // 默认为直线，可选为："line" | "shadow"
      }
    },
    grid: {
      top: "12%",
      left: "1%",
      right: "5%",
      bottom: "1%",
      containLabel: true
    },
    xAxis: {
      // show:!!xData.length,
      type: 'category',
      data: xData,
      // name: unit,// 这个设置只在末尾添加单位
      // boundaryGap: true,
      // nameLocation: 'end',
      // nameTextStyle: {
      //   padding: [0, 0, 0, 0]    // 四个数字分别为上右下左与原位置距离
      // },
      // nameGap: 4,
      axisLabel: {
        formatter: "{value}" + xAxisLabel,
      },
      axisLine: {       //x轴刻度线
        "show": true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisTick: { "show": false },
    },
    yAxis: {
      // show:!!xData.length,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.5)',
        }
      },
      axisLine: {       //y轴刻度线
        "show": true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisTick: {       //y轴刻度线
        "show": false
      },
    },
    series: [
      {
        data: yData,
        type: 'line',
        lineStyle: {
          color: '#1290FA',
          width: 1
        },
        itemStyle: {
          color: 'rgba(255, 255, 255, 0.5)',
          borderColor: '#1290FA',
          borderWidth: 1
        },
        areaStyle: {
          color: {
            type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#1290fa' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(127, 87, 39, 0)' // 
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    ],
    // graphic: {
    //     type: 'text',
    //     left: 'center',
    //     top: 'middle',
    //     silent: true,
    //     invisible: yData.length,
    //     style: {
    //         fill: 'rgba(255, 255, 255, 0.5)',
    //         fontWeight: 'bold',
    //         text: '暂无数据',
    //         fontSize: '14px'
    //     }
    // }
  };
  return options;
}
//单折线图图
export function getOneLineEchartsOption(xData, yData, xAxisLabel) {
  xData = outMonthFormat(xData);
  let options = {
    tooltip: {
      trigger: 'axis',
      confine: true,
      // formatter: function (params) {
      //   let showHtml = params[0].axisValue + '月'
      //     + "<br/>" + params[0].seriesName + "：" + params[0].data
      //     + "<br/>" + params[1].seriesName + "：" + params[1].data;
      //   return showHtml;
      // }
    },
    grid: {
      top: "15%",
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      // show:!!xData.length,
      type: 'category',
      data: xData,
      // name: unit,// 这个设置只在末尾添加单位
      // boundaryGap: true,
      // nameLocation: 'end',
      // nameTextStyle: {
      //   padding: [0, 0, 0, 0]    // 四个数字分别为上右下左与原位置距离
      // },
      // nameGap: 4,
      axisLabel: {
        formatter: "{value}" + xAxisLabel,
      },
      axisLine: {       //x轴刻度线
        "show": true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisTick: { "show": false },
    },
    yAxis: {
      // show:!!xData.length,
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.5)',
        }
      },
      axisLine: {       //y轴刻度线
        "show": true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisTick: {       //y轴刻度线
        "show": false
      },
    },
    series: [
      {
        // name: 
        type: 'line',
        data: yData,
        itemStyle: {
          color: '#FDAD4D'
        }
      },
    ],
    // graphic: {
    //     type: 'text',
    //     left: 'center',
    //     top: 'middle',
    //     silent: true,
    //     invisible: xData.length,
    //     style: {
    //         fill: 'rgba(255, 255, 255, 0.5)',
    //         fontWeight: 'bold',
    //         text: '暂无数据',
    //         fontSize: '14px'
    //     }
    // }
  };
  return options;
}
//双折线图图
export function getTwoLineEchartsOption(xData, yData1, yData2, legendArr, unit) {
  xData = outMonthFormat(xData);
  let options = {
    tooltip: {
      trigger: 'axis',
      confine: true,
      // formatter: function (params) {
      //   let showHtml = params[0].axisValue + '月'
      //     + "<br/>" + params[0].seriesName + "：" + params[0].data
      //     + "<br/>" + params[1].seriesName + "：" + params[1].data;
      //   return showHtml;
      // }
    },
    legend: {
      // show:!!xData.length,
      data: legendArr,
      textStyle: {
        color: 'rgba(255, 255, 255, 0.5)'
      }
    },
    grid: {
      top: "15%",
      left: '3%',
      right: '12%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      // show:!!xData.length,
      type: 'category',
      data: xData,
      name: unit,// 这个设置只在末尾添加单位
      boundaryGap: true,
      nameLocation: 'end',
      nameTextStyle: {
        padding: [0, 0, 0, 0]    // 四个数字分别为上右下左与原位置距离
      },
      nameGap: 4,
      axisLine: {       //x轴刻度线
        "show": true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisTick: { "show": false },
    },
    yAxis: {
      // show:!!xData.length,
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.5)',
        }
      },
      axisLine: {       //y轴刻度线
        "show": true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisTick: {       //y轴刻度线
        "show": false
      },
    },
    series: [
      {
        name: legendArr[0],
        type: 'line',
        data: yData1,
        itemStyle: {
          color: '#19BE6B'
        }
      },
      {
        name: legendArr[1],
        type: 'line',
        data: yData2,
        itemStyle: {
          color: '#FDAD4D'
        }
      },
    ],
    // graphic: {
    //     type: 'text',
    //     left: 'center',
    //     top: 'middle',
    //     silent: true,
    //     invisible: xData.length,
    //     style: {
    //         fill: 'rgba(255, 255, 255, 0.5)',
    //         fontWeight: 'bold',
    //         text: '暂无数据',
    //         fontSize: '14px'
    //     }
    // }
  };
  return options;
}
export function getPiePerEchartsOption(color, title,data,  subTitle, subColor){
  let options = {
    animation: true, //控制动画示否开启
    animationDuration: 6000,
    animationEasing: "bounceOut", //缓动动画
    animationThreshold: 8, //动画元素的阈值
    title: {
      text: title,
      left: 'center',
      top: 'bottom',
      textStyle:{
        color:'#fff',
        fontSize: 12,
        fontWeight:'normal'
      }
    },
    graphic: [
      {
        //环形图中间添加文字
        type: "text", //通过不同top值可以设置上下显示
        left: "center",
        top: "36%",
        style: {
          text: '60%',
          textAlign: "center",
          fill: "#fff", //文字的颜色
          fontSize: 14,
          lineHeight: 20,
        },
      },
    ],
    visualMap: {
      show: false,
    },
    grid:{
      bottom:'5%',
      containLabel:true
    },
    series: [
      {
        type: 'pie',
        //环形显示饼状图，实际上显示的是50-80之间的部分
        //上限不建议设置为100，echarts自带动画效果，设置为100动画效果很丑
        radius: ['55%', '65%'],
        center: ['50%', '43%'],
        data: [   
        //itemSyle是单项的背景颜色设置。
          { value: 60, itemStyle: { color:  color} },
          { value: 40, itemStyle: { color: '#0a233d' } },
        ],
        label: {
          //将视觉引导图关闭
          show: false,
        },
        itemStyle:{
          //设置的是每项之间的留白
          // borderWidth:7,
          // borderColor:'#fff'
        },
        // 初始化echarts的动画效果
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200;
        }
      }
    ]
  }
  
  return options;
  
}

//医保职工环形图
export function chartsZGOption(data, title, subTitle, subColor) {
    let options = {
        tooltip: {
            trigger: "item",
            confine: true,
            formatter: "{b} : {c} ({d}%)",
        },
        legend: {
            show: false,
            x: "center",
            y: "center",
            orient: "verical",
            textStyle: {
                color: "rgba(255, 255, 255, 0.5)",
            },
        },
        grid: {
            top: "0%",
            left: "2%",
            right: "1%",
            bottom: "0%",
            containLabel: true,
        },
        title: {
            show: !!data.length,
            text: title,
            subtext: subTitle,
            itemGap: 4,
            left: '46%',
            top: '40%',
            textStyle: {
                color: "rgba(255, 255, 255, 1)",
                fontSize: 12,
                fontWeight: 'bold',
            },
            subtextStyle: {
                color: subColor,
                fontSize: 12,
                fontWeight: 'bold',
            },
            textAlign: 'center'
        },
        series: [
            {
                type: "pie",
                radius: !!data.length ? ["50%", "70%"] : ["0%", "0%"],
                center: ["50%", "50%"], // 中心位置。默认都是50%
                avoidLabelOverlap: false,
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
                data: data,
            },
        ],
        // graphic: {
        //   type: 'text',
        //   left: 'center',
        //   top: 'middle',
        //   silent: true,
        //   invisible: data.length,
        //   style: {
        //     fill: 'rgba(255, 255, 255, 0.5)',
        //     fontWeight: 'bold',
        //     text: '暂无数据',
        //     fontSize: '14px'
        //   }
        // }
        };
    return options;
}

补充：完整map.vue代码

<template>
  <div class="card_item map" style="position:relative">
    <div class="card_echarts" style="width:100%;height:100%;position:relative;">
      <div ref="mapCharts" id="mapCharts" style="width:100%;height:100%;margin:0 auto;box-sizing: border-box;"></div>
      <Loading v-show="mapEchartsLoading" class="backgroundContain"></Loading>
      <div v-show="mapEchartsEmpty" class="requestEmpty">
        <div class="requestEmptyText">当前数据为零</div>
      </div>
      <div v-show="mapEchartsError" class="requestError">
        <i class="el-icon-warning-outline"></i>
        <div class="text">加载失败</div>
      </div>
    </div>
    <div class="head_list">
      <div class="list_text">
        <div class="list_tit"><span>{{ levelTit }}</span>本级业务经办量</div>
        <div class="list_num">
            <count-to :startVal="startVal" :endVal="endVal" :duration="numRollTime"></count-to><span class="unit">件</span>
        </div>
      </div>
    </div>
    <mapColor class="mapColor" :mapColorTitle="mapColorTitle" :mapDataFlag="mapDataFlag" />
  </div>
</template>
  
<script>
import Loading from "@/components/LargeScreen/loading";
import mapColor from "@/components/hnybInfoMonitorPlat/mapColor/index.vue";
import {getRightCenterMapData} from "@/services/hnybInfoMonitorPlat";
import {
  RegionCodeOption,
  RegionObjMap,
  CodeObjMap,
  ProvincesMap,
} from "@/utils/largeScreenDict";
export default {
  name: "centerMap",
  props:['getNumber'],
  components: { Loading, mapColor },
  data() {
    return {
      mapCharts: null,

      mapEchartsEmpty: false,
      mapEchartsError: false,

      mapEchartsLoading: false,
      regionCodeOption: RegionCodeOption,
      provinces: ProvincesMap,

      mapColorTitle: "当日业务经办总量",
      mapDataFlag: true,
      
      timer:null,

      faultByHourTime:'',
      faultByHourIndex:0,
      aniarrayArrays:[],

      mapData:null,

        //省本级业务经办量
        startVal:0,             
        endVal:0,             
        numRollTime:2000,           
        levelTit:'省',
        timer1:null
    
    };
  },
  beforeDestroy() {
    window.removeEventListener("resize", () => {
      this.resizeCharts();
    });

    if(this.timer){
      clearInterval(this.timer)
    }
    if(this.timer1){
    clearInterval(this.timer1)
    }
  },
  destroyed() {
    this.clearTooltip();
    this.mapCharts.off('mouseover');
    this.mapCharts.off('mouseout');
  },
  activated(){
    // this.renderCharts();
    this.mapCharts && this.resizeCharts();
  },
  deactivated(){
    // this.clearTooltip();
    // this.mapCharts.off('mouseover');
    // this.mapCharts.off('mouseout');
  },
  mounted() {
    this.renderCharts();

    window.addEventListener("resize", () => {
      this.resizeCharts();
    });

    this.timer = setInterval(()=>{
      this.renderCharts();
    },15*60*1000)
  },
  computed: {
    hnybRegion() {
      return this.$store.state.hnybRegion;
    },
  },
  watch: {
    getNumber:{
        handler(val) {
            if(this.timer1){
                clearInterval(this.timer1)
            }
            this.startVal = Number(this.getNumber.oldData);
            this.endVal = Number(this.getNumber.oldData);
            let data = parseInt(this.getNumber.newData - this.getNumber.oldData)
            this.getNum(data,this.endVal,'startVal','endVal');
        },
        deep:true
    },
    "hnybRegion.countRegionName": {
      handler() {
        let codeName = this.hnybRegion.countRegionName;
        this.levelTit = codeName.indexOf("省") !== -1 ? '省' : '市';
        this.renderCharts();
      },
      deep: true,
    },
    
  },
  methods: {
    //获取随机数整数
    getNum(sectionData,startVal,startProp,endProp){
        //随机5000内的数字 相加等于 5000
        var arr  = new Array(300).fill(0)
        for(var i=0;i<sectionData;i++){
            var num = parseInt(Math.random()*300)
            // var num = Number((Math.random()*10).toFixed(2))
            arr[num] ++
        }
        // console.log(arr)
        //从startVal开始 数组中每前2项相加 获得的 新数组
        let sum = startVal;
        let obj=[];
        for (let j = 0; j < arr.length; j++) {
            sum += arr[j];
            obj.push(sum)
        }
        // console.log(obj)
        //拆成奇数 跟 偶数 下标
        let oddArr = []; // 存放奇数下标元素的数组
        let evenArr = []; // 存放偶数下标元素的数组
        for (let k = 0; k < obj.length; k++) {
            if (k % 2 === 0) {
                evenArr.push(obj[k]);
            } else {
                oddArr.push(obj[k]);
            }
        }
        // console.log('奇', oddArr,'偶', evenArr)
        let countNum=0
        this.timer1 =setInterval((startProp,endProp)=>{
            if(countNum >= 150){
                clearInterval(this.timer1)
            }else{
                this[startProp] = evenArr[countNum];
                this[endProp] =  oddArr[countNum];
                countNum++;
            }
        },4000,startProp,endProp); 
        
    },
    resizeCharts() {
      this.mapCharts.resize();
    },
    renderCharts() {
      this.renderInitCharts();

      this.getMapChartData();
    },
    renderInitCharts() {
      this.mapEchartsEmpty = false;
      this.mapEchartsError = false;
      this.mapEchartsLoading = true;

      if(this.mapCharts){
        this.clearTooltip();
        this.mapCharts.off('mouseover');
        this.mapCharts.off('mouseout');
        this.mapCharts.dispatchAction({
            type:'hideTip'
        })
      }
    },
    getMapChartData() {
      getRightCenterMapData(this.hnybRegion.countRegionCode).then((res) => {
        if (res.code == 200) {
          if(!!res.data && res.data.length>0){
            this.handleMapChartData(res.data)
          }
        }else{
          // this.mapEchartsEmpty=true;
          this.initHunanMap([], this.hnybRegion.countRegionName);
        }
        this.mapEchartsLoading=false;
      }).catch(()=>{
        this.mapEchartsLoading=false;
        // this.mapEchartsError=true;
        this.initHunanMap([], this.hnybRegion.countRegionName);
      })
    },
    // 二次处理后台接口返回数据
    handleMapChartData(res){
      let visualMapArr = []
      let visualMapVal = null
      let result = JSON.parse(JSON.stringify(res).replace(/area/g,'name').replace(/businessNum/g,'value'));
      result.forEach((item,index)=>{
        if(index<5){ //赋值TOP5
          item.top=index+1
        }
        item.value = Number(item.value)
        visualMapArr.push(item.value)
      })
      // 去重
      visualMapArr=Array.from(new Set(visualMapArr));
      // visualMap,自行拆分三份
      if(visualMapArr.length>2){
        const list = visualMapArr;
        const threePartIndex = Math.round(list.length / 3);
        const thirdPart = list.splice(-threePartIndex);
        const secondPart = list.splice(-threePartIndex);
        const firstPart = list;
        visualMapVal={
          min:Number(thirdPart[0]),
          max:Number(secondPart[0]),
        }
        // console.log('111111',firstPart,secondPart,thirdPart)
      }else{
        visualMapVal={
          min:0,
          max:visualMapArr[visualMapArr.length-1],
        }
      }
      // console.log('0visualMapVal',visualMapVal)
      // console.log('result',result)
      this.initHunanMap(result, this.hnybRegion.countRegionName,visualMapVal);
    },
    initHunanMap(mapData, mapName, visualMapVal) {
      this.mapCharts = this.$echarts.getInstanceByDom(this.$refs.mapCharts);
      if (this.mapCharts == null) {
        this.mapCharts = this.$echarts.init(this.$refs.mapCharts);
      }
      this.$echarts.registerMap(mapName, this.provinces[mapName]);
      let formatterFunc = function (params) {
        if (!!params.data) {
          const dotHtml2 = `<div style="padding:10px 10px 0 10px;width: 120px;height: 62px;border-radius: 4px;background:rgba(0, 0, 0, 0.75);">
              <div style="height:50%;font-weight: 400;font-size: 14px;line-height:16px;color: #fff;">业务经办量</div>
              <div style="height:50%;font-weight: 700;font-size: 18px;line-height: 16px;color: #f8b62d;">${params.data.value}<span style="font-weight: 400;font-size: 14px;color: #fdad4d;">件</span></div>
              </div>`;
          return dotHtml2;
        } else {
          return "";
        }
      };
      let visualMap = {
        min: visualMapVal?visualMapVal.min:1,
        max: visualMapVal?visualMapVal.max:100,
        color: ["#17399F", "#17399F", "#17399F"],
      };
      let option = this.getMapEchartsOption(
        mapName,
        mapData,
        formatterFunc,
        visualMap
      );
      this.mapCharts.hideLoading();
      this.mapCharts.off('click') //图表渲染前销毁点击事件
      this.mapCharts.on("click", (params) => {
        this.goIntoMap(params);
      }); // 点击
      this.mapCharts.setOption(option);

      this.aniarrayArrays=mapData;
      this.mapSwiper(mapData);
    },
    mapSwiper(mapData){
        if(this.mapEchartsEmpty||this.mapEchartsError){
            this.clearTooltip();
            this.mapCharts.dispatchAction({
                type:'hideTip'
            })
        }else{
          this.faultByHourIndex=0;
          this.setAnimation();
          this.mouseAnimation();
        }
    },
    setAnimation(){
      if(this.faultByHourTime!=''){
        clearInterval(this.faultByHourTime);
        this.faultByHourTime='';
      }
      this.faultByHourTime = setInterval(()=>{
        // 清除之前的高亮
        if(this.faultByHourIndex){//不为0
          this.mapCharts.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: this.faultByHourIndex-1
          });
        }else{//为0
          this.mapCharts.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: this.aniarrayArrays.length-1
          });
        }
         // 当前下标高亮
        this.mapCharts.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: this.faultByHourIndex
        });
        // 当前下标浮窗
        this.mapCharts.dispatchAction({
          type:"showTip",
          seriesIndex:0,
          dataIndex:this.faultByHourIndex,
        });
        this.faultByHourIndex++;
        if(this.faultByHourIndex>=this.aniarrayArrays.length){
          this.faultByHourIndex = 0
        }
      },6000)
    },
    clearTooltip(){// 停止定时器，清除之前的高亮
      if(this.faultByHourTime){
        clearInterval(this.faultByHourTime);
        this.faultByHourTime = '';
      }
      if(this.faultByHourIndex){//不为0
        this.mapCharts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.faultByHourIndex-1
        });
      }else{//为0
        this.mapCharts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.aniarrayArrays.length
        });
      }
      this.faultByHourIndex = 0;
    },
    mouseAnimation() {
      // 鼠标划入
			this.mapCharts.on('mouseover', () => {
				this.clearTooltip();
			});
			// 鼠标划出重新定时器开始
			this.mapCharts.on('mouseout', () => {
        this.setAnimation();
			});
    },
    // 向上返回
    backMain() {},
    // 向下钻
    goIntoMap(item) {
      if (this.provinces.hasOwnProperty(item.name)) {
        let obj = {
          countRegionName: item.name,
          countRegionCode: CodeObjMap[item.name],
        };
        this.$store.commit("changeHnybRegion", obj);
      }
    },
    getMapEchartsOption(
      mapName,
      mapData,
      formatterFunc,
      visualMap
    ) {
      let option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
          backgroundColor: "transparent",
          extraCssText: "box-shadow: none;z-index:9",
          borderWidth: 0,
          padding: 0,
          formatter: formatterFunc,
          position: function (point, params, dom, rect, size) {
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            var viewWidth = size.viewSize[0];
            var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            // console.log('0',rect)
            if(pointX>viewWidth/2 || pointX==viewWidth/2){
              return [pointX+30, pointY-boxHeight/2];
            }else{
              return [pointX-boxWidth-30, pointY-boxHeight/2];
            }
          }
        },
        toolbox: {
          show: false,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          show: false,
          min: visualMap.min,
          max: visualMap.max,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color:["#00B0FF", "#194CF3", "#17389E"],
          },
          seriesIndex:0
        },
        geo: [
          {
            id: "down",
            map: mapName,
            silent: true, //避免地图Hover
            label: {
              show: false,
              color: "rgba(255, 255, 255, 1)",
              fontSize: 10,
            },
            itemStyle: {
              areaColor: "rgba(54, 77, 251, 0.5)",
              borderColor: "rgba(59, 232, 253, 0.2)",
              borderWidth: 2,
              shadowColor: "#fff",
              shadowBlur: 15,
              opacity: 0.8,
            },
            emphasis: {
              itemStyle: {
                areaColor: "rgba(7, 19, 67, 1)",
                borderColor: "rgba(59, 232, 253, 0.2)",
                borderWidth: 1,
              },
              label: {
                show: false,
                color: "rgba(253, 173, 77, 1)",
              },
            },
          },
          {
            id: "up",
            map: mapName,
            silent: true,//避免地图Hover
            label: {
              show: false,
              color: "transparent",
              fontSize: 10,
            },
            itemStyle: {
              borderWidth: 1, //边际线大小
              borderColor: "#1290FA", //边界线颜色
              areaColor: "#17399F ", //默认区域颜色
            },
            emphasis: {
              itemStyle: {
                areaColor: "rgba(7, 19, 67, 1)",
                borderColor: "rgba(59, 232, 253, 0.2)",
                borderWidth: 1,
              },
              label: {
                show: false,
                color: "transparent",
              },
            },
          },
        ],
        series: [
          // 用于地图中的图标
          // {
          //   type: 'scatter',
          //   coordinateSystem: 'geo',
          //   // symbol: echartsOption.img,
          //   // symbolSize: [10, 10],
          //   // symbolOffset: [0, 8]
          //   zlevel: 2,
          //   rippleEffect: {
          //     brushType: "stroke",
          //   },
          //   label: {
          //     normal: {
          //       show: true,
          //       formatter: "{b}",
          //       position: "right",
          //       textStyle: {
          //         color: "#fff",
          //         fontSize: 10,
          //       },
          //     },
          //     emphasis:{
          //       textStyle:{
          //         color: "rgba(253, 173, 77, 1)",
          //       }
          //     }
          //   },
          //   symbolSize: 8,
          //   showEffectOn: "render",
          //   hoverAnimation: true,
          //   geoIndex:1,
          //   data: scatterOption,
          // }
          {
            type: "map",
            zlevel: 2,
            map: mapName,
            data: mapData,
            label: {
              show: true,
              color: "rgba(255, 255, 255, 1)",
              fontSize: 10,
              formatter: function(param) {
                let relabel = param.name
                if(param.data&&param.data.top){
                  relabel = param.name + ' (' + param.data.top + ')'
                }
                return relabel+'\n{b|}';
              },
              rich: {
                  b: {
                      backgroundColor: {
                        image: require('@/assets/hnybInfoMonitorPlat/right/centerNormal.png')
                      },
                      height: 18
                  },
              }
            },
            itemStyle: {
              borderWidth: 1, //边际线大小
              borderColor: "#1290FA", //边界线颜色
              areaColor: "#17399F ", //默认区域颜色
            },
            emphasis: {
              label: {
                show: true,
                color: "rgba(253, 173, 77, 1)",
                fontSize: 10,
                formatter: function(param) {
                  let relabel = param.name
                  if(param.data&&param.data.top){
                    relabel = param.name + ' (' + param.data.top + ')'
                  }
                  return relabel+'\n{b|}';
                },
                rich: {
                    b: {
                        backgroundColor: {
                          image: require('@/assets/hnybInfoMonitorPlat/right/centerEmphasis.png')
                        },
                        height: 18
                    },
                }
              },
              itemStyle: {
                areaColor: "rgba(7, 19, 67, 1)",
              },
            },
            selectedMode: false,
            // select: {// 地图选中区域样式
            //   label: {
            //     color: "rgba(255, 255, 255, 1)",// 选中区域的label(文字)样式
            //   },
            //   itemStyle: {
            //     areaColor: "#17399F",// 选中区域的默认样式
            //   },
            // },
          },
        ],
        // graphic: {
        //   type: 'text',
        //   left: 'center',
        //   top: '40%',
        //   silent: true,
        //   invisible: mapData.length,
        //   style: {
        //     fill: 'rgba(255, 255, 255, 0.5)',
        //     fontWeight: 'bold',
        //     text: '暂无数据',
        //     fontSize: '16px',
        //   }
        // }
      };
      return option;
    },
  },
};
</script>
  
<style type="text/css" lang="less" scoped="scoped">
.card_item.map {
  width: 100%;
  height: calc(100% - 100px);
  display: block;
  .back {
    position: absolute;
    top: 0px;
    z-index: 999;
    .buttonBack {
      width: 70px;
      height: 32px;
      background: #234784;
      border: 0;
      color: #fff;
      cursor: pointer;
    }
    .buttonBack:hover {
      color: #35e2ff;
      border: 1px solid #35e2ff;
    }
    span {
      color: #fff;
      font-size: 13px;
    }
  }
  .mapColor {
    position: absolute;
    bottom: 0;
    left: 20px;
  }
  .head_list {
    position: absolute;
    bottom: 100px;
    left: 20px;
    padding: 10px;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    // width: calc(50% - 5px);
    border-radius: 4px;
    background: rgba(69, 140, 201, 0.1);
    .list_img {
      // width: 44px;
      height: 100%;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .list_text {
      .list_tit {
        margin-bottom: 5px;
        font-size: 14px;
        color: #fff;
      }
      .list_num {
        color: #fdad4d;
        font-size: 20px;
        .unit {
          font-size: 14px;
        }
      }
    }
  }
}
.requestEmpty {
  // display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  .requestEmptyText {
    font-size: 14px;
    color: #a6e1ff;
    background: rgba(2, 9, 25, 0.6);
    box-shadow: 0 2px 8px 0 rgb(0 0 0 /15%);
    border-radius: 4px;
    padding: 10px;
  }
}
.requestError {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(2, 9, 25, 0.6);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .el-icon-warning-outline {
    font-size: 34px;
    color: #a6e1ff;
  }
  .text {
    padding: 10px;
    font-size: 14px;
    color: #a6e1ff;
  }
}
</style>

夏花里的尘埃
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 429
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
python爬虫基础——Webbot库介绍
最新发布
qq_56262770的博客
07-22 606
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1788
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 510
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
前端性能优化--懒加载
weixin_43799793的博客
07-19 176
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
[web]-反序列化-绕过__wakeup(转)
mails2008的专栏
07-18 391
终点：很直接是echo $flag,在__destruct中，username==='admin' 和 password==100。反序列化过程中发现起点在终点之前调用，反而是捣乱的，那我们就不需要自动执行__wakeup，绕过的方法，设置的字段数量比实际字段大的值。其实简单的很简单，难得也很难，慢慢学习就好，没必要焦虑，觉得很难，纯粹一个兴趣爱好就行。起点：_wakeup函数中是$this->username='guest',是给赋值；按照常规思路，寻找起点、终点、跳板。
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 487
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
Web Pages 表单
07-20 291
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。
前端小项目-强调鼠标悬停时效果的名片
关注收藏，可以私信解决问题！
07-19 1061
在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。
web前端 React 框架面试200题（三）
柯晓楠
07-21 418
纯组件是可以编写的最简单和最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用程序的性能。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性在JSX表达式中，一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。
前端使用webSocket与后台建立连接并进行心跳监测机制
On the way
07-18 511
2.在页面初始化的时候调用getWebSocket此方法。首先项目中需要引入websocket。
vue3前端开发-小兔鲜项目-一级页面banner图渲染
yrldjsbk的博客
07-19 355
其实，首页的banner渲染代码可以拿来复用的，只是区别在于，传递的接口参数不一样而已。我们的一级页面就可以成功拿到了后端接口反馈过来的一级栏目的banner图信息了。我们增加了一个参数对象params.而且做好了默认值的设置。（用的是一种解构赋值的模式）1：改造一下之前的获取banner的接口调用函数，增加一个参数对象。2：把之前HomeBanner.vue里面的代码，拿过来，在template里面新增banner的渲染模块内容。写好默认的值1.（不赋值的情况下，就是这个默认值1）3：修改完善页面内容。
了解 JSON Web 令牌 (JWT)
技术探索驿站
07-18 682
在现代 Web 开发领域，确保客户端和服务器之间的通信安全至关重要。JSON Web Tokens (JWT) 已成为确保安全高效数据交换的流行解决方案。本文将深入探讨 JWT 是什么、它们的工作原理以及它们为何对于 Web 应用程序中的安全身份验证和授权至关重要。JSON Web Token (JWT) 是一种紧凑且 URL 安全的表示双方之间传输声明的方式。
【Python】探索 Python 中的 any 和 all 方法
2333333
07-21 656
any：用于检查一个可迭代对象中是否至少有一个元素为真。如果有一个元素为真，则返回 True，否则返回 False。all：用于检查一个可迭代对象中是否所有元素都为真。如果所有元素都为真，则返回 True，否则返回 False。iterable：一个可迭代对象，如列表、元组、集合等。any 和 all 是 Python 中两个非常有用的内置函数，特别适用于需要检查序列中元素是否符合特定条件的场景。通过理解和掌握 any 和 all 的用法，我们可以编写更加简洁和高效的代码。
Zabbix的安装部署及使用流程
凡尘
07-18 712
【代码】Zabbix的安装部署及使用流程。
前端面试细节重难点（十二）（已工作|做分享）
weixin_49062485的博客
07-22 118
3、如何理解”在JavaScript中使用内联事件处理器（例如 onclick 属性）时，确实存在一个潜在问题：当页面渲染时，这些内联的JavaScript代码会被解析并执行。只有在用户触发了相应的事件（如点击）时，这些函数才会被调用。总结：React中使用函数名而不是函数调用的方式，是为了确保事件处理函数在事件触发时被正确调用，而不是在组件渲染时就立即执行，更可控和灵活。React中的事件处理：在React中，事件处理函数通过属性传递给组件，而不是直接在HTML中定义，该函数会在相应的事件触发时被调用。
浏览器插件利器--allWebPluginV2.0.0.16-beta版发布
云开软件工作室
07-21 303
allWebPluginV2.0.0.16-beta版发布。allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件产品，致力于将浏览器插件/控件重新应用到所有浏览器。它将现有ActiveX插件直接嵌入浏览器，实现插件加载、界面显示、接口调用、事件回调等。支持Chrome、Firefox、Edge、360等浏览器，接口调用友好、集成方便。为用户提供“信息化系统 + allWebPlugin + 插件 + 浏览器”的解决方案。
websocket实现进度条
程序员日志
07-22 256
简易websocket实现进度条的小练习。
van-dialog 组件调用报错
Shids_的博客
07-22 148
van-dialog 组件调用报错
React——useEffect和自定义useUpdateEffect
weixin_45705239的博客
07-22 417
useEffect 是React的一个内置Hook，用于在组件渲染后执行副作用（例如数据获取、订阅或手动更改DOM）。它将在第一次渲染后和每次更新后都会执行。相比之下，useUpdateEffect 不是React内置的Hook，但这个名称通常被用于自定义Hook，其行为类似于 useEffect，但它，只会在依赖项更新时执行。这可以通过跟踪组件是否已经挂载来实现。在这个自定义 useUpdateEffect 中，我们使用了 useRef 来追踪组件是否是首次渲染。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值