快捷導(dǎo)航

vue中echarts@4.9版本,地圖的使用方式

更新時(shí)間：2024年02月29日 08:52:21 作者：廣州第22號(hào)吳彥祖

這篇文章主要介紹了vue中echarts@4.9版本地圖的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue echarts@4.9版本地圖的使用

避免進(jìn)坑，親測(cè)4.9版本正常，5.0版本不支持因?yàn)楣俜揭瞥说貓D數(shù)據(jù)和map文件夾，

安裝echarts

npm install echarts@4.9.0

在main.js寫(xiě)入

import echarts from 'echarts'
import 'echarts/map/js/china' 
Vue.prototype.$echarts = echarts

map地圖組件

<template>
    <div class="chinaecharts">
        <div id="mapChart" ref="mapChart" ></div>
    </div>
</template>
<script>
export default {
    name: 'ChinaEcharts',
    methods: {
        mapFn(){
            // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
            // var mapChart = this.$echarts.init(this.$refs.mapChart);
            var mapChart = this.$echarts.init(document.getElementById('mapChart'));
            mapChart.setOption({
                backgroundColor: '', //背景顏色
                title: {
                    text: '你好啊中國(guó)',
                    subtext: '我來(lái)自中國(guó)',
                    color: '#fff',
                    fontSize:'14px',
                    // sublink: 'http://www.pm25.in',
                    x:'left',
                },
                //是視覺(jué)映射組件，用于進(jìn)行『視覺(jué)編碼』，也就是將數(shù)據(jù)映射到視覺(jué)元素（視覺(jué)通道）。
                visualMap: {
                    orient: 'horizontal', 
                    text:['低','高'],
                    min: 0, //最小值
                    max: 600, //最大值
                    calculable: false, //是否顯示拖拽用的手柄（手柄能拖拽調(diào)整選中范圍）。
                    inRange: {
                        color: ['#0F9D90', '#39B1A6', '#95DCD7', '#AEE7E4', '#D7FBFA'] //顏色
                    },
                    textStyle: {
                        color: '#000'
                    },
                },
                // 提示框，鼠標(biāo)移入
                tooltip:{
                    show:true, //鼠標(biāo)移入是否觸發(fā)數(shù)據(jù)
                    trigger: 'item', //出發(fā)方式
                    formatter:'-銷(xiāo)售數(shù)量：{c}'
                },
                //配置地圖的數(shù)據(jù)，并且顯示
                series:[
                    {
                        name:'地圖',
                        type: 'map',  //地圖種類(lèi)
                        map: 'china', //地圖類(lèi)型。
                        data:[
                            {name: '北京',value: Math.round(Math.random()*500)},
                            {name: '天津',value: Math.round(Math.random()*500)},
                            {name: '上海',value: Math.round(Math.random()*500)},
                            {name: '重慶',value: Math.round(Math.random()*500)},
                            {name: '河北',value: Math.round(Math.random()*500)},
                            {name: '河南',value: Math.round(Math.random()*500)},
                            {name: '云南',value: Math.round(Math.random()*500)},
                            {name: '遼寧',value: Math.round(Math.random()*500)},
                            {name: '黑龍江',value: Math.round(Math.random()*500)},
                            {name: '湖南',value: Math.round(Math.random()*500)},
                            {name: '安徽',value: Math.round(Math.random()*500)},
                            {name: '山東',value: Math.round(Math.random()*500)},
                            {name: '新疆',value: Math.round(Math.random()*500)},
                            {name: '江蘇',value: Math.round(Math.random()*500)},
                            {name: '浙江',value: Math.round(Math.random()*500)},
                            {name: '江西',value: Math.round(Math.random()*500)},
                            {name: '湖北',value: Math.round(Math.random()*500)},
                            {name: '廣西',value: Math.round(Math.random()*500)},
                            {name: '甘肅',value: Math.round(Math.random()*500)},
                            {name: '山西',value: Math.round(Math.random()*500)},
                            {name: '內(nèi)蒙古',value: Math.round(Math.random()*500)},
                            {name: '陜西',value: Math.round(Math.random()*500)},
                            {name: '吉林',value: Math.round(Math.random()*500)},
                            {name: '福建',value: Math.round(Math.random()*500)},
                            {name: '貴州',value: Math.round(Math.random()*500)},
                            {name: '廣東',value: Math.round(Math.random()*500)},
                            {name: '青海',value: Math.round(Math.random()*500)},
                            {name: '西藏',value: Math.round(Math.random()*500)},
                            {name: '四川',value: Math.round(Math.random()*500)},
                            {name: '寧夏',value: Math.round(Math.random()*500)},
                            {name: '海南',value: Math.round(Math.random()*500)},
                            {name: '臺(tái)灣',value: Math.round(Math.random()*500)},
                            {name: '香港',value: Math.round(Math.random()*500)},
                            {name: '澳門(mén)',value: Math.round(Math.random()*500)},
                            {name: '南海諸島',value: Math.round(Math.random()*500)}
                        ],
                        itemStyle: { //地圖區(qū)域的多邊形 圖形樣式。
                            emphasis:{ //高亮狀態(tài)下的樣試
                                label:{
                                    show:true,
                                }
                            }
                        },
                        zoom:1,//放大比例
                        label: {  //圖形上的文本標(biāo)簽，可用于說(shuō)明圖形的一些數(shù)據(jù)信息
                            show:true,
                        },
                    },
                    {
                        type:'scatter',
                        showEffectOn: 'render',//配置什么時(shí)候顯示特效
                        coordinateSystem:'geo',//該系列使用的坐標(biāo)系
                        symbolSize:10,//標(biāo)記的大小
                        data:[
                            {name: '宜昌', value: [111.3,30.7,130]},
                        ],
                        zlevel:99999
                    },
                ],
            }),
            window.addEventListener('resize', () => {
                // 自動(dòng)渲染echarts
                mapChart.resize();
            })
        }
    },
    mounted () {
        this.mapFn();
    }
}
</script>
<style scoped>
.chinaecharts {
    width: 100%;
    height: 100%;
}
#mapChart {
    width: 100%;
    height: 100%;
}
</style>

然后按組件引入即可使用效果如下

echarts配置：(https://echarts.apache.org/zh/api.html#echarts)