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坐标],...}

转载于:https://www.cnblogs.com/cjj123456/p/11192845.html