echarts 2D地图散点图(带立体效果)tooltips中点击事件

最新推荐文章于 2024-06-07 11:59:52 发布
最新推荐文章于 2024-06-07 11:59:52 发布
阅读量3.5k 收藏 4
点赞数
文章标签： vue.js 数据可视化 js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yusun1234/article/details/118384816
版权

模板

<template>
  <div class="wrapper">
    <div class="chart" id="chart"></div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

js 

1 、2d地图是平面的，可以设置倾斜度，边加阴影，这样就有立体感了

2 、tooltips上设置点击事件，在methods不会触发的，要先在全局下挂载

<script>
import shanghai from "../../static/map/js/province/shanghai";
// params 当前tooltip数据，
window.onClickSeries = function(params, key) {
  testFun(params, key); // 直接通过window方法去调用methods中对应方法
  console.log(params);
};

export default {
  data() {
    return {
      dialogVisible: false,
      city: "",
      dataS: [
        { name: `浦东新区`, value: [121.567706, 31.245944, 1] },
        { name: `宝山区`, value: [121.489934, 31.398896, 2] },
        { name: `崇明区`, value: [121.526, 31.658, 3] },
        { name: `嘉定区`, value: [121.250333, 31.383524, 4] },
        { name: `青浦区`, value: [121.113021, 31.151209, 5] },
        { name: `杨浦区`, value: [121.522797, 31.270755, 6] },
        { name: `虹口区`, value: [121.491832, 31.26097, 7] },
        { name: `普陀区`, value: [121.392499, 31.241701, 8] },
        { name: `静安区`, value: [121.448224, 31.229003, 9] },
        { name: `黄浦区`, value: [121.490317, 31.222771, 10] },
        { name: `长宁区`, value: [121.4222, 31.218123, 11] },
        { name: `徐汇区`, value: [121.43752, 31.179973, 12] },
        { name: `松江区`, value: [121.223543, 31.03047, 13] },
        { name: `闵行区`, value: [121.375972, 31.111658, 14] },
        { name: `金山区`, value: [121.458472, 30.912345, 15] },
        { name: `奉贤区`, value: [121.458472, 30.912345, 16] }
      ]
    };
  },
  created() {},
  mounted() {
    this.drawChart();
    window.testFun = this.testFun;
  },

  methods: {
    // vue内部方法
    testFun(va1, va2) {
      console.log(va1, va2);
      this.dialogVisible = true;
    },
    // 弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let chart = this.$echarts.init(document.getElementById("chart"));
      // 监听屏幕变化自动缩放图表
      window.addEventListener("resize", function() {
        chart.resize();
      });

      // 绘制图表
      chart.setOption({
        // 图表主标题
        title: {
          text: "全国各省人口", // 主标题文本，支持使用 \n 换行
          top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          left: "center", // 值: 'left', 'center', 'right' 同上
          textStyle: {
            // 文本样式
            fontSize: 24,
            fontWeight: 600,
            color: "#fff"
          }
        },
        // 提示框组件
        tooltip: {
          trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 使用函数模板  传入的数据值 -> value: number | Array
          triggerOn: "click",
          enterable: true,
          formatter: function(val) {
            console.log(val);
            let valu = val.data.value;

            return (
              val.data.name +
              "<br>人口数量: " +
              val.data.value[2] +
              "万" +
              `<button  onclick="onClickSeries(\'` +
              valu +
              `\',\' ` +
              1 +
              `\')">这是显示的文本</button>`
            );
          }
        },
        geo: {
          zoom: 1,
          // geoIndex: 1,
          aspectScale: 1, //长宽比
          map: "上海", // 地图类型
          show: true, // 是否显示地理坐标系组件
          // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，
          // 可以设置成 'scale' 或者 'move' 设置成 true 为都开启
          roam: false,
          // 图形上的文本标签
          label: {
            show: false // 是否显示对应地名
          },
          // 地图区域的多边形 图形样式
          itemStyle: {
            normal: {
              areaColor: "#053fc4", // 地图颜色
              borderWidth: 5, // 边框的宽度
              shadowColor: "#0098d9", //  阴影颜色
              borderColor: "#00FFFF", // 边框颜色
              // shadowOffsetX: -5,
              // shadowOffsetY: 10,
              shadowBlur: 12, // 阴影的模糊大小
              shadowOffsetX: 0, //阴影水平方向上的偏移距离
              shadowOffsetY: 12 // 阴影垂直方向上的偏移距离
            },
            emphasis: {
              show: false
            }
          },

          // 高亮状态下的多边形和标签样式
          emphasis: {
            label: {
              show: true, // 是否显示标签
              color: "#fff" // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
            },
            itemStyle: {
              areaColor: "#9cc3f5" // 地图区域的颜色
            }
          }
        },
        series: [
          {
            type: "map",
            map: "上海",
            // center: [112.194115019531, 23.582111640625],
            zoom: 1,
            geoIndex: 1,
            aspectScale: 1, //长宽比
            showLegendSymbol: false, // 存在legend时显示

            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 8,
                  color: "#ccc"
                }
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#ccc"
                }
              }
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: "#053fc4",
                borderColor: "#fff",
                fontWeightL: 700,
                borderWidth: 1
              },
              emphasis: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#3f15d6" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#d243cd" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            data: this.dataS
          },
          {
            type: "scatter", // 类型
            coordinateSystem: "geo", // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
            // 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
            // 'pin', 'arrow', 'none'
            symbol: "circle",
            symbolSize: 8, // 标记的大小
            // 图形的样式
            itemStyle: {
              normal: {
                // areaColor: '#00FFFF', // 地图颜色
                borderWidth: 1, // 边框的宽度
                shadowColor: "#0098d9", //  阴影颜色
                borderColor: "#00FFFF", // 边框颜色
                // shadowOffsetX: -5,
                // shadowOffsetY: 10,
                shadowBlur: 12, // 阴影的模糊大小
                shadowOffsetX: 0, //阴影水平方向上的偏移距离
                shadowOffsetY: 12 // 阴影垂直方向上的偏移距离
              },
              emphasis: {
                show: false
              }
            },
            // 系列中的数据内容数组, 数组项通常为具体的数据项
            data: this.dataS
          },
          {
            type: "effectScatter", // 类型
            coordinateSystem: "geo", // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'
            // 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',
            // 'pin', 'arrow', 'none'
            symbol: "circle",
            // 标记的大小, 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数
            // (value: Array|number, params: Object) => number|Array
            // 其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数
            symbolSize: function(val) {
              return val[2] / 600;
            },
            // 图形的样式
            itemStyle: {
              normal: {
                // areaColor: '#00FFFF', // 地图颜色
                borderWidth: 1, // 边框的宽度
                shadowColor: "#0098d9", //  阴影颜色
                borderColor: "#00FFFF", // 边框颜色
                // shadowOffsetX: -5,
                // shadowOffsetY: 10,
                shadowBlur: 12, // 阴影的模糊大小
                shadowOffsetX: 0, //阴影水平方向上的偏移距离
                shadowOffsetY: 12 // 阴影垂直方向上的偏移距离
              },
              emphasis: {
                show: false
              }
            },
            // 系列中的数据内容数组。数组项通常为具体的数据项
            data: [
              { name: `长宁区`, value: [121.4222, 31.218123, 11] },
              { name: `徐汇区`, value: [121.43752, 31.179973, 12] },
              { name: `松江区`, value: [121.223543, 31.03047, 13] },
              { name: `闵行区`, value: [121.375972, 31.111658, 14] },
              { name: `金山区`, value: [121.458472, 30.912345, 15] },
              { name: `奉贤区`, value: [121.458472, 30.912345, 16] }
            ]
          }
        ]
      });
    }
  }
};
</script>

样式

<style scoped>
.wrapper {
  width: 100%;
}
.wrapper .chart {
  width: 800px;
  height: 500px;
  margin: 100px 50px 0;
  border: 1px solid #eeeeee;
  background-size: 100% 100%;
}
#chart {
  pointer-events: all;
}
</style>

下面是完整代码

<template>

  <div class="wrapper">

    <div class="chart" id="chart"></div>

    <el-dialog

      title="提示"

      :visible.sync="dialogVisible"

      width="30%"

      :before-close="handleClose"

    >

      <span>这是一段信息</span>

      <span slot="footer" class="dialog-footer">

        <el-button @click="dialogVisible = false">取 消</el-button>

        <el-button type="primary" @click="dialogVisible = false"

          >确 定</el-button

        >

      </span>

    </el-dialog>

  </div>

</template>

<script>

import shanghai from "../../static/map/js/province/shanghai";

// 用来保存所有的地图实例

const globalMap = {};

// params 当前tooltip数据， key: 当前实例的键值

window.onClickSeries = function(params, key) {

  testFun(params, key); // 直接通过window方法去调用methods中对应方法

  // 获取当前id地图的回调方法并执行

  console.log(params);

};

export default {

  data() {

    return {

      dialogVisible: false,

      city: "",

      dataS: [

        { name: `浦东新区`, value: [121.567706, 31.245944, 1] },

        { name: `宝山区`, value: [121.489934, 31.398896, 2] },

        { name: `崇明区`, value: [121.526, 31.658, 3] },

        { name: `嘉定区`, value: [121.250333, 31.383524, 4] },

        { name: `青浦区`, value: [121.113021, 31.151209, 5] },

        { name: `杨浦区`, value: [121.522797, 31.270755, 6] },

        { name: `虹口区`, value: [121.491832, 31.26097, 7] },

        { name: `普陀区`, value: [121.392499, 31.241701, 8] },

        { name: `静安区`, value: [121.448224, 31.229003, 9] },

        { name: `黄浦区`, value: [121.490317, 31.222771, 10] },

        { name: `长宁区`, value: [121.4222, 31.218123, 11] },

        { name: `徐汇区`, value: [121.43752, 31.179973, 12] },

        { name: `松江区`, value: [121.223543, 31.03047, 13] },

        { name: `闵行区`, value: [121.375972, 31.111658, 14] },

        { name: `金山区`, value: [121.458472, 30.912345, 15] },

        { name: `奉贤区`, value: [121.458472, 30.912345, 16] }

      ]

    };

  },

  created() {},

  mounted() {

    this.drawChart();

    window.testFun = this.testFun;

  },

  methods: {

    // vue内部方法

    testFun(va1, va2) {

      console.log(va1, va2);

      this.dialogVisible = true;

    },

    // 弹框

    handleClose(done) {

      this.$confirm("确认关闭？")

        .then(_ => {

          done();

        })

        .catch(_ => {});

    },

    drawChart() {

      // 基于准备好的dom，初始化echarts实例

      let chart = this.$echarts.init(document.getElementById("chart"));

      // 监听屏幕变化自动缩放图表

      window.addEventListener("resize", function() {

        chart.resize();

      });

      // 绘制图表

      chart.setOption({

        // 图表主标题

        title: {

          text: "全国各省人口", // 主标题文本，支持使用 \n 换行

          top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比

          left: "center", // 值: 'left', 'center', 'right' 同上

          textStyle: {

            // 文本样式

            fontSize: 24,

            fontWeight: 600,

            color: "#fff"

          }

        },

        // 提示框组件

        tooltip: {

          trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用

          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式

          // 使用函数模板  传入的数据值 -> value: number | Array

          triggerOn: "click",

          enterable: true,

          formatter: function(val) {

            console.log(val);

            let valu = val.data.value;

            return (

              val.data.name +

              "<br>人口数量: " +

              val.data.value[2] +

              "万" +

              `<button  οnclick="onClickSeries(\'` +

              valu +

              `\',\' ` +

              1 +

              `\')">这是显示的文本</button>`

            );

          }

        },

        geo: {

          zoom: 1,

          // geoIndex: 1,

          aspectScale: 1, //长宽比

          map: "上海", // 地图类型

          show: true, // 是否显示地理坐标系组件

          // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，

          // 可以设置成 'scale' 或者 'move' 设置成 true 为都开启

          roam: false,

          // 图形上的文本标签

          label: {

            show: false // 是否显示对应地名

          },

          // 地图区域的多边形 图形样式

          itemStyle: {

            normal: {

              areaColor: "#053fc4", // 地图颜色

              borderWidth: 5, // 边框的宽度

              shadowColor: "#0098d9", //  阴影颜色

              borderColor: "#00FFFF", // 边框颜色

              // shadowOffsetX: -5,

              // shadowOffsetY: 10,

              shadowBlur: 12, // 阴影的模糊大小

              shadowOffsetX: 0, //阴影水平方向上的偏移距离

              shadowOffsetY: 12 // 阴影垂直方向上的偏移距离

            },

            emphasis: {

              show: false

            }

          },

          // 高亮状态下的多边形和标签样式

          emphasis: {

            label: {

              show: true, // 是否显示标签

              color: "#fff" // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色

            },

            itemStyle: {

              areaColor: "#9cc3f5" // 地图区域的颜色

            }

          }

        },

        series: [

          {

            type: "map",

            map: "上海",

            // center: [112.194115019531, 23.582111640625],

            zoom: 1,

            geoIndex: 1,

            aspectScale: 1, //长宽比

            showLegendSymbol: false, // 存在legend时显示

            label: {

              normal: {

                show: true,

                textStyle: {

                  fontSize: 8,

                  color: "#ccc"

                }

              },

              emphasis: {

                show: false,

                textStyle: {

                  color: "#ccc"

                }

              }

            },

            roam: false,

            itemStyle: {

              normal: {

                areaColor: "#053fc4",

                borderColor: "#fff",

                fontWeightL: 700,

                borderWidth: 1

              },

              emphasis: {

                areaColor: {

                  type: "linear",

                  x: 0,

                  y: 0,

                  x2: 0,

                  y2: 1,

                  colorStops: [

                    {

                      offset: 0,

                      color: "#3f15d6" // 0% 处的颜色

                    },

                    {

                      offset: 1,

                      color: "#d243cd" // 100% 处的颜色

                    }

                  ],

                  globalCoord: false // 缺省为 false

                }

              }

            },

            data: this.dataS

          },

          {

            type: "scatter", // 类型

            coordinateSystem: "geo", // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'

            // 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',

            // 'pin', 'arrow', 'none'

            symbol: "circle",

            symbolSize: 8, // 标记的大小

            // 图形的样式

            itemStyle: {

              normal: {

                // areaColor: '#00FFFF', // 地图颜色

                borderWidth: 1, // 边框的宽度

                shadowColor: "#0098d9", //  阴影颜色

                borderColor: "#00FFFF", // 边框颜色

                // shadowOffsetX: -5,

                // shadowOffsetY: 10,

                shadowBlur: 12, // 阴影的模糊大小

                shadowOffsetX: 0, //阴影水平方向上的偏移距离

                shadowOffsetY: 12 // 阴影垂直方向上的偏移距离

              },

              emphasis: {

                show: false

              }

            },

            // 系列中的数据内容数组, 数组项通常为具体的数据项

            data: this.dataS

          },

          {

            type: "effectScatter", // 类型

            coordinateSystem: "geo", // 该系列使用的坐标系 可选: 'cartesian2d','polar','geo'

            // 标记的图形, 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond',

            // 'pin', 'arrow', 'none'

            symbol: "circle",

            // 标记的大小, 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数

            // (value: Array|number, params: Object) => number|Array

            // 其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数

            symbolSize: function(val) {

              return val[2] / 600;

            },

            // 图形的样式

            itemStyle: {

              normal: {

                // areaColor: '#00FFFF', // 地图颜色

                borderWidth: 1, // 边框的宽度

                shadowColor: "#0098d9", //  阴影颜色

                borderColor: "#00FFFF", // 边框颜色

                // shadowOffsetX: -5,

                // shadowOffsetY: 10,

                shadowBlur: 12, // 阴影的模糊大小

                shadowOffsetX: 0, //阴影水平方向上的偏移距离

                shadowOffsetY: 12 // 阴影垂直方向上的偏移距离

              },

              emphasis: {

                show: false

              }

            },

            // 系列中的数据内容数组。数组项通常为具体的数据项

            data: [

              { name: `长宁区`, value: [121.4222, 31.218123, 11] },

              { name: `徐汇区`, value: [121.43752, 31.179973, 12] },

              { name: `松江区`, value: [121.223543, 31.03047, 13] },

              { name: `闵行区`, value: [121.375972, 31.111658, 14] },

              { name: `金山区`, value: [121.458472, 30.912345, 15] },

              { name: `奉贤区`, value: [121.458472, 30.912345, 16] }

            ]

          }

        ]

      });

    }

  }

};

</script>

<style scoped>

.wrapper {

  width: 100%;

}

.wrapper .chart {

  width: 800px;

  height: 500px;

  margin: 100px 50px 0;

  border: 1px solid #eeeeee;

  /* background: url(../../public/static/bg.png) no-repeat; */

  background-size: 100% 100%;

}

#chart {

  pointer-events: all;

}

</style>

落魄小二
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts 3D地图，地图区域点击触发事件
10-16
echarts 3D地图，地图区域点击触发事件，3d地图加数据
45度斜视角地图编辑器(附源代码)
11-17
Titel编辑 刷怪编辑 掉落物品编辑。
echarts地图实现3d效果
最新发布
weixin_38999134的博客
06-07 282
【代码】echarts地图实现3d效果。
vue中使用echarts实现地图散点图
upStar1的博客
05-31 4785
在vue中使用echarts实现地图自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客_浮窗vue中介绍了echarts中地图的简单使用，实现了自定义浮窗的功能。 在vue中使用echarts实现地图颜色渐变及自定义浮窗内容_芝士焗红薯的博客-CSDN博客实现了地图上地区的颜色渐变，对地图进行了一些简化。 在很多大屏功能上是需要地图实现很密集的散点图，这个可以参考别的文章，本文使用散点图，是因为客户需要显示省直的信息，我个人认为在旁边放个点或者什么东西显示省直信息太奇怪了，正好想学一下散点，所以就用一
Echarts 地图 带涟漪特效的散点图
qq_61324603的博客
04-21 3235
var airData=[{name:'北京',value:39.92},{name:'天津',value:39.12},{name:'上海',value:31.22},{name:'重庆',value:66},{name:'河北',value:147},{name:'河南',value:113},{name:'云南',value:25},{name:'辽宁',value:60},{name:'黑龙江',value:114},{name:'湖南',value:56},
eCharts二三维地图总结
Unknowncheats的博客
08-22 2450
文章版权由作者李晓晖和博客园共有，若转载请于明显处标明出处：http://www.cnblogs.com/naaoveGIS/ 1.背景 最近多个项目中的登录页面陆续提出了不少地图需求，主要围绕地图的立体感、交互等设计。业主爸爸，即使登录页也要整出花样，希望有眼前一亮的感觉，比如： 搞GIS的同学遇到地图问题，习惯性的就是引入地图引擎，但是仔细分析这类页面，它真的需要引入一个庞大的地图引擎来解决吗？ a.地图引擎太大，不利于登录页加载效率。 b.该地图并不强调坐标系等等，也不强调地图的精细度，...
echarts图表tooltip浮动框显示单位——散点图
zuo-yiran的博客
03-16 8464
项目中要求在图表的浮动提示窗上显示相对应的单位如图： 方法有二，如下： 方法1： 利用自定义提示框进行拼接： 但是这样的话根据后台返回的数据格式的不同进行处理，在tooltip的formatter中进行拼接即可，注意这样的话要考虑的情况比较多。 方法2（如果和后台商量好可以要求返回值的格式的话就很简单了）： 引入echarts的js后，设置： var myChart = echa...
echarts3d地图散点数据陷进地图的解决方案
10-25
在数据分析和可视化领域，ECharts 是一款非常流行的开源 JavaScript 图表库，它提供了丰富的图表类型，包括2D和3D地图。本主题聚焦于“echarts3d地图散点数据陷进地图的解决方案”，这是一个在使用ECharts进行3D地图...
echarts 地图散点发光涟漪效果
02-03
在本项目中，我们将探讨如何利用 ECharts 实现一个富有动态效果的“地图散点发光涟漪效果”。 1. **ECharts 地图组件** ECharts 提供了丰富的地图模板，包括世界地图、中国地图以及各个省份、城市的细分地图。地图...
Echarts+百度地图_散点图完整版demo
06-14
**ECharts + 百度地图 散点图详解** 在数据可视化领域，ECharts是一款非常流行的JavaScript库，它提供了丰富的图表类型和强大的交互功能。同时，百度地图API为开发者提供了地图服务，包括定位、地图展示、地理编码...
echarts 全国地图 点击地图上的点，打开超链接 地图点击事件
04-10
在本文中，我们将深入探讨如何使用ECharts库创建一个全国地图，并实现点击地图上的特定区域后，触发页面跳转的功能。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和交互功能，使得数据可视化...
echarts：实现3D地图版块叠加动效散点+轮播高亮效果
smm的博客
01-17 7158
实现3D地图版块叠加动效散点效果，轮播高亮展示区域版块，且高亮区域的散点动效、颜色、标签样式均有变化
倾斜的地图
MakeStart
05-30 3363
采用WPF的3D功能，将地图控件进行倾斜，得出的初步2.5D效果。
ECharts 横坐标倾斜设置的实现方法详解
pleaseprintf的博客
06-28 7129
在使用 ECharts 进行数据可视化时，有时候需要调整横坐标的显示方式，使其倾斜以适应较长的标签或增加可读性。本文将详细介绍如何使用 ECharts 实现横坐标倾斜设置，帮助你灵活处理各种数据展示需求。除了调整倾斜角度外，我们还可以使用 axisLabel 的 formatter 属性来自定义横坐标的标签显示内容。
使用Echarts实现地图3D效果
热门推荐
m0_61644055的博客
04-20 2万+
使用echarts生成地图，并实现堆叠效果
echarts散点图tooltip提示框组件
Z_znmy的博客
05-08 2633
echarts散点图tooltip提示框组件 option={ tooltip:{ trigger:'item', formatter:function(params){ return params.marker+params.seriesName+'</br>'+params.name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+params.data[2] } } } params打印内容 官
echarts基于地图的散点图部分散点间隔放大动态效果实现
qq_33168921的博客
11-20 1543
echarts图中，基于地图，利用timeline组件实现气泡图动态跳转效果 问题描述 在开发中，要求对气泡图部分气泡进行轮播放大效果 echarts.registerMap("graphData", baiseArea); //注册地图数据 let myChart = echarts.init(document.getElementById("paoGraph")); let currentIndex = 0； //当前动态放大的点的定位，初始为0 //气泡图数据（进行数据处理，让需要动态效果的点放在数
echarts-横坐标文字竖着显示和倾斜45度显示
hsany330的专栏
07-15 4433
竖着显示 xAxis ： { axisLabel:{ interval: 0, formatter: function (value) { //x轴的文字改为竖版显示 var str = value.split(""); return str.join("\n"); ..
echarts---tooltip（提示框组件）配置项
舔狗的博客
08-12 1万+
简单概述echarts tooltip组件相关属性
echarts给地图散点添加点击事件
06-09
要给 ECharts 地图散点添加点击事件，可以使用 ECharts 提供的事件处理函数。下面是一个简单的示例代码，演示了如何在地图上添加散点并为散点添加点击事件： ```javascript // 初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 定义散点数据 var data = [ {name: '北京', value: [116.46, 39.92]}, {name: '上海', value: [121.48, 31.22]}, {name: '杭州', value: [120.19, 30.26]}, //... ]; // 定义地图配置 var option = { tooltip: {}, geo: { map: 'china' }, series: [{ name: '散点', type: 'scatter', coordinateSystem: 'geo', data: data, symbolSize: 10, label: { normal: { show: true, formatter: '{b}', position: 'right' } }, itemStyle: { normal: { color: '#F06C00' } } }] }; // 绑定点击事件 myChart.on('click', function (params) { if (params.componentType === 'series' && params.seriesType === 'scatter') { // 点击了散点，可以在这里添加你的逻辑 console.log('clicked', params.name); } }); // 渲染地图 myChart.setOption(option); ``` 在上面的代码中，我们先定义了一个 data 数组，其中包含了一些城市的经纬度信息。然后定义了一个地图的配置对象，其中包含了一个散点图的系列，用于显示这些城市的位置。接着使用 `on` 方法绑定了一个点击事件，当用户点击散点时，会触发这个事件，我们可以在事件处理函数里添加自己的逻辑。 需要注意的是，散点图的系列类型是 `scatter`，地图投影方式是 `geo`，事件类型是 `click`。同时，由于 ECharts 可以支持多个系列，多个坐标系，因此在事件处理函数里需要判断用户点击的是哪个系列，以及系列的类型是什么。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值