echars 地图添加引导线效果

  1.  ·引入地图数据、配置基础地图
      await axios.get("../../../static/json/map/yantai.json", {}).then(yantaiJson => {
                    //获取json数据
                    echarts.registerMap("yantai", yantaiJson.data); //生成地图
                    let jsondata = yantaiJson.data.features;
                    // 随机生成数据;
                    jsondata.forEach(item => {
                        let value = {
                            name: item.properties.name,
                            value: item.properties.center
                        };
                        tempData.push(value);
                    });
                });
       //注册使用地图
                let yantaiMap = echarts.init(this.$refs.yantaiMap); 
     geo: {
                        show: true,
                        type: "map",
                        map: "yantai",
                        data: tempData,
                        scaleLimit: {
                            min: 1,
                            max: 4
                        },
                        itemStyle: {
                            //地图颜色
                            normal: {
                                show: true, //省份名称
                                borderColor: "#0099cc",
                                borderWidth: 1,
                                areaColor: {
                                    type: "radial",
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#003366" // 0% 处的颜色
                                        }
                                    ],
                                    globalCoord: false // 缺省为 false
                                }
                            },
                            emphasis: {
                                areaColor: {
                                    type: "radial",
              
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 ECharts 地图添加标记引导线和文字,你可以使用 `geo` 组件中的 `itemStyle` 属性来设置标记的样式,使用 `series` 组件中的 `markLine` 属性来设置引导线的样式,使用 `series` 组件中的 `label` 属性来设置文字的样式。 下面是一个简单的例子,展示如何在 ECharts 地图添加标记引导线和文字: ```javascript option = { // 设置地图的样式 geo: { map: 'china', label: { emphasis: { show: false } }, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } } }, // 添加标记 series: [{ type: 'scatter', coordinateSystem: 'geo', data: [{ name: '北京', value: [116.46, 39.92] }, { name: '上海', value: [121.48, 31.22] }], symbolSize: 10, label: { normal: { show: true, formatter: function(params) { return params.data.name; }, position: 'right', textStyle: { color: '#fff', fontSize: 14 } } }, itemStyle: { normal: { color: '#F06C00' } } }, { // 添加引导线 type: 'lines', coordinateSystem: 'geo', data: [{ fromName: '北京', toName: '上海', coords: [ [116.46, 39.92], [121.48, 31.22] ] }], symbol: ['none', 'arrow'], symbolSize: 10, lineStyle: { normal: { color: '#fff', width: 1, opacity: 0.6, curveness: 0.2 } }, // 添加文字 label: { normal: { show: true, formatter: function(params) { return params.data.fromName + ' -> ' + params.data.toName; }, position: 'middle', textStyle: { color: '#fff', fontSize: 14 } } } }] }; ``` 在上面的例子中,我们首先设置了地图的样式,然后添加了两个标记:北京和上海。接着,我们使用 `lines` 类型的系列添加了一条从北京到上海的引导线,并在引导线中间添加了文字,文字内容为“北京 -> 上海”。 你可以根据自己的需求,调整标记、引导线和文字的样式和位置。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值