echarts - 地图Map

安装echarts

npm install echarts

下载china.js

链接: https://pan.baidu.com/s/1DAmhOEQxZTHzVHPZc7aBsw 提取码: bin8

地图使用

引用 echarts 和china.js，并配置地图数据 （一定要设置宽高）

设置地图数据

initEchart(){let dataList = this.dataList;// 设置显示数据(使用随机数制造的假数据)for (let i = 0; i < dataList.length; i++) {dataList[i].value = Math.ceil(Math.random() * 1000 - 1);}// 初始化图例let myChart = echarts.init(document.getElementById("main"));let option = {tooltip: {//数据格式化formatter: function (params, callback) {return (params.seriesName + "
" + params.name + "：" + params.value);},},visualMap: {min: 0,max: 1000,left: "left",top: "bottom",text: ["高", "低"], //取值范围的文字inRange: {color: ["#e0ffff", "blue"], //取值范围的颜色},show: true, //图注},geo: {map: "china", //引入地图数据roam: true, //不开启缩放和平移zoom: 1, //视角缩放比例label: {normal: {show: true,fontSize: "10",color: "rgba(0,0,0,0.7)",},},itemStyle: {normal: {borderColor: "rgba(0, 0, 0, 0.2)",},emphasis: { //高亮的显示设置areaColor: "skyblue", //鼠标选择区域颜色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},series: [{name: "省份",type: "map",geoIndex: 0,data: this.dataList,},],};myChart.setOption(option);// 添加配置到echarts
}

如上地图已经可以正常显示

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！