echarts 中国地图只显示图标鼠标经过显示信息

<template>
    <div>
        <div class="map-box">
            <div id="china_map_box">
                <div id="china_map"></div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import '../../../node_modules/echarts/map/js/china';

export default {
    data() {
        return {
            dataList2: [
                { name: '深圳', value: [113.88308, 22.55329], weidu: 116.397128, jingdu: 112.98626, orderNum: 1, clientNum: 2 },
                { name: '永州', value: [111.59244, 26.46098], weidu: 116.397128, jingdu: 112.98626, orderNum: 1, clientNum: 2 },
                { name: '长沙', value: [116.397128, 28.25591], weidu: 116.397128, jingdu: 112.98626, orderNum: 1, clientNum: 2 }
            ],
            // 指定图表的配置项和数据
            option2: {
                tooltip: {
                    show: false
                },
                // visualMap: {
                //   //左下角的渐变颜色条
                //   min: 0,
                //   max: 30,
                //   left: "left",
                //   top: "bottom",
                //   text: ["极高", "无数据"],
                //   inRange: {
                //     color: ["#e0ffff", "#006edd"],
                //   },
                //   show: true,
                // },
                geo: {
                    map: 'china',
                    roam: false, // 一定要关闭拖拽
                    zoom: 1.23,
                    center: [105, 36], // 调整地图位置
                    label: {
                        normal: {
                            show: false, //关闭省份名展示
                            fontSize: '10',
                            color: 'rgba(0,0,0,0.7)'
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#77B0FF',
                            borderColor: '#fff',
                            borderWidth: 1 //设置外层边框
                        },
                        emphasis: {
                            areaColor: '#1677FE',
                            borderWidth: '#fff' //设置外层边框
                        }
                    }
                },
                series: [
                    {
                        type: 'map',
                        map: 'china',
                        roam: false,
                        mapType: 'china',
                        zoom: 1.23,
                        center: [105, 36],
                        // geoIndex: 1,
                        // aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#77B0FF',
                                borderColor: '#fff',
                                borderWidth: 0.5
                            },
                            emphasis: {
                                areaColor: '#1677FE',
                                borderColor: '#fff',
                                borderWidth: 0.5
                            }
                        },
                        data: this.dataList
                    },
                    // 普通效果
                    // {
                    //     name: '',
                    //     type: 'scatter',
                    //     coordinateSystem: 'geo',

                    //     data: this.dataList,
                    //     symbol: 'circle',
                    //     symbolSize: 10,
                    //     hoverSymbolSize: 12,
                    //     tooltip: {
                    //         // trigger: "axis", //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
                    //         backgroundColor: '#FFF', //提示框浮层的背景颜色。
                    //         textStyle: {
                    //             color: '#505363'
                    //         },
                    //         extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);',
                    //         axisPointer: {
                    //             type: 'none'
                    //         },
                    //         padding: [10, 15],
                    //         formatter(value) {
                    //             return (
                    //                 value.data.name +
                    //                 '<br/>' +
                    //                 '订单 ' +
                    //                 ': ' +
                    //                 value.data.orderNum +
                    //                 '(个)' +
                    //                 '<br/>' +
                    //                 '客户 ' +
                    //                 ': ' +
                    //                 value.data.clientNum +
                    //                 '(人)'
                    //             );
                    //         },
                    //         show: true
                    //     },
                    //     encode: {
                    //         value: 2
                    //     },
                    //     label: {
                    //         formatter: '{b}',
                    //         position: 'right',
                    //         show: false
                    //     },
                    //     itemStyle: {
                    //         color: '#ED691E'
                    //     },
                    //     emphasis: {
                    //         label: {
                    //             show: false
                    //         }
                    //     }
                    // }
                    {
                        // 涟漪效果
                        name: 'Top 6',
                        type: 'effectScatter',
                        coordinateSystem: 'geo', // 该系列使用的坐标系
                        data: this.dataList,
                        encode: {
                            value: 2 // 可以定义 data 的哪个维度被编码成什么.这里的意思是把data数据的第2项(从0开始)编译为value
                        },
                        showEffectOn: 'render', // 配置何时显示特效
                        rippleEffect: {
                            brushType: 'stroke',
                            color: 'red'
                        },
                              tooltip: {
                            // trigger: "axis", //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
                            backgroundColor: '#FFF', //提示框浮层的背景颜色。
                            textStyle: {
                                color: '#505363'
                            },
                            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);',
                            axisPointer: {
                                type: 'none'
                            },
                            padding: [10, 15],
                            formatter(value) {
                                return (
                                    value.data.name +
                                    '<br/>' +
                                    '订单 ' +
                                    ': ' +
                                    value.data.orderNum +
                                    '(个)' +
                                    '<br/>' +
                                    '客户 ' +
                                    ': ' +
                                    value.data.clientNum +
                                    '(人)'
                                );
                            },
                            show: true
                        },
                        emphasis: {
                            scale: false
                        },
                        label: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(230, 10, 10, 1)',
                            color: 'red'
                        },
                        zlevel: 1
                    }
                ]
            }
        };
    },
    methods: {
        //初始化中国地图
        initEchartMap() {
            let mapDiv = document.getElementById('china_map');
            let myChart = echarts.init(mapDiv);
            myChart.setOption(this.option2);
        },
        //修改echart配制
        setEchartOption() {
            console.log(this.option2);
            this.option2.series[0]['data'] = this.dataList2;
            this.option2.series[1]['data'] = this.dataList2;
        }
    },
    created() {
        this.setEchartOption();
    },
    mounted() {
        this.$nextTick(() => {
            this.initEchartMap();
        });
    }
};
</script>

<style scoped>
.map-box {
    padding: 0px 0px 0px 16px;
    background: #fff;
    height: 323px;
}

#china_map {
    width: 100%;
    height: 273px;
}
</style>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值