ECharts 地图中来实现自定义图标效果

最新推荐文章于 2024-04-14 15:38:03 发布

知否灬知否

最新推荐文章于 2024-04-14 15:38:03 发布

阅读量786

点赞数 1

分类专栏： VUE 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/weixin_51958206/article/details/130645251

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

相关的图片和数据，也可以自己从网上找：
https://download.csdn.net/download/weixin_51958206/87778012

<template>
  <div>
    <div ref="charts" style="width: 700px; height: 600px"></div>
  </div>
</template>
<script>
import shanDong from './shandong'
export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  created() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const charts = this.$echarts.init(this.$refs["charts"]);
      let data = [
        {
          name: "济南",
          value: [117.000923,
            36.675807],
        },
        {
          name: "日照",
          value: [119.461208,
            35.428588],
        },
      ];
      let LableData = [
        {
          name: "济南",
          value: [117.000923,
            36.675807],
        },
        {
          name: "日照",
          value: [119.461208,
            35.428588],
        },

      ];
      var option = {
        backgroundColor: "#fff",
        //地下的那块
        geo: {
          map: '山东',
          aspectScale: 0.75, //长宽比
          zoom: 1,
          top: 90,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#e74c3c",
              shadowColor: '#5785C0', //阴影
              shadowOffsetX: 12,
              shadowOffsetY: 16,
              // borderWidth:2,
              borderColor: "#e74c3c"
            },
            emphasis: {
              areaColor: '#e74c3c',
              borderWidth: 0,
              color: 'green',
              label: {
                show: true
              }
            }
          },
          regions: [],
        },
        visualMap: {
          //图例值控制
          min: 0,
          max: 10000,
          calculable: false,
          show: false,
          right: 50,
          // seriesIndex: 1,
          bottom: 50,
          color: ["#FD7152"],
          // inRange:{
          //   symbolSize: [10, 20]}, 
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          // 常规地图
          {
            type: 'map',
            roam: false,
            layoutSize: "90%",
            aspectScale: 0.75,
            selectedMode: false,
            zoom: 1,
            roam: false,
            map: '山东', //使用
            top: 90,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#000000',
                  fontSize: 12,
                  fontWeight: 600
                }
              },
            },
            itemStyle: {
              normal: {
                areaColor: '#ffffff',  //区域颜色
                borderColor: '#91C2FF',  //边框颜色
                borderWidth: 1
              },
            },
            emphasis: {
              itemStyle: {
                areaColor: '#B6D7FF',
                borderColor: '#91C2FF',
                borderWidth: 1
              },
              label: { // 文字
                show: true,
                color: '#0062CB',
                fontSize: 12,
                fontWeight: 600
              },

            }
          },
          // 区域散点图
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            symbolSize: 10,
            rippleEffect: {
              //坐标点动画
              period: 2,
              scale: 4,
              brushType: "fill",
            },
            label: {
              normal: {
                show: false,
                position: "right",
                formatter: "{b}",
                color: "#b3e2f2",
                fontWeight: "400",
                fontSize: 12,
              },
            },

            data: data,
            itemStyle: {
              //坐标点颜色
              normal: {
                show: false,
                color: "#ff3f3a",
                shadowBlur: 20,
                shadowColor: "#fff",
              },
              emphasis: {
                areaColor: "#f00",
              },
            },
          },
          //图标
          {
            name: "lable",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: 'image://' + require("./003.png"),
            symbolSize: [50, 50],
            symbolOffset: [0, "-50%"],
            hoverAnimation: true,
            zlevel: 2,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff",
                  lineHeight: 15,
                },
                formatter(params) {
                  return params.data.value[2];
                },
              },
            },

            itemStyle: {
              normal: {
                color: "#6495ED", //标志颜色
                opacity: 0.8,
                borderColor: "#aee9fb",
                borderWidth: 0.6,
              },
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            data: LableData,
          },
        ],
      };
      this.$echarts.registerMap("山东", shanDong);
      charts.setOption(option);
    },
  },
};
</script>
<style  scoped>
</style>