使用eCharts实现中国地图的散点图

前提条件需引入china.js文件

具体代码：

function getMapChart() {// 初始化echarts实例var myEcharts = echarts.init(document.getElementById("map-chart"));var option = {geo: {map: 'china',label: {normal: {show: false, //显示省份标签},emphasis: { //对应的鼠标悬浮效果show: false,textStyle: {color: "#fff"}}},roam: false,//是否开启鼠标缩放和平移漫游itemStyle: {//地图区域的多边形 图形样式normal: {//是图形在默认状态下的样式borderWidth: .5, //区域边框宽度borderColor: '#fff', //区域边框颜色areaColor: "#3EABFF", //区域颜色},emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时borderWidth: .5,borderColor: '#fff',areaColor: "#0078FF",label: { show: true }}},aspectScale: 0.75,zoom: 1.2,//地图缩放比例,默认为1},title: {  //标题样式text: '',x: "center",textStyle: {fontSize: 18,color: "#fff"},},tooltip: {  //这里设置提示框show: false,trigger: 'item',  //数据项图形触发backgroundColor: "#fff",  //提示框浮层的背景颜色。},visualMap: {//视觉映射组件show: false,top: 'center',left: 'left',min: 10,max: 500000,text: ['High', 'Low'],realtime: false,  //拖拽时，是否实时更新calculable: true,  //是否显示拖拽用的手柄inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},series: [{name: '',type: 'effectScatter', // series图表类型coordinateSystem: 'geo', // series坐标系类型symbolSize: function (val) {//设置散点大小return val[2] / (val[2] / 12)},data: [{name: '北京',    // 数据项名称，在这里指地区名称value: [        // 数据项值116.46,     // 地理坐标，经度39.92,      // 地理坐标，纬度340         // 北京地区的数值],tooltip: {show: true,trigger: 'item',  //数据项图形触发backgroundColor: "#fff",  //提示框浮层的背景颜色。borderColor: 'rgba(0,0,0,0)',formatter: function (params) {//return 'Top1<br><br>{b}：' + params,},},itemStyle: {normal: {color: '#0041D2',}},label: {normal: {show: true, //显示省份标签position: 'right',textStyle: {color: "#0041D2",//标签字体颜色},formatter: '{b}'},},rippleEffect: {//涟漪特效相关配置brushType: 'stroke'//波纹的绘制方式，可选 'stroke' 和 'fill'},}, { name: '海门', value: [121.15, 31.89, 90] },{ name: '鄂尔多斯', value: [109.781327, 39.608266, 120] },{ name: '招远', value: [120.38, 37.35, 142] },]}]};// 使用刚指定的配置项和数据显示图表。myEcharts.setOption(option);}

展示效果：

使用eCharts实现中国地图的散点图相关推荐

echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
echarts实现中国地图各省背景根据数值大小变化的方法
很多人不清楚中国地图要怎么实现,其实 echarts 已经为我们封装好了,只要我们配置好各省数据就可以快捷实现了. 首先我们先来实现中国地图: 中国地图的实现 (1)引入 echarts 及中国地图 ...
Echarts实现——中国地图
Echarts实现--中国地图如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
Echarts关于中国地图的china.js文件下载
原文出处:https://blog.csdn.net/weixin_36413887/article/details/80019625 早上用到Echarts的中国地图map时,需要用到china.j ...
echarts：中国地图实现
安装 npm install echarts --save 把chinaMap对应的js文件放到echarts目录下面,保证引用路径的正确性. 直接用npm install的map文件似乎用不了,可以 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
Echarts实现中国地图完整示例
Echarts实现中国地图完整示例及js文件有问题大家可以留言或私信我公司是有一个产品,销量遍布全国. 近期要求制作一个***中国地图来显示所有省份的销量***,要有一个***滚动显示每个省的销量 ...
vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...

使用eCharts实现中国地图的散点图

使用eCharts实现中国地图的散点图相关推荐

最新文章

热门文章