ECharts（中国地图篇）的使用

一、
网址：            https://www.cnblogs.com/ldlx-mars/p/9242250.html
点击：            无区域显示的中国地图
下载文件：        必须引入china.js

网址：            https://www.cnblogs.com/xianwen/p/6045454.html
点击：            高亮颜色中国地图（有区域显示）
下载文件：       必须引入china.js

 

安装：npm install echart --saver

组件必须引入：

import echarts from 'echarts'

import '../../node_modules/echarts/map/js/china.js'

 

二、代码示例

<template>
       <div id="chart_example"></div>
</template>
<style lang="stylus" scoped>
   #chart_example {
    width: 50%;
    height: 500px;
    border: 1px solid red;
    margin: 0 auto;
  }



</style>
<script>
import $ from 'jquery'  
import echarts from 'echarts'
import '../../node_modules/echarts/map/js/china.js'



export default {
           data(){
               return{



               }
           },
           methods:{



           },
           mounted(){
//无区域的地图显示
 let myChart = echarts.init(document.getElementById('chart_example'));
 let option = {
 series: [{
 type: 'map',
                //       // mapType: 'china'// mapType或者map都可以
 map: 'china',
 }]
 };
 myChart.setOption(option);

//无区域的地图显示


//有区域的地图显示

     var myChart = echarts.init(document.getElementById('chart_example'));
            var option = {
                tooltip: {
//                    show: false //不显示提示标签
                    formatter: '{b}', //提示标签格式
                    backgroundColor:"#ff7f50",//提示标签背景颜色
                    textStyle:{color:"#fff"} //提示标签字体颜色
                },
                series: [{
                    type: 'map',
                    mapType: 'china',
                    label: {
                        normal: {
                            show: true,//显示省份标签
                            textStyle:{color:"#c71585"}//省份标签字体颜色
                        },    
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,
                            textStyle:{color:"#800080"}
                        } 
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: .5,//区域边框宽度
                            borderColor: '#009fe8',//区域边框颜色
                            areaColor:"#ffefd5",//区域颜色
                        },
                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor:"#ffdead",
                        }
                    },
                    data:[
                        {name:'福建', selected:true}//福建为选中状态
                    ]
                }],
            };
 
            myChart.setOption(option);
            myChart.on('mouseover', function (params) {
                var dataIndex = params.dataIndex;
                console.log(params);
            });
    }       
}
</script>

 

三、效果图

四、修改省份标签位置：
打开china.js文件，修改"properties":{"cp":[X坐标,Y坐标],...}