vue中[email protected]バージョン、地図の使用、

vue中[email protected]バージョン、地図の使用、
ピットを避け、親測4.9バージョンは正常で、5.0バージョンは公式に地図データとmapフォルダを削除したためサポートされていません.
echartsのインストールnpm install [email protected]
メールでjs書き込み

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

マップマップコンポーネント

<template>
    <div class="chinaecharts">
        <div id="mapChart" ref="mapChart" ></div>
    </div>
</template>
<script>
export default {
     
    name: 'ChinaEcharts',
    methods: {
     
        mapFn(){
     
            //       dom，   echarts  
            // var mapChart = this.$echarts.init(this.$refs.mapChart);
            var mapChart = this.$echarts.init(document.getElementById('mapChart'));
            mapChart.setOption({
     
                backgroundColor: '', //    
                title: {
     
                    text: '     ',
                    subtext: '     ',
                    color: '#fff',
                    fontSize:'14px',
                    // sublink: 'http://www.pm25.in',
                    x:'left',
                },
                //       ，    『    』，             （    ）。
                visualMap: {
     
                    orient: 'horizontal', 
                    text:[' ',' '],
                    min: 0, //   
                    max: 600, //   
                    calculable: false, //          （           ）。
                    inRange: {
     
                        color: ['#0F9D90', '#39B1A6', '#95DCD7', '#AEE7E4', '#D7FBFA'] //  
                    },
                    textStyle: {
     
                        color: '#000'
                    },
                },
                //    ，    
                tooltip:{
     
                    show:true, //          
                    trigger: 'item', //    
                    formatter:'{b}-    ：{c}'
                },
                //       ，    
                series:[
                    {
     
                        name:'  ',
                        type: 'map',  //    
                        map: 'china', //    。
                        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: '   ',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)}
                        ],
                        itemStyle: {
      //             。
                            emphasis:{
      //        
                                label:{
     
                                    show:true,
                                }
                            }
                        },
                        zoom:1,//    
                        label: {
       //        ，              
                            show:true,
                        },
                    },
                    {
     
                        type:'scatter',
                        showEffectOn: 'render',//          
                        coordinateSystem:'geo',//         
                        symbolSize:10,//     
                        data:[
                            {
     name: '  ', value: [111.3,30.7,130]},
                        ],
                        zlevel:99999
                    },
                ],
            }),
            window.addEventListener('resize', () => {
     
                //     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)