echarts常用图表配置一览表

背景缺省地图块颜色visualMap经纬度定点闪烁effectScatter彩色地图的经纬度定点闪烁effectScatter注意geo文件地理名称一致

背景

echarts@5按需加载的时候绘制地图，包括缺省时的地图，有数据时区域块颜色区分的地图，有数据时按经纬度定位闪烁效果的地图，以及世界地图不同区域显示不同颜色

缺省地图

const echarts = require('echarts/lib/echarts') import ChinaGeo from './../geoJSON/china.json' import WorldGeo from './../geoJSON/world.json' import 'echarts/lib/component/geo' import 'echarts/lib/chart/map' /* 绘制空地图 */ drawEmpty () { echarts.registerMap(this.mapType, this.mapType === 'china' ? ChinaGeo : WorldGeo) this.echartsObj = echarts.init(document.getElementById(this.id)) let option = { geo: { map: this.mapType, zoom: 1, roam: false } } this.echartsObj.setOption(option) }

块颜色visualMap

const echarts = require('echarts/lib/echarts') import ChinaGeo from './../geoJSON/china.json' import WorldGeo from './../geoJSON/world.json' import 'echarts/lib/component/geo' import 'echarts/lib/chart/map' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/visualMap' data = [ {name: '四川省', value: 5200}, {name: '河南省', value: 2300}, {name: '黑龙江省', value: 730}, {name: '福建省', value: 330} ] mapType = 'china' // world 为世界地图 /* 绘制图形 */ drawEcharts () { echarts.registerMap(this.mapType, this.mapType === 'china' ? ChinaGeo : WorldGeo) this.echartsObj = echarts.init(document.getElementById(this.id)) let option = { tooltip: { triggerOn: 'mousemove', backgroundColor: '#fff', extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);', padding: [12, 16, 12, 16], textStyle: { color: 'rgba(0,0,0,0.65)' }, formatter: (param) => { if (Number.isNaN(param.value)) { return param.name + '：暂无攻击来源' } else { let result = '<p>'+ param.seriesName + '：' + param.name +'</p>' result += '<p>攻击次数：'+ param.value +'次</p>' return result } } }, visualMap: { itemWidth: 4, min: 0, max: 10000, hoverLink: false, showLabel: true, textStyle: { color: 'rgba(0,0,0,0.65)' }, pieces: [{ gte: 5000, label: '>= 5000', color: '#FF7C32' }, { gte: 1000, lte: 4999, label: '1000 - 4999', color: '#FDCC1A' }, { gte: 500, lte: 999, label: '500 - 999', color: '#5AD7D8' }, { gte: 1, lte: 499, label: '1 - 499', color: '#4174FE' }, { value: 0, color: '#f5f5f5' }] }, geo: { map: this.mapType, zoom: 1, roam: false, // 鼠标滑动放大缩小 itemStyle: { areaColor: '#f5f5f5', borderWidth: '.5', borderColor: '#999' }, emphasis: { itemStyle: { borderWidth: '1', areaColor: '#4168ff', borderColor: '#333', color: '#fff' } } }, series: [{ name: '攻击来源', type: 'map', geoIndex: 0, data: this.data }] } this.echartsObj.setOption(option) }

经纬度定点闪烁effectScatter

const echarts = require('echarts/lib/echarts') import ChinaGeo from './../geoJSON/china.json' import WorldGeo from './../geoJSON/world.json' import 'echarts/lib/component/geo' import 'echarts/lib/chart/effectScatter' import 'echarts/lib/chart/map' import 'echarts/lib/component/tooltip' data = [ {name: '上海', value: [121.4648, 31.2891, 21]}, {name: '广州', value: [113.12244, 23.009505, 19]} ] mapType = 'china' // world 为世界地图 /* 绘制图形 */ drawEcharts () { echarts.registerMap(this.mapType, this.mapType === 'china' ? ChinaGeo : WorldGeo) this.echartsObj = echarts.init(document.getElementById(this.id)) let option = { tooltip: { formatter: (param) => { console.log(param) return 'kkk' } }, geo: { map: this.mapType, zoom: 1, roam: false, // 鼠标滑动放大缩小 itemStyle: { areaColor: '#f5f5f5', borderWidth: '.5', borderColor: '#999' } }, series: [{ type: 'effectScatter', coordinateSystem: 'geo', rippleEffect: { period: 4, brushType: 'stroke' }, symbolSize: 10, itemStyle: { color: 'blue', opacity: 1 }, data: this.data }] } this.echartsObj.setOption(option) }

彩色地图的经纬度定点闪烁effectScatter

const echarts = require('echarts/lib/echarts') import ChinaGeo from './../geoJSON/china.json' import WorldGeo from './../geoJSON/world.json' import 'echarts/lib/component/geo' import 'echarts/lib/chart/effectScatter' import 'echarts/lib/chart/map' import 'echarts/lib/component/tooltip' data = [ {name: '上海', value: [121.4648, 31.2891, 21]}, {name: '广州', value: [113.12244, 23.009505, 19]} ] mapType = 'china' // world 为世界地图 CONST_CHINA_REGION_COLOR = [ { name: '北京市', selected: false, itemStyle: {areaColor: '#cfc5de'} }, { name: '天津市', selected: false, itemStyle: {areaColor: '#f1ebd1'} }, { name: '上海市', selected: false, itemStyle: {areaColor: '#feffdb'} }, { name: '重庆市', selected: false, itemStyle: {areaColor: '#e0cee4'} }, { name: '河北省', selected: false, itemStyle: {areaColor: '#fde8cd'} }, { name: '河南省', selected: false, itemStyle: {areaColor: '#e4f1d7'} }, { name: '云南省', selected: false, itemStyle: {areaColor: '#fffed7'} }, { name: '辽宁省', selected: false, itemStyle: {areaColor: '#e4f1d7'} }, { name: '黑龙江省', selected: false, itemStyle: {areaColor: '#e4f1d7'} }, { name: '湖南省', selected: false, itemStyle: {areaColor: '#fffed7'} }, { name: '安徽省', selected: false, itemStyle: {areaColor: '#fffed8'} }, { name: '山东省', selected: false, itemStyle: {areaColor: '#dccee7'} }, { name: '新疆省', selected: false, itemStyle: {areaColor: '#fffed7'} }, { name: '江苏省', selected: false, itemStyle: {areaColor: '#fce8cd'} }, { name: '浙江省', selected: false, itemStyle: {areaColor: '#ddceeb'} }, { name: '江西省', selected: false, itemStyle: {areaColor: '#e4f1d3'} }, { name: '湖北省', selected: false, itemStyle: {areaColor: '#fde8cd'} }, { name: '广西省', selected: false, itemStyle: {areaColor: '#fde8cd'} }, { name: '甘肃省', selected: false, itemStyle: {areaColor: '#fde8cd'} }, { name: '山西省', selected: false, itemStyle: {areaColor: '#fffdd6'} }, { name: '内蒙古自治区', selected: false, itemStyle: {areaColor: '#ddcfe6'} }, { name: '陕西省', selected: false, itemStyle: {areaColor: '#fad8e9'} }, { name: '吉林省', selected: false, itemStyle: {areaColor: '#fce8cd'} }, { name: '福建省', selected: false, itemStyle: {areaColor: '#fad8e8'} }, { name: '贵州省', selected: false, itemStyle: {areaColor: '#fad8e8'} }, { name: '广东省', selected: false, itemStyle: {areaColor: '#ddcfe8'} }, { name: '青海省', selected: false, itemStyle: {areaColor: '#fad8e9'} }, { name: '西藏自治区', selected: false, itemStyle: {areaColor: '#ddcfe6'} }, { name: '四川省', selected: false, itemStyle: {areaColor: '#e4f1d5'} }, { name: '宁夏回族自治区', selected: false, itemStyle: {areaColor: '#fefcd5'} }, { name: '新疆维吾尔自治区', selected: false, itemStyle: {areaColor: '#fefcd5'} }, { name: '海南省', selected: false, itemStyle: {areaColor: '#fad8e9'} }, { name: '台湾省', selected: false, itemStyle: {areaColor: '#fce8cd'} }, { name: '香港特别行政区', selected: false, itemStyle: {areaColor: '#dc9bbb'} }, { name: '澳门特别行政区', selected: false, itemStyle: {areaColor: '#e0f7cc'} }, { name: '南海诸岛', selected: false, itemStyle: {areaColor: '#dc9bbb'} } ] /* 绘制图形 */ drawEcharts () { echarts.registerMap(this.mapType, this.mapType === 'china' ? ChinaGeo : WorldGeo) this.echartsObj = echarts.init(document.getElementById(this.id)) let option = { tooltip: { formatter: (param) => { console.log(param) return 'kkk' } }, geo: { map: this.mapType, zoom: 1, roam: false, // 鼠标滑动放大缩小 itemStyle: { areaColor: '#f5f5f5', borderWidth: '.5', borderColor: '#999' } }, series: [{ type: 'map', map: this.mapType, itemStyle: { areaColor: '#f5f5f5', borderWidth: '.5', borderColor: '#999' }, data: this.mapType === 'china' ? CONST_CHINA_REGION_COLOR : CONST_WORLD_REGION_COLOR // 彩色地图绘制 }, { type: 'effectScatter', coordinateSystem: 'geo', rippleEffect: { period: 4, brushType: 'stroke' }, symbolSize: 10, itemStyle: { color: 'blue', opacity: 1 }, data: this.data }] } this.echartsObj.setOption(option) }

注意

geo文件

V5移除了内置的geoJSON（原先在echarts/map文件夹下），这里引用的中国和世界地图的geoJSON是我从老的版本中复制出来的

git clone https://gitee.com/potatocoder/geo_json.git

地理名称一致

变量CONST_CHINA_REGION_COLOR中的地理位置需要跟geoJSON中的地理名称完全对应，否则也会匹配不到具体的地理位置