Echarts地图
大约 46 分钟
Echarts地图
5.x版本后没有行政区域规划的json文件，需要自己去下载 例如: datav
echarts.registerMap(name,GeoJSON);//其中name需要和option.geo.map保持一致 例如：echarts.registerMap('安徽', ahnhuiJOSON); option.geo.map='安徽'
其中echarts：使用官网提供的数据会出现 【echarts 地图使用的是5.5.0 版本，现在本地运行可以，但是编译后就不行了，提示Invalid geoJson format Cannot set property UTF8Encoding of [object Module] which has only a getter】 当时解决的办法是从datav重新下载json文件 然后项目中引入 import ahnhuiJOSON from '@/xxx/xxx/anhui.json'
echarts-map
https://blog.csdn.net/sleepwalker_1992/article/details/126959198
参考网址：https://www.jb51.net/article/265003.htm#_label2
https://blog.csdn.net/SkelleBest/article/details/121204097
https://www.jb51.net/article/265003.htm
https://blog.csdn.net/atongmu2017/article/details/84386447
https://www.jb51.net/article/263807.htm
https://www.modb.pro/db/467602
http://events.jianshu.io/p/fab569e48779
https://www.jianshu.com/p/028525cbd080
https://juejin.cn/post/6844904170512891917
https://blog.csdn.net/weixin_43848576/article/details/121968095
https://blog.csdn.net/wupuyi/article/details/102454593
地图数据获取：
自定义图标：https://blog.csdn.net/qq_39759115/article/details/80506194 描边;https://www.51cto.com/article/706388.html
https://blog.csdn.net/qq_36437172/article/details/106099547
1. 安装
npm install echarts --save ## 最新版本
### 之前版本
npm install echarts@4.8.0 --save
### 卸载echarts
npm uninstall echarts
Echarts 4.x
import echarts from 'echarts';
Echarts 5.x
import * as echarts from 'echarts'
如果要挂载全局
main.js 中添加
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
2. 基础地图绘制（以中国地图为例）
<template>
<div ref="mapBar" class="map-class"></div>
</template>
<script>
import * as echarts from 'echarts'
import china from '@/plugin/map/china.json'
export default {
name: 'map-geo',
data () {
return {
chartData: [{name:'北京',value:8888},{name:'上海',value:10000},{name:'天津',value:7777},{name:'重庆',value:10001},{name:'黑龙江',value:8989},{name:'辽宁',value:6666},{name:'吉林',value:5555},{name:'河北',value:4656},{name:'河南',value:888},{name:'湖北',value:9999},{name:'湖南',value:9000},{name:'山东',value:3500},{name:'山西',value:1888},{name:'陕西',value:1600},{name:'安徽',value:9000},{name:'浙江',value:3840},{name:'江苏',value:7000},{name:'福建',value:1000},{name:'广东',value:2000},{name:'海南',value:3000},{name:'四川',value:1600},{name:'云南',value:800},{name:'贵州',value:400},{name:'青海',value:6669},{name:'甘肃',value:5555},{name:'江西',value:666},{name:'台湾',value:6666},{name:'内蒙古',value:6000},{name:'宁夏',value:4900},{name:'新疆',value:500},{name:'西藏',value:8600},{name:'广西',value:5000},{name:'香港',value:1000},{name:'澳门',value:600}],
options: {
tooltip: {
triggerOn: 'mousemove',
formatter: function (e) {
return e.name + '：' + e.value
}
},
// geo为地理坐标系组件，用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
geo: {
map: 'china' // 使用 registerMap 注册的地图名称。
},
series: [
{
name: '随机数',
type: 'map',
geoIndex: 0,
data: []
}
]
}
}
},
mounted () {
this.init()
},
methods: {
init () {
this.chart = echarts.init(this.$refs.mapBar)
// 使用数据 geoJson 注册名为 'china' 的地图
echarts.registerMap('china', china)
// 要渲染的数据
this.options.series[0].data = this.chartData
this.$nextTick(() => {
this.chart.setOption(this.options)
})
}
}
}
</script>
<style scoped>
.map-class {
width: 65%;
height: 80vh;
border: 1px solid #ccc;
}
</style>
3. 地理坐标系geo组件设置
地图实现缩放 靠：
需要保证 option.geo.map = name 中的 name 和echarts.registerMap(name, mapJson) 中的name对应上
3.1 鼠标缩放和平移
缩放地图和平移，只需开启 roam 属性
geo: {
map: 'china',
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
zoom: 1, // 当前视角的缩放比例
scaleLimit: { // 滚轮缩放的极限控制，默认的缩放为1
min: 1, // 最小的缩放值
max: 10 // 最大的缩放值
},
aspectScale: 0.75, // 长宽比
center: [104.114129, 37.550339], // 地图中心经纬度。
},
3.2 组件在容器中的位置
// 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。若值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
top: 'middle',
// 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
// bottom: '20',
// 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。若值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
left: 'center',
// 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
// right: '20',
3.3 图形上的文本标签
// 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label: {
show: true, // 是否显示标签。
fontSize: '11',
color: 'rgba(0,0,0,0.7)',
},
3.4 地图区域的多边形 图形样式
// 地图区域的多边形 图形样式。
itemStyle: {
borderColor: 'rgba(255, 0, 0, 0.2)', // 图形的描边颜色。
borderWidth: 1, // 描边线宽。为 0 时无描边。
borderType: 'solid', // 描边类型。
},
3.5 高亮状态下的多边形和标签样式
// 高亮状态下的多边形和标签样式。
emphasis: {
focus: 'none', //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。'none' 不淡出其它图形，默认使用该配置。'self' 聚焦当前高亮图形，淡出其它图形。
// 高亮状态下文本标签
label: {
color: '#ffffff',
},
// 高亮状态下图形样式
itemStyle: {
areaColor: '#409eff', // 高亮区域的颜色。
color: '#67c23a', // 高亮区域的颜色。areaColor和color都设置，高亮区域渲染areaColor的值
borderColor: 'rgba(0, 0, 0, 0.8)', // 图形的描边颜色。
borderWidth: 3, // 描边线宽。为 0 时无描边。
borderType: 'dotted', // 描边类型。
},
},
3.6 选中状态下的多边形和标签样式
selectedMode: 'single', // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
// 选中状态下的多边形和标签样式。
select: {
disabled: false, // 是否可以被选中。在开启selectedMode的时候有效，可以用于关闭部分数据。
// 选中区域文本标签
label: {
color: '#ff00ff',
},
// 高亮状态下图形样式
itemStyle: {
areaColor: '#67c23a', // 高亮区域的颜色。
borderColor: 'rgba(0, 0, 0,1)', // 图形的描边颜色。
borderWidth: 4, // 描边线宽。为 0 时无描边。
borderType: 'dashed', // 描边类型。
},
},
3.7 在地图中对特定的区域配置样式
// 在地图中对特定的区域配置样式
regions: [{
name: '河南', // 地图区域的名称
itemStyle: {
borderColor: 'rgba(0, 0, 0,1)', // 图形的描边颜色。
borderWidth: 4, // 描边线宽。为 0 时无描边。
borderType: 'dashed', // 描边类型。
},
}],
3.8 更多配置可查看Echarts官网配置项geo
绘制效果：
4. 案例
4.1 案例1
option 配置
效果图
option = {
// 背景颜色
backgroundColor: 'rgba(0,0,0,1)', // '#404a59',
// 提示浮窗样式
tooltip: {
show: true,
trigger: 'item',
alwaysShowContent: false,
backgroundColor: '#0C121C',
borderColor: 'rgba(0, 0, 0, 0.16);',
hideDelay: 100,
triggerOn: 'mousemove',
enterable: true,
textStyle: {
color: '#DADADA',
fontSize: '12',
width: 20,
height: 30,
overflow: 'break'
},
showDelay: 100
},
// 地图配置
geo: {
map: 'china', // 初始展示的是全国
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
zoom: 1, // 当前视角的缩放比例
scaleLimit: { // 滚轮缩放的极限控制，默认的缩放为1
min: 1, // 最小的缩放值
max: 10 // 最大的缩放值
},
center: [107.114129, 37.550339], // 地图中心经纬度。
// 地图上字体颜色
label: {
// 通常状态下的样式
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
// 鼠标放上去的样式
emphasis: {
textStyle: {
color: '#fff'
}
}
},
// 地图区域的样式设置
itemStyle: {
normal: {
opacity: 1, // 图形的不透明度 [ default: 1 ]
borderColor: 'rgba(147, 235, 248, .3)', // 描边颜色
borderWidth: 0.5, // 描边线宽。为 0 时无描边。
// borderType: 'dashed', // 描边类型。dashed-虚线
// areaColor: '#67c23a', // 高亮区域的颜色。
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
// 地图区域填充颜色
colorStops: [
{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(147, 235, 248, .9)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
},
// 阴影效果，可以临时 作为 实现3D，但是不能添加 shadowBlur 属性，否则变为 内阴影
shadowColor: 'rgba(0,0,0,.4)', // 'rgba(128, 217, 248, 1)',
shadowOffsetX: 3,
shadowOffsetY: 3
// shadowBlur: 10
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
}
},
// 下面的是 数据 不影响地图加载
series: [
// 数据系列
{
// 设置为分散点
type: 'scatter',
// series坐标系类型
coordinateSystem: 'geo',
// 设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbol: 'pin',
// //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
symbolSize: [40, 40],
// 气泡字体设置
label: {
normal: {
show: true, // 是否显示
textStyle: {
color: '#fff', // 字体颜色
fontSize: 8 // 字体大小
},
// 返回气泡数据
// formatter: function (e, t, n) {
// const data = e.data
// const context = `
// <div>
// <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
// <p class="tooltip_style"><span class="tooltip_left">成果总数</span><span class="tooltip_right">${data.value}</span></p>
// </div>
// `
// return context
// },
formatter (value) {
return value.data.value[2]
}
}
},
itemStyle: {
normal: {
color: '#1E90FF' // 标志颜色
}
},
// 给区域赋值
data: [], // this.convertData(this.data),
showEffectOn: 'render', // 配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
rippleEffect: {
// 涟漪特效相关配置。
brushType: 'stroke' // 波纹的绘制方式，可选 'stroke' 和 'fill'
},
hoverAnimation: true, // 是否开启鼠标 hover 的提示动画效果。
zlevel: 1 // 所属图形的 zlevel 值
}
]
}
4.2 案例2
<template>
<div class="map-wrap pr">
<!--头部标题，用相对定义，脱离文档流-->
<div class="map-head pa"></div>
<!--地图容器-->
<div id="main" class="map-content"></div>
<!--图例控制-->
<div class="map-legend pa">
<div @click="gotoback('china')" class="img-wrap" :class="{'check':chooseCity.length >= 2}"><img
src="../../assets/imgs/map/cityicon/china.png" class="whp100"></div>
<div @click="gotoback('city')" class="img-wrap" :class="{'check':chooseCity.length >= 3}"><img
:src="cityIcon" class="whp100"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getMap, cityIconMap } from '@/plugins/utils/map/maputils'
import { option, seriesData } from './options/mapOption'
// import 'echarts-gl'
export default {
name: 'echartsMap',
data () {
return {
myChart: '',
areaCenter: [], // 存储 区域中心点（全国级-每个省会中心点，省级-每个市中心点）
chooseCity: [], // 当前选择的 图形-目前主要是用于 区分 全国，省，市（3级结构）
imgLegend: [],
cityIcon: '',
colorArr: ['#4ab2e5', '#4fb6d2', '#52b9c7', '#5abead', '#f34e2b', '#f56321', '#f56f1c', '#f58414', '#f58f0e', '#f5a305', '#dfae10', '#a6c62c', '#96cc34'],
// 考虑 现在统计分为
projectData: {
北京: 11,
天津: 12,
河北: 14,
山西: 17,
内蒙古: 43,
辽宁: 456,
吉林: 34,
黑龙江: 16,
上海: 12,
江苏: 78,
浙江: 77,
安徽: 88,
福建: 99,
江西: 43,
山东: 32,
河南: 11,
湖北: 1,
湖南: 12,
广东: 12,
广西: 3,
海南: 4,
重庆: 5,
四川: 8,
贵州: 9,
云南: 12,
西藏: 12,
陕西: 12,
甘肃: 12,
青海: 12,
宁夏: 12,
新疆: 12,
台湾: 12,
香港: 12,
澳门: 14,
合肥市: 12,
蚌埠市: 12,
淮南市: 12,
马鞍山市: 12,
淮北市: 12,
铜陵市: 12,
安庆市: 12,
黄山市: 12,
滁州市: 12,
阜阳市: 12,
宿州市: 12,
六安市: 12,
亳州市: 12,
池州市: 12,
宣城市: 16
}
}
},
mounted () {
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById('main'))
this.createMap()
},
methods: {
createMap () {
// 地图注册，第一个参数的名字必须和option.geo.map一致
// echarts.registerMap('chinaOutline', chinaOutline)// 需要和 option.geo.map = 'mapName,' 对应上
this.updateMap('中国')
// 创建 监听事件
this.listenerClick()
this.listenerZoom()
},
mapClickCallback (res) {
console.log('地图点击事件')
console.log(res)
if (res.componentType === 'effectScatter') {
// 考虑后期 点击地图覆盖物，需要进行交互 dataIndex
return
}
// 需要考虑当前层级
if (this.chooseCity.length >= 3) { // 说明当前 已经是第三层级了，无法再下钻了
return false
}
this.updateMap(res.name)
},
/**
* 目前数据全部迁移到 maputils.js 中 通过 getMap 进行 数据和名称的获取
* 主要是 echarts.registerMap('china', china) 注册地图
* 改为 const [mapName, mapJson] = getMap(name);
* echarts.registerMap(mapName, mapJson)
* @param name: 点击地图，获取的是城市 的 中文名称
* @param type：计划作为 地图三级 控制 全国、省、市
*/
updateMap (name, type) {
const [mapName, mapJson] = getMap(name)
this.showLegend(name, type)
this.getAreaCenter(mapJson) // 获取地图区域中心点，全国，和省下
// option.geo.zoom = 0.8 // 后期可能需要考虑 低图层 需要进行缩放
// 就像上面提到的，这里必须要和注册地图时的名字一致
option.geo[0].map = mapName
option.geo[0].center = ''
option.geo[1].map = mapName
option.geo[1].center = ''
// 注册地图
echarts.registerMap(mapName, mapJson)// 需要和 option.geo.map = 'mapName,' 对应上
// 重新渲染
option.series[0].data = this.areaCenter
// option.series[1].data = this.areaCenter
// option.series[2].data = this.areaCenter
this.myChart.setOption(option)
},
showLegend (name, type) {
if (type === 'china') {
this.chooseCity = ['中国']
return
}
if (type === 'city') {
this.chooseCity.pop()
return
}
this.chooseCity.push(name)
if (this.chooseCity.length === 2) { // 需要显示全国
this.imgLegend.push(cityIconMap[this.chooseCity[0]])
}
if (this.chooseCity.length === 3) { // 需要显示全国和 当前城市
this.cityIcon = cityIconMap[this.chooseCity[1]]
}
},
gotoback (type) {
let name = '中国'
if (type === 'city') {
name = this.chooseCity[1]
}
this.updateMap(name, type)
},
// 给每个地区赋值 -- 待删除
convertData (data) {
// 定义一个数组
var res = []
// 循环遍历每个区域值
for (var i = 0; i < data.length; i++) {
// 获取坐标
var geoCoord = this.geoCoordMap[data[i].name]
// 判断是否有坐标
if (geoCoord) {
// 往数组里设置值
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
},
// 监听单击事件
listenerClick () {
this.myChart.on('click', res => {
this.mapClickCallback(res)
})
},
// 地图缩放监听(后期如果感觉缩放和拖拽，导致地图卡顿影响使用，讲 listenerZoom 方法注释掉)
listenerZoom () {
this.myChart.on('georoam', params => { // 这里是bmaproam方法，其余都一样
var options = this.myChart.getOption() // 获得option对象
// 捕捉到缩放时
if (options && options.geo[0].zoom && options.geo[0].zoom != null) {
options.geo[1].zoom = options.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
}
// 捕捉到拖曳时
if (options && options.geo[0].center && options.geo[0].center != null) {
options.geo[1].center = options.geo[0].center // 下层的geo的中心位置随着上层geo一起改变
}
this.myChart.setOption(options) // 设置option
})
},
// 获取地图区域中心点，全国，和省下
getAreaCenter (data) {
this.areaCenter = []
if (data && !this.commonUtil.isEmptyObj(data) && data.features) {
const arr = []// 存储区域中心点信息
// const arr2 = []
data.features.forEach(({ properties }) => { // 对象解构 提取 存储参数的 properties 对象 获取code
this.getProjectData(properties, arr)
// arr2.push(properties.name)
})
this.getColor(arr)
this.areaCenter = arr
// console.log(arr2.join(','))
}
},
// 初始化 地图 工程 统计
getProjectData (properties, arr) {
if (this.projectData[properties.name]) {
var value = JSON.parse(JSON.stringify(properties.center))
value.push(this.projectData[properties.name])
const item = {
name: properties.name,
value: value
}
arr.push(item)
}
},
// 对 返回的数值进行 排序并且 根据大小进行颜色选择
getColor (arr) {
arr.sort(function (a, b) {
return b.value[2] - a.value[2]
})
arr.forEach((item, index) => {
let color = this.colorArr[this.colorArr.length]
if (this.colorArr.length > index) {
color = this.colorArr[index]
}
item.itemStyle = { color: color }
})
console.log(arr)
}
}
}
</script>
<style lang="less" scoped>
.map-wrap {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
.map-head {
width: 60%;
height: 5%;
left: 50%;
transform: translate(-50%);
background: #eee;
z-index: 20;
}
.map-content {
height: 100%;
width: 100%;
background: url(../../assets/imgs/map/mapbackg.jpg) no-repeat 100% 100%;
}
/*图例*/
.map-legend {
left: 30%;
bottom: 50px;
display: flex;
.img-wrap {
/*width: 109px;*/
/*height: 68px;*/
background: #010809;
opacity: 1;
border: 2px solid rgba(21, 241, 254, 0.4);
margin-right: 50px;
opacity: 0;
width: 0;
height: 0;
transition: all .6s; /*曲线*/
transition-delay: 0.3s; /*延迟*/
overflow: hidden;
&.check {
width: 109px;
height: 68px;
opacity: 1;
}
}
}
</style>
/* 考虑Echarts options 数据 过于庞大，所以单独将其提出作为api引入 */
export const option = {
backgroundColor: 'rgba(0,0,0,0)', // '#013954',
// 提示浮窗样式
tooltip: {
show: true,
trigger: 'item',
alwaysShowContent: false,
backgroundColor: '#0C121C',
borderColor: 'rgba(0, 0, 0, 0.16);',
hideDelay: 100,
triggerOn: 'mousemove',
enterable: true,
textStyle: {
color: '#DADADA',
fontSize: '20',
width: 35,
height: 45,
overflow: 'break'
},
formatter: function (e, t, n) {
const data = e.data
const context = `
<div>
<p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
<p class="tooltip_style"><span class="tooltip_left">成果总数</span><span class="tooltip_right">${data.value}</span></p>
</div>
`
return context
},
showDelay: 100
},
geo: [
// 第一层主图
{
zoom: 1.1, // 当前视角的缩放比例
map: 'china', // 使用
type: 'map',
roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
label: {
normal: {
show: true,
textStyle: {
color: '#1DE9B6'
}
},
emphasis: {
textStyle: {
color: 'rgb(183,185,14)'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgb(147, 235, 248)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: '#09132c' // 0% 处的颜色
},
{
offset: 1,
color: '#274d68' // 100% 处的颜色
}
],
globalCoord: true // 缺省为 false
}
},
emphasis: {
areaColor: 'rgb(46,229,206)',
borderWidth: 0.1
}
}
},
// 第一层投影
{
map: 'china',
z: -1,
zoom: 1.12, // 当前视角的缩放比例
roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
center: undefined,
show: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderJoin: 'round',
borderColor: 'rgba(176,228,252,1)',
borderWidth: 3,
areaColor: 'rgba(133,188,232,1)',
shadowColor: 'rgba(133,188,232,.7)',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 25
},
emphasis: {
show: false
}
},
// 首先把一部分图形隐藏
regions: [
{
name: '北京市',
itemStyle: {
// 隐藏地图
normal: {
opacity: 0 // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
},
{
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
color: '#009cc9'
}
}
}
}
]
}
],
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
zlevel: 1,
rippleEffect: {
period: 15,
scale: 4,
brushType: 'fill'
},
hoverAnimation: true,
label: {
normal: {
formatter (value) {
return value.data.value[2]
},
color: '#f34e2b', // '#1DE9B6',
show: true
}
},
itemStyle: {
normal: {
color: '#1DE9B6', // function (value){ //随机颜色 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); },
shadowBlur: 10,
shadowColor: '#333'
}
},
symbolSize: 12,
data: []
}
]
}
export const seriesData = [
{
tooltip: {
show: false
},
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
scale: 10,
brushType: 'stroke'
},
showEffectOn: 'render',
itemStyle: {
normal: {
color: '#00FFFF'
}
},
label: {
normal: {
color: '#fff'
}
},
symbol: 'circle',
symbolSize: [10, 5],
symbolOffset: [0, 5], // 设置 气泡 偏移
data: [],
zlevel: 1
},
{
type: 'scatter',
coordinateSystem: 'geo',
itemStyle: {
color: '#00FFF6'
},
symbol: 'image://' + require('@/assets/imgs/map/001.png'),
symbolSize: [32, 41],
symbolOffset: [0, -20],
z: 999,
data: []
},
{
type: 'scatter',
coordinateSystem: 'geo',
label: {
normal: {
show: true,
formatter: function (params) {
var name = params.name
var value = params.value[2]
var text = `{fline|${value}人}\n{tline|${name}}`
return text
},
color: '#fff',
rich: {
fline: {
padding: [0, 25],
color: '#fff',
fontSize: 14,
fontWeight: 400
},
tline: {
padding: [0, 27],
color: '#ABF8FF',
fontSize: 12
}
}
},
emphasis: {
show: true
}
},
itemStyle: {
color: '#00FFF6'
},
symbol: 'image://' + require('@/assets/imgs/map/002.png'),
symbolSize: [100, 50],
symbolOffset: [0, -60],
z: 999,
data: []
}]
4.3 纹理和发光
"echarts": "^5.4.0",
https://www.isqqw.com/viewer?id=14038
https://blog.csdn.net/ly2983068126/article/details/127108024
<template>
<div class="map-wrap pr">
<!--头部标题，用相对定义，脱离文档流-->
<div class="map-head pa"></div>
<!--地图容器-->
<div id="main" class="map-content"></div>
<!--图例控制-->
<div class="map-legend pa">
<div @click="gotoback('china')" class="img-wrap" :class="{'check':chooseCity.length >= 2}"><img
src="../../assets/imgs/map/cityicon/china.png" class="whp100"></div>
<div @click="gotoback('city')" class="img-wrap" :class="{'check':chooseCity.length >= 3}"><img
:src="cityIcon" class="whp100"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getMap, cityIconMap } from '@/plugins/utils/map/maputils'
import { option, seriesData } from './options/mapOption'
// import 'echarts-gl'
// import mapMixins from '@/plugins/utils/map/mapMixins'
// import chinaOutline from '@/plugins/mapJson/base/chinaOutline.json'
export default {
name: 'echartsMap',
// mixins: [mapMixins], // 通过 mixins 注入 地图的 option属性
data () {
return {
myChart: '',
areaCenter: [], // 存储 区域中心点（全国级-每个省会中心点，省级-每个市中心点）
chooseCity: [], // 当前选择的 图形-目前主要是用于 区分 全国，省，市（3级结构）
imgLegend: [],
cityIcon: '',
colorArr: ['#4ab2e5', '#4fb6d2', '#52b9c7', '#5abead', '#f34e2b', '#f56321', '#f56f1c', '#f58414', '#f58f0e', '#f5a305', '#dfae10', '#a6c62c', '#96cc34'],
// 考虑 现在统计分为
projectData: {
北京: 11,
天津: 12,
河北: 14,
山西: 17,
内蒙古: 43,
辽宁: 456,
吉林: 34,
黑龙江: 16,
上海: 12,
江苏: 78,
浙江: 77,
安徽: 88,
福建: 99,
江西: 43,
山东: 32,
河南: 11,
湖北: 1,
湖南: 12,
广东: 12,
广西: 3,
海南: 4,
重庆: 5,
四川: 8,
贵州: 9,
云南: 12,
西藏: 12,
陕西: 12,
甘肃: 12,
青海: 12,
宁夏: 12,
新疆: 12,
台湾: 12,
香港: 12,
澳门: 14,
合肥市: 12,
蚌埠市: 12,
淮南市: 12,
马鞍山市: 12,
淮北市: 12,
铜陵市: 12,
安庆市: 12,
黄山市: 12,
滁州市: 12,
阜阳市: 12,
宿州市: 12,
六安市: 12,
亳州市: 12,
池州市: 12,
宣城市: 16
}
}
},
mounted () {
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById('main'))
this.createMap()
},
methods: {
createMap () {
// 地图注册，第一个参数的名字必须和option.geo.map一致
// echarts.registerMap('chinaOutline', chinaOutline)// 需要和 option.geo.map = 'mapName,' 对应上
this.updateMap('中国')
// 创建 监听事件
this.listenerClick()
this.listenerZoom()
},
mapClickCallback (res) {
console.log('地图点击事件')
console.log(res)
if (res.componentType === 'effectScatter') {
// 考虑后期 点击地图覆盖物，需要进行交互 dataIndex
return
}
// 需要考虑当前层级
if (this.chooseCity.length >= 3) { // 说明当前 已经是第三层级了，无法再下钻了
return false
}
this.updateMap(res.name)
},
/**
* 目前数据全部迁移到 maputils.js 中 通过 getMap 进行 数据和名称的获取
* 主要是 echarts.registerMap('china', china) 注册地图
* 改为 const [mapName, mapJson] = getMap(name);
* echarts.registerMap(mapName, mapJson)
* @param name: 点击地图，获取的是城市 的 中文名称
* @param type：计划作为 地图三级 控制 全国、省、市
*/
updateMap (name, type) {
const [mapName, mapJson] = getMap(name)
this.showLegend(name, type)
this.getAreaCenter(mapJson) // 获取地图区域中心点，全国，和省下
// option.geo.zoom = 0.8 // 后期可能需要考虑 低图层 需要进行缩放
// 就像上面提到的，这里必须要和注册地图时的名字一致
option.geo[0].map = mapName
option.geo[0].center = ''
option.geo[1].map = mapName
option.geo[1].center = ''
// 注册地图
echarts.registerMap(mapName, mapJson)// 需要和 option.geo.map = 'mapName,' 对应上
// 重新渲染
option.series[0].data = this.areaCenter
// option.series[1].data = this.areaCenter
// option.series[2].data = this.areaCenter
this.myChart.setOption(option)
},
showLegend (name, type) {
if (type === 'china') {
this.chooseCity = ['中国']
return
}
if (type === 'city') {
this.chooseCity.pop()
return
}
this.chooseCity.push(name)
if (this.chooseCity.length === 2) { // 需要显示全国
this.imgLegend.push(cityIconMap[this.chooseCity[0]])
}
if (this.chooseCity.length === 3) { // 需要显示全国和 当前城市
this.cityIcon = cityIconMap[this.chooseCity[1]]
}
},
gotoback (type) {
let name = '中国'
if (type === 'city') {
name = this.chooseCity[1]
}
this.updateMap(name, type)
},
// 给每个地区赋值 -- 待删除
convertData (data) {
// 定义一个数组
var res = []
// 循环遍历每个区域值
for (var i = 0; i < data.length; i++) {
// 获取坐标
var geoCoord = this.geoCoordMap[data[i].name]
// 判断是否有坐标
if (geoCoord) {
// 往数组里设置值
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
},
// 监听单击事件
listenerClick () {
this.myChart.on('click', res => {
this.mapClickCallback(res)
})
},
// 地图缩放监听(后期如果感觉缩放和拖拽，导致地图卡顿影响使用，讲 listenerZoom 方法注释掉)
listenerZoom () {
this.myChart.on('georoam', params => { // 这里是bmaproam方法，其余都一样
var options = this.myChart.getOption() // 获得option对象
// 捕捉到缩放时
if (options && options.geo[0].zoom && options.geo[0].zoom != null) {
options.geo[1].zoom = options.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
}
// 捕捉到拖曳时
if (options && options.geo[0].center && options.geo[0].center != null) {
options.geo[1].center = options.geo[0].center // 下层的geo的中心位置随着上层geo一起改变
}
this.myChart.setOption(options) // 设置option
})
},
// 获取地图区域中心点，全国，和省下
getAreaCenter (data) {
this.areaCenter = []
if (data && !this.commonUtil.isEmptyObj(data) && data.features) {
const arr = []// 存储区域中心点信息
// const arr2 = []
data.features.forEach(({ properties }) => { // 对象解构 提取 存储参数的 properties 对象 获取code
this.getProjectData(properties, arr)
// arr2.push(properties.name)
})
this.getColor(arr)
this.areaCenter = arr
// console.log(arr2.join(','))
}
},
// 初始化 地图 工程 统计
getProjectData (properties, arr) {
if (this.projectData[properties.name]) {
var value = JSON.parse(JSON.stringify(properties.center))
value.push(this.projectData[properties.name])
const item = {
name: properties.name,
value: value
}
arr.push(item)
}
},
// 对 返回的数值进行 排序并且 根据大小进行颜色选择
getColor (arr) {
arr.sort(function (a, b) {
return b.value[2] - a.value[2]
})
arr.forEach((item, index) => {
let color = this.colorArr[this.colorArr.length]
if (this.colorArr.length > index) {
color = this.colorArr[index]
}
item.itemStyle = { color: color }
})
console.log(arr)
}
}
}
</script>
<style lang="less" scoped>
.map-wrap {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
.map-head {
width: 60%;
height: 5%;
left: 50%;
transform: translate(-50%);
background: #eee;
z-index: 20;
}
.map-content {
height: 100%;
width: 100%;
background: url(../../assets/imgs/map/mapbackg.jpg) no-repeat 100% 100%;
}
/*图例*/
.map-legend {
left: 30%;
bottom: 50px;
display: flex;
.img-wrap {
/*width: 109px;*/
/*height: 68px;*/
background: #010809;
opacity: 1;
border: 2px solid rgba(21, 241, 254, 0.4);
margin-right: 50px;
opacity: 0;
width: 0;
height: 0;
transition: all .6s; /*曲线*/
transition-delay: 0.3s; /*延迟*/
overflow: hidden;
&.check {
width: 109px;
height: 68px;
opacity: 1;
}
}
}
</style>
/* 考虑Echarts options 数据 过于庞大，所以单独将其提出作为api引入 */
// js 渲染地图之前
var domImg = new Image()
domImg.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTE0OTgyQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE4MTE0OTgzQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTgxMTQ5ODBBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTgxMTQ5ODFBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4v4trwAAAAVklEQVR42mL0D225cu0hAzWAjpY8C9CsL19/wIV4uDnI5gKNYmKgKhjcxrFAggBZiBIuyDhqRQWQOxoVo1ExGhWjUTEaFYMiKoB1LVq1TXZUAI0CCDAAcAlaxCt7dtQAAAAASUVORK5CYII='
// 悬停 效果
var domImgHover = new Image()
domImgHover.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFDQ0Q2RjYyQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFDQ0Q2RjYzQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNDRDZGNjBBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNDRDZGNjFBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FboimAAAASklEQVR42mIUnL9XtHsDAzXA69IARjWtXJYX7+FCfyQEKeEyMVAVDG7jWCB+RhaihAsybjQqRqNiNCpGo2I0KoZZVDBSt9oGCDAAhYNrvRu3DWEAAAAASUVORK5CYII='
export const option = {
backgroundColor: 'rgba(0,0,0,0)', // '#013954',
geo: [
{
// 主图
map: 'china',
z: 0,
zoom: 1.2, // 当前视角的缩放比例
roam: true, // 是否开启平游或缩放
center: undefined,
show: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor: 'rgba(141, 199, 255,1)',
borderWidth: 1,
// areaColor: 'green'
areaColor: {
type: 'pattern',
image: domImg, // 配置图片
repeat: 'repeat' // 可选值repeat、no-repeat、repeat-x、repeat-y
}
},
emphasis: {
// areaColor: '#2d9eff', // 悬浮区背景
shadowColor: 'rgba(20, 113, 255,1)',
areaColor: {
type: 'pattern',
image: domImgHover, // 配置图片
repeat: 'repeat' // 可选值repeat、no-repeat、repeat-x、repeat-y
},
shadowOffsetX: -2,
shadowOffsetY: 5,
shadowBlur: 10
}
}
},
// 第一层投影
{
map: 'china',
z: -1,
zoom: 1.22, // 当前视角的缩放比例
roam: true, // 是否开启平游或缩放
center: undefined,
show: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderJoin: 'round',
borderColor: 'rgba(176,228,252,1)',
borderWidth: 3,
areaColor: 'rgba(133,188,232,1)',
shadowColor: 'rgba(133,188,232,.7)',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 25
},
emphasis: {
show: false
}
},
// 首先把一部分图形隐藏
regions: [
{
name: '北京市',
itemStyle: {
// 隐藏地图
normal: {
opacity: 0 // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
},
{
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
color: '#009cc9'
}
}
}
}
]
},
// 第二层投影
{
map: 'china',
z: -2,
zoom: 1.2, // 当前视角的缩放比例
roam: true, // 是否开启平游或缩放
center: undefined,
show: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderJoin: 'round',
areaColor: 'rgba(30,49,105,1)',
shadowColor: 'rgba(30,49,105,1)',
shadowOffsetX: -5,
shadowOffsetY: 6
},
emphasis: {
show: false
}
},
// 首先把一部分图形隐藏
regions: [
{
name: '北京市',
itemStyle: {
// 隐藏地图
normal: {
opacity: 0 // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
},
{
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
color: '#009cc9'
}
}
}
}
]
}
],
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
showEffectOn: 'render',
zlevel: 1,
rippleEffect: {
period: 15,
scale: 4,
brushType: 'fill'
},
hoverAnimation: true,
label: {
normal: {
formatter (value) {
return value.data.value[2]
},
color: '#f34e2b', // '#1DE9B6',
show: true
}
},
itemStyle: {
normal: {
color: '#1DE9B6', // function (value){ //随机颜色 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); },
shadowBlur: 10,
shadowColor: '#333'
}
},
symbolSize: 12,
data: []
}
]
}
export const seriesData = [
{
tooltip: {
show: false
},
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
scale: 10,
brushType: 'stroke'
},
showEffectOn: 'render',
itemStyle: {
normal: {
color: '#00FFFF'
}
},
label: {
normal: {
color: '#fff'
}
},
symbol: 'circle',
symbolSize: [10, 5],
symbolOffset: [0, 5], // 设置 气泡 偏移
data: [],
zlevel: 1
},
{
type: 'scatter',
coordinateSystem: 'geo',
itemStyle: {
color: '#00FFF6'
},
symbol: 'image://' + require('@/assets/imgs/map/001.png'),
symbolSize: [32, 41],
symbolOffset: [0, -20],
z: 999,
data: []
},
{
type: 'scatter',
coordinateSystem: 'geo',
label: {
normal: {
show: true,
formatter: function (params) {
var name = params.name
var value = params.value[2]
var text = `{fline|${value}人}\n{tline|${name}}`
return text
},
color: '#fff',
rich: {
fline: {
padding: [0, 25],
color: '#fff',
fontSize: 14,
fontWeight: 400
},
tline: {
padding: [0, 27],
color: '#ABF8FF',
fontSize: 12
}
}
},
emphasis: {
show: true
}
},
itemStyle: {
color: '#00FFF6'
},
symbol: 'image://' + require('@/assets/imgs/map/002.png'),
symbolSize: [100, 50],
symbolOffset: [0, -60],
z: 999,
data: []
}]
4.4 解决拖拽两层地图分层
在下面层的geo上，添加配置animationDurationUpdate:0
geo: [
// 第一层主图
{
zoom: 1, // 当前视角的缩放比例
map: 'china', // 使用
type: 'map',
id: 1,
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
center: undefined,
/* 控制地图上是否显示 城市名称 */
// label: {
// normal: {
// show: true,
// textStyle: {
// color: '#1DE9B6'
// }
// },
// emphasis: {
// textStyle: {
// color: 'rgb(183,185,14)'
// }
// }
// },
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor: 'rgb(147, 235, 248)',
borderWidth: 1,
areaColor: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// {
// offset: 0,
// color: '#143ea8' // 0% 处的颜色
// },
// {
// offset: 1,
// color: '#1c5f8e' // 100% 处的颜色
// }
// ],
// globalCoord: true // 缺省为 false
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{ offset: 0, color: 'rgba(0,101,126)' }, // 0% 处的颜色
{ offset: 1, color: 'rgba(0,101,126,0.7)' } // 100% 处的颜色
],
globalCoord: true // 缺省为 false
}
},
emphasis: {
areaColor: 'rgb(46,229,206)',
borderWidth: 0.1
}
}
},
// 第一层投影
{
map: 'china',
z: -1,
zoom: 1.02, // 当前视角的缩放比例
id: 2,
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
center: undefined,
// animationDurationUpdate: 0, // 设置动画，否则拖拽会出现分层
show: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderJoin: 'round',
borderColor: 'rgba(176,228,252,0.5)',
borderWidth: 1,
areaColor: 'rgba(113,218,240)',
shadowColor: 'rgba(113,218,240,0.8)',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 25
},
emphasis: {
show: false
}
},
// 首先把一部分图形隐藏
regions: [
{
name: '北京市',
itemStyle: {
// 隐藏地图
normal: {
opacity: 0 // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
},
{
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
color: '#009cc9'
}
}
}
}
]
}
],
// 地图缩放监听(后期如果感觉缩放和拖拽，导致地图卡顿影响使用，讲 listenerZoom 方法注释掉)
listenerZoom () {
this.myChart.on('georoam', params => { // 这里是bmaproam方法，其余都一样
var options = this.myChart.getOption() // 获得option对象
options.geo[0].animationDurationUpdate = 0
options.geo[1].animationDurationUpdate = 0
// 捕捉到缩放时
if (params.zoom) {
// 下层geo的缩放等级跟着上层的geo一起改变
options.geo[1].zoom = options.geo[0].zoom + 0.02;
options.geo[1].center = options.geo[0].center;
} else { // 拖拽
options.geo[1].center = options.geo[0].center // 下层的geo的中心位置随着上层geo一起改变
}
this.myChart.setOption(options) // 设置option
})
},
// 监听单击事件
listenerClick () {
this.myChart.on('click', res => {
var options = this.myChart.getOption() // 获得option对象
options.geo[0].animationDurationUpdate = 1000
options.geo[1].animationDurationUpdate = 1000
this.myChart.setOption(options) // 设置option
this.mapClickCallback(res)
})
},
4.5 Echarts 实现飞线图效果
[Echarts 实现飞线图效果](./Echarts 实现飞线图效果.md)
4.6 案例
思路： 数据异步加载，并且包含飞线
之前出现过;
import * as mapJson from '@/plugins/echarts_map_json/json/province/anhui.json'这样的方式引入，最开始地图能正常初始化，但是有一天就不能用了，加载也不报错
// 引入地图插件
import * as echarts from "echarts";
import mapJson from '@/plugins/echarts_map_json/json/province/anhui.json'
export default {
name: 'WoOrderHome',
data() {
return {
cityLocation: [], // 地图数据
yjzIcon: require("../../../../assets/image/province_map_location.png"),
centreIcon: require("../../../../assets/image/province_map_location_red.png"),
yjItem:{}, // 预警单统计
dbItem:{}, // 督办单统计
professList: {},
myHisOrder: {},
woTaskOrder: {},
// 工单发起地--默认 生产管控中心
centreData: {
name: '生产管控中心',
value: [117, 31],
type: 'startPoint'
},
myChart: {} // 当前地图对象，主要用于异步加载数据 实现先初始化地图然后 再加载地图标记点
}
},
created() {
this.loadData();
},
mounted() {
this.initMap();
},
methods: {
loadData(item) {
this.getMainData()// 加载主数据，地图数据
},
// 加载主数据，地图数据
getMainData() {
// const data = [{"isNewOrder":"0","notFinishNum":"10","name":"合肥","id":103,"value":[117.29,32.32]},{"isNewOrder":"1","notFinishNum":"10","name":"江淮","id":245,"value":[118.22,32.47]},{"isNewOrder":"1","notFinishNum":"10","name":"明光","id":246,"value":[117.91,32.82]},{"isNewOrder":"1","notFinishNum":"10","name":"青阳","id":247,"value":[117.91,30.68]},{"isNewOrder":"1","notFinishNum":"10","name":"芜湖","id":248,"value":[118.34,30.91]},{"isNewOrder":"1","notFinishNum":"10","name":"九华","id":249,"value":[117.35,30.48]},{"isNewOrder":"1","notFinishNum":"10","name":"宁国","id":250,"value":[118.982,30.654]},{"isNewOrder":"1","notFinishNum":"10","name":"太湖","id":251,"value":[116.30,30.46]},{"isNewOrder":"1","notFinishNum":"10","name":"六安","id":252,"value":[116.32,31.41]},{"isNewOrder":"1","notFinishNum":"10","name":"当涂","id":253,"value":[117.84,31.58]},{"isNewOrder":"1","notFinishNum":"10","name":"生产技术科","id":254,"value":[118.04,31.79]},{"isNewOrder":"1","notFinishNum":"10","name":"广德","id":255,"value":[119.40,30.89]},{"isNewOrder":"0","notFinishNum":"10","name":"淮南","id":275,"value":[117.05,32.63]}]
orderHomeInfo().then(response => {
this.cityLocation = this.handleData(response.data);
this.updateMapSeriesData();
});
},
handleData(data) {
data.forEach(item => {
item.value = [item.lng, item.lat];
item.tips = `${item.name}存在${item.notFinishNum}条工单未完工`;
})
return data
},
// 初始化的时候先构造好地图，然后等 构造数据
updateMapSeriesData() {
var options = this.myChart.getOption() // 获得option对象
options.series[0].data = this.cityLocation;
options.series[2].data = [...this.cityLocation, this.centreData]; // 添加水波纹
// options.series.push(this.getFlyLineData()); // 飞线
this.myChart.setOption(options) // 设置option
setTimeout(() => {
options.series.push(this.getFlyLineData()); // 飞线
this.myChart.setOption(options) // 设置option
}, 1000)
},
/**
* 构造飞线 数据，需要 获取起点和重点的坐标
* [{ "fromName": "合肥", "toName": "芜湖", "coords": [ [ 117.283043, 31.861191 ], [ 118.232941, 31.152859 ] ] }...]
* @param data
* @returns {[]}
*/
convertData() {
var res = [];
// 构造飞线数据
this.cityLocation.forEach(({id,name, value, notSignNum}) => {
if (notSignNum > 0) { // 表示存在 未签收的单子
res.push({
fromName: this.centreData.name,
toName: name,
tips: `${name}存在${notSignNum}条工单未签收`,
coords: [this.centreData.value, value],
type: 'fx',
id:id
});
}
})
return res;
},
// 构造飞线图数据
getFlyLineData() {
return {
name: '飞线',
type: 'lines', // 使用lines系列绘制连线
coordinateSystem: 'geo', // 使用地理坐标系
zlevel: 3,
effect: {
show: true,
period: 3, // 箭头指向速度，值越小速度越快
trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', // 箭头图标
symbolSize: 4 // 图标大小
},
tooltip: {
show: true
},
label: {
emphasis: {
show: false
}
},
lineStyle: {
normal: {
width: 1, // 尾迹线条宽度
opacity: 1, // 尾迹线条透明度
curveness: 0.3, // 尾迹线条曲直度
color: 'rgba(135, 250, 241, 1)'
}
},
data: this.convertData()
};
},
// 初始化创建地图
async initMap() {
// 初始化Echarts实例
this.myChart = echarts.init(this.$refs.chart);
// console.log(JSON.parse(JSON.stringify(mapJson)));
echarts.registerMap('安徽', mapJson)// 需要和 option.geo.map = 'mapName,' 对应上
// 绘制安徽省地图
this.$nextTick(() => {
this.myChart.setOption({
geo: { //地理坐标系组件
top: '100px',
left: '38%',
zoom: 1.2,
map: '安徽',
roam: true,
zlevel: 1,
layoutSize: '100%', // 设置地图大小为其容器宽度的50%
label: {
emphasis: {
show: true,
textStyle: {
color: '#8AFFF5' // 修改文字颜色为#8AFFF5
}
}
},
itemStyle: {
normal: { // 正常状态下效果
areaColor: '#051226', // 设置区域颜色
borderColor: '#0E3446', // 设置描边颜色
borderWidth: 3, // 设置描边线条宽度为3像素
},
emphasis: { // 高亮状态下效果
areaColor: '#013b5f',
textStyle: {
color: '#8AFFF5' // 高亮状态下文字颜色为#8AFFF5
}
},
},
},
// 添加各地区未完成单数提示
tooltip: {
trigger: 'item',
formatter: function (params) { // 循环渲染每个地区的数据
var name = params.name;
var value = params.data.notFinishNum || 0;
if (params.data.type == 'startPoint') {
return `${name}`;
} else if (value == 0 && params.data.type != 'fx') {
return `${name}全部完工`;
} else {
return `${params.data.tips}`;
}
},
},
series: [
// YJ站
{
name: "安徽",
type: 'scatter',//配置scatter显示方式为散点图
coordinateSystem: 'geo',
zlevel: 8,
itemStyle: { // 设置图标颜色
normal: {
color: '#46bee9'
}
},
label: {
normal: {
show: false
}
},
symbol: `image://${this.yjzIcon}`,
symbolSize: [25, 25],
symbolOffset: [0, -12],
data: [],//this.cityLocation
},
// 中心点 图标（工单的发起地）
{
name: "生产管控中心",
type: 'scatter',//配置scatter显示方式为散点图
coordinateSystem: 'geo',
zlevel: 8,
label: {
normal: {
show: false
},
},
symbol: `image://${this.centreIcon}`,
symbolSize: [25, 25],
symbolOffset: [0, -18],
data: [this.centreData],
},
// 水波纹
{
name: '水波纹',
type: 'effectScatter', // 设置配置effectScatter为地理散点图类型
coordinateSystem: 'geo',
zlevel: 4,
rippleEffect: { // 设置效果为水波纹效果
brushType: 'stroke',
// period: 10,
// scale: 4,
},
tooltip: {
show: true
},
hoverAnimation: true, // 是否开启鼠标 hover 的提示效果
symbolSize: [15, 8], // 设置水波纹直径大小
showEffectOn: 'render',
itemStyle: {
normal: {
color: function (val) {
if (val.data.type == 'startPoint') { // 发起点和其他图标不一样，用红色的水波纹
return '#fb5b4f'
} else {
return 'rgba(135, 250, 241, 1)'
}
}
}
},
label: {
normal: {
show: true,
position: 'bottom',
padding: [5, 0, 0, 0],
formatter: function (val) {
if (val.data.type === 'startPoint') {
// return val.data.name // 此处因为echarts版本更新到5.0+，此处字体样式发生改变，需要用这种返回格式，方便rich中设置此处的字体样式
return `{c|${val.data.name}}`;
} else {
const notFinishNum = val.data.notFinishNum || 0;
if (notFinishNum > 0) {
return `{a|${val.name}:} {b|${notFinishNum}}{a|单}`;
} else {
return `{a|${val.name}:} {a|${notFinishNum}}{a|单}`;
}
}
},
rich: {
a: {
color: 'rgba(135, 250, 241, 1)',
fontSize: 14
},
b: {
color: 'red',
fontSize: 14
},
c: {
color: 'red',
fontSize: 14
}
},
// color:'rgba(135, 250, 241, 1)'
}
},
// data: this.centreData,// [...this.cityLocation,this.centreData] // 将发起点，也添加到 数据中
data:[]
},
// 飞线
// this.getFlyLineData(), // 飞线
]
})
})
// 添加监听
this.listenerMap();
},
listenerMap() {
/**
* 目前提供 点击站点，和点击飞线，进行跳转明细列表
* 其中，点击YJ站 type=dept、飞线:fx
*/
this.myChart.on('click', ({data})=> {
if(data.type!='dept' && data.type!='fx'){
return;
}
});
window.addEventListener('resize', function () {
// 调整图表大小以适应窗口
this.myChart.resize();
});
},
},
}
记录
1. 南海诸岛
目前南海诸岛官网提供 regions 属性 可以设置opacity 进行 显示隐藏，但是 必须 是 geo属性下，
所以要想实现描边，或者发光，需要讲构造的地图都写在 geo 属性下，目前 geo 是支持 数组的
geo: [
{
// 主图
map: 'china',
z: 0,
zoom: 1.2, // 当前视角的缩放比例
roam: true, // 是否开启平游或缩放
center: undefined,
show: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderColor: 'rgba(141, 199, 255,1)',
borderWidth: 1,
// areaColor: 'green'
areaColor: {
type: 'pattern',
image: domImg, // 配置图片
repeat: 'repeat' // 可选值repeat、no-repeat、repeat-x、repeat-y
}
},
emphasis: {
// areaColor: '#2d9eff', // 悬浮区背景
shadowColor: 'rgba(20, 113, 255,1)',
areaColor: {
type: 'pattern',
image: domImgHover, // 配置图片
repeat: 'repeat' // 可选值repeat、no-repeat、repeat-x、repeat-y
},
shadowOffsetX: -2,
shadowOffsetY: 5,
shadowBlur: 10
}
}
},
// 第一层投影
{
map: 'china',
z: -1,
zoom: 1.22, // 当前视角的缩放比例
roam: true, // 是否开启平游或缩放
center: undefined,
show: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderJoin: 'round',
borderColor: 'rgba(176,228,252,1)',
borderWidth: 3,
areaColor: 'rgba(133,188,232,1)',
shadowColor: 'rgba(133,188,232,.7)',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 25
},
emphasis: {
show: false
}
},
// 首先把一部分图形隐藏
regions: [
{
name: '北京市',
itemStyle: {
// 隐藏地图
normal: {
opacity: 0 // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
},
{
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
color: '#009cc9'
}
}
}
}
]
},
// 第二层投影
{
map: 'china',
z: -2,
zoom: 1.2, // 当前视角的缩放比例
roam: true, // 是否开启平游或缩放
center: undefined,
show: true,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderJoin: 'round',
areaColor: 'rgba(30,49,105,1)',
shadowColor: 'rgba(30,49,105,1)',
shadowOffsetX: -5,
shadowOffsetY: 6
},
emphasis: {
show: false
}
},
// 首先把一部分图形隐藏
regions: [
{
name: '北京市',
itemStyle: {
// 隐藏地图
normal: {
opacity: 0 // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
},
{
name: '南海诸岛',
itemStyle: {
normal: {
opacity: 0,
label: {
show: false,
color: '#009cc9'
}
}
}
}
]
}
]
2. 地图监听缩放
listenerZoom () {
this.myChart.on('georoam', params => { // 这里是bmaproam方法，其余都一样
var options = this.myChart.getOption() // 获得option对象
// 捕捉到缩放时
if (options && options.geo[0].zoom && options.geo[0].zoom != null) {
options.geo[1].zoom = options.geo[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
}
// 捕捉到拖曳时
if (options && options.geo[0].center && options.geo[0].center != null) {
options.geo[1].center = options.geo[0].center // 下层的geo的中心位置随着上层geo一起改变
}
this.myChart.setOption(options) // 设置option
})
},
官网关于geo https://echarts.apache.org/zh/option.html#geo
其他地图：https://blog.csdn.net/weixin_44031176/article/details/108202633
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose(); //销毁echart实例
this.chart = null;
},
this.myChart.clear();
this.myChart.setOption(options);
this.myChart.resize();
//地图的点击事件 ，钻取到市我就不举例了，类似的方法，点击事件可以获取到当前点击的省份的数 据；
this.myChart.on('click', function(params) {
console.log(params)
})
// 防止graph里频繁添加click事件，在添加click事件之前先全部清空掉。
charts.off();
this.myChart.off('click');
https://blog.csdn.net/qqjuanqq/article/details/127630832
var option = {
tooltip: {
triggerOn: 'mousemove', // mousemove、click
padding: 8,
borderWidth: 1,
borderColor: '#409eff',
backgroundColor: 'rgba(255,255,255,0.7)',
textStyle: {
color: '#000000',
fontSize: 13
},
formatter: function (e, t, n) {
const data = e.data
const context = `
<div>
<p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
<p class="tooltip_style"><span class="tooltip_left">成果总数</span><span class="tooltip_right">${data.value}</span></p>
</div>
`
return context
}
},
visualMap: {
show: true,
left: 26,
bottom: 40,
showLabel: true,
pieces: [
{
gte: 1000,
label: '>= 1000',
color: '#5475f5'
},
{
gte: 700,
lt: 999,
label: '700 - 999',
color: '#e6ac53'
},
{
gte: 500,
lt: 699,
label: '500 - 699',
color: '#9feaa5'
},
{
gte: 100,
lt: 499,
label: '100 - 499',
color: '#85daef'
},
{
gte: 10,
lt: 99,
label: '10 - 99',
color: '#74e2ca'
},
{
lt: 10,
label: '<10',
color: '#9fb5ea'
}
]
},
geo: {
map: 'china',
scaleLimit: {
min: 1,
max: 2
},
zoom: 1,
top: 120,
layoutSize: '100%', // 保持地图宽高比
label: {
normal: {
show: true,
fontSize: '14',
color: 'rgba(0,0,0,0.7)'
},
emphasis: {
show: false,
textStyle: {
color: '#F3F3F3'
}
}
},
itemStyle: {
normal: {
// shadowBlur: 50,
// shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(0, 0, 0, 0.2)',
areaColor: '#1955a4'
},
emphasis: {
areaColor: '#f2d5ad',
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
},
series: [
{
name: '成果预览',
type: 'map',
geoIndex: 0
// data: this.dataList
}
]
}
黑马 可视化大屏：https://www.bilibili.com/video/BV1v7411R7mp
ECharts Map 属性详解
// 路径配置
require.config({
paths : {
// echarts: 'http://echarts.baidu.com/build/dist'
echarts : './plugins/echarts-2.2.7/doc/example/www/js'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
], function(ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
option = {
title : {
// 是否显示
show: true,
// 主标题文本，'\n'指定换行
text: 'iphone销量',
// 主标题文本超链接
link: 'http://www.baidu.com',
// 指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
target: 'self',
// 副标题文本，'\n'指定换行
subtext: '纯属虚构',
// 副标题文本超链接
sublink: 'http://www.baidu.com',
// 指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
subtarget: 'self',
// 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'center',
// 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top',
// 水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
textAlign: 'center',
// 标题背景颜色，默认透明
backgroundColor: 'rgba(0,0,0,0.1)',
// 标题边框颜色
borderColor: '#66FF00',
// 标题边框线宽，单位px，默认为0（无边框）
borderWidth: 1,
// 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css，见下图
padding: [20,40,20,40],
// 主副标题纵向间隔，单位px，默认为10
itemGap: 20,
// 主标题文本样式
textStyle: {
// 颜色
color: '#0066FF',
// 水平对齐方式，可选为：'left' | 'right' | 'center'
align: 'left',
// 垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ，单位px
fontSize: 20,
// 样式，可选为：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
},
// 副标题文本样式
subtextStyle: {
// 颜色
color: '#FF7F50',
// 水平对齐方式，可选为：'left' | 'right' | 'center'
align: 'left',
// 垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ，单位px
fontSize: 15,
// 样式，可选为：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
}
},
// 工具提示
tooltip : {
// 显示策略，可选为：true（显示） | false（隐藏）
show: true,
// tooltip主体内容显示策略，只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false
showContent: true,
// 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
trigger: 'item',
// 位置指定，传入{Array}，如[x, y]， 固定位置[x, y]；传入{Function}，如function([x, y]) {return [newX,newY]}，默认显示坐标为输入参数，用户指定的新坐标为输出返回。
// position: getTooltipPosition(0,0),
// 内容格式器：{string}（Template） | {Function}，支持异步回调
/*formatter: function(data){
console.log(data);
return data[1]+"："+data[5].count;
}*/
// 拖拽重计算独有，数据孤岛内容格式器：{string}（Template） | {Function}，见表格下方
// islandFormatter:
// 显示延迟，添加显示延迟可以避免频繁切换，特别是在详情内容需要异步获取的场景，单位ms
showDelay: 0,
// 隐藏延迟，单位ms
hideDelay: 0,
// 动画变换时长，单位s，如果你希望tooltip的跟随实时响应，showDelay设置为0是关键，同时transitionDuration设0也会有交互体验上的差别。
transitionDuration: 0,
// 鼠标是否可进入详情气泡中，默认为false，如需详情内交互，如添加链接，按钮，可设置为true。
//enterable: false,
// 提示背景颜色，默认为透明度为0.7的黑色
backgroundColor: 'rgba(0,0,0,0.5)',
// 提示边框颜色
borderColor: '#FF7F50',
// 提示边框圆角，单位px，默认为4
borderRadius: 10,
// 提示边框线宽，单位px，默认为0（无边框）
borderWidth: 2,
// 提示内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
padding: [15,15,15,15],
// 坐标轴指示器
/*axisPointer:{
// 默认type为line，可选为：'line' | 'cross' | 'shadow' | 'none'(无)，指定type后对应style生效
type: 'line',
// lineStyle设置直线指示器
lineStyle: {
// 颜色
color:'#48b',
// 线条样式，可选为：'solid' | 'dotted' | 'dashed'， 树图还可以选：'curve' | 'broken'
type:'solid',
// 线宽
width:10,
// 折线主线(IE8+)有效，阴影色彩，支持rgba
shadowColor:'rgba(0,0,0,0)',
// 折线主线(IE8+)有效，阴影模糊度，大于0有效
shadowBlur:5,
// 折线主线(IE8+)有效，阴影横向偏移，正值往右，负值往左
shadowOffsetX:3,
// 折线主线(IE8+)有效，阴影纵向偏移，正值往下，负值往上
shadowOffsetY:3
},
// crossStyle设置十字准星指示器
crossStyle:{
// 颜色
color:'#48b',
// 线条样式，可选为：'solid' | 'dotted' | 'dashed'， 树图还可以选：'curve' | 'broken'
type:'solid',
// 线宽
width:10,
// 折线主线(IE8+)有效，阴影色彩，支持rgba
shadowColor:'rgba(0,0,0,0)',
// 折线主线(IE8+)有效，阴影模糊度，大于0有效
shadowBlur:5,
// 折线主线(IE8+)有效，阴影横向偏移，正值往右，负值往左
shadowOffsetX:3,
// 折线主线(IE8+)有效，阴影纵向偏移，正值往下，负值往上
shadowOffsetY:3
},
// shadowStyle设置阴影指示器，areaStyle.size默认为'auto'自动计算，可指定具体宽度
shadowStyle:{
// 颜色
color: 'rgba(150,150,150,0.3)',
width: 'auto',
// 填充样式，目前仅支持'default'(实填充)
type: 'default'
}
},*/
// 文本样式，默认为白色字体
textStyle:{
// 颜色
color: '#FF7F50',
// 水平对齐方式，可选为：'left' | 'right' | 'center'
align: 'left',
// 垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ，单位px
fontSize: 20,
// 样式，可选为：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
}
},
legend: {
// 显示策略，可选为：true（显示） | false（隐藏）
show: true,
// 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
orient: 'vertical',
// 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'left',
// 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top',
// 图例背景颜色，默认透明
backgroundColor: 'rgba(0,0,0,0.1)',
// 图例边框颜色
borderColor: '#0066FF',
// 图例边框线宽，单位px，默认为0（无边框）
borderWidth: 1,
// 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
padding: [15,15,15,15],
// 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 20,
// 图例图形宽度
itemWidth: 30,
// 图例图形高度
itemHeight: 20,
// 默认只设定了图例文字颜色,更个性化的是，要指定文字颜色跟随图例,可设color为'auto'
textStyle:{
// 颜色
color: '#FF7F50',
// 水平对齐方式，可选为：'left' | 'right' | 'center'
align: 'left',
// 垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ，单位px
fontSize: 20,
// 样式，可选为：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
},
// 文本格式器：{string}（Template） | {Function}，模板变量为'{name}'，函数回调参数为name
/*formatter: function(data){
console.log(data);
return data[1]+"："+data[5].count;
},*/
// 选择模式，默认开启图例开关，可选single，multiple
selectedMode: true,
// 配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入
/*selected: {
'降水量' : false
},*/
// 图例内容数组
data:[{name:'iphone3'/*,textStyle:{Object},icon:{string}*/},
{name:'iphone4'/*,textStyle:{Object},icon:{string}*/},
{name:'iphone5'/*,textStyle:{Object},icon:{string}*/}]
},
// 值域选择，每个图表最多仅有一个值域控件
dataRange: {
// 显示策略，可选为：true（显示） | false（隐藏）
show: true,
// 布局方式，默认为垂直布局，可选为：'horizontal' | 'vertical'
orient: 'horizontal',
// 水平安放位置，默认为全图左对齐，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'left',
// 垂直安放位置，默认为全图底部，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'bottom',
// 值域控件背景颜色，默认透明
backgroundColor: 'rgba(0,0,0,0.1)',
// 图例边框颜色
borderColor: '#0066FF',
// 图例边框线宽，单位px，默认为0（无边框）
borderWidth: 1,
// 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
padding: [15,15,15,15],
// 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 20,
// 图例图形宽度
itemWidth: 30,
// 图例图形高度
itemHeight: 20,
// 指定的最小值，eg: 0，默认无，必须参数，唯有指定了splitList时可缺省min。
min: 0,
// 指定的最大值，eg: 100，默认无，必须参数，唯有指定了splitList时可缺省max
max: 2500,
// 小数精度，默认为0，无小数点，当 min ~ max 间在当前精度下无法整除splitNumber份时，精度会自动提高以满足均分，不支持不等划分
precision: 1,
// 分割段数，默认为5，为0时为线性渐变，calculable为true是默认均分100份
splitNumber: 10,
// 自定义分割方式，支持不等距分割。splitList被指定时，splitNumber将被忽略。
/*splitList: [
{start: 1500},
{start: 900, end: 1500},
{start: 310, end: 1000},
{start: 200, end: 300},
{start: 10, end: 200, label: '10 到 200（自定义label）'},
{start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
{end: 10}
],*/
// 用于设置dataRange的初始选中范围。calculable为true时有效。
range: {start: 0, end: 100},
// 选择模式，默认开启值域开关，可选single，multiple
selectedMode: 'multiple',
// 是否启用值域漫游，启用后无视splitNumber和splitList，值域显示为线性渐变
calculable : true,
// 是否启用地图hover时的联动响应
hoverLink: true,
// 值域漫游是否实时显示，在不支持Canvas的浏览器中该值自动强制置为false
realtime:true,
// 值域颜色标识，颜色数组长度必须>=2，颜色代表从数值高到低的变化，即颜色数组低位代表数值高的颜色标识 ，支持Alpha通道上的变化（rgba）
color:['#e42515','#fad3d0'],
// 内容格式器：{string}（Template） | {Function}，模板变量为'{value}'和'{value2}'，代表数值起始值和结束值，函数参数两个，含义同模板变量，当calculable为true时模板变量仅有'{value}'
/*formatter : function(v, v2){
if (v2 < 1000) { return '低于' + v2;}
else if (v > 1000) { return '高于' + v;}
else { return '中'; }
},*/
// 值域文字显示，splitNumber生效时默认以计算所得数值作为值域文字显示，可指定长度为2的文本数组显示简介的值域文本，如['高', '低']，'\n'指定换行
text:['高','低'],
// 默认只设定了值域控件文字颜色
textStyle:{
// 颜色
color: '#FF7F50',
// 水平对齐方式，可选为：'left' | 'right' | 'center'
align: 'left',
// 垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ，单位px
fontSize: 20,
// 样式，可选为：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
}
},
// 工具箱，每个图表最多仅有一个工具箱
toolbox: {
// 显示策略，可选为：true（显示） | false（隐藏）
show: true,
// 布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
orient : 'horizontal',
// 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'right',
// 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'bottom',
// 工具箱背景颜色，默认透明
backgroundColor: 'rgba(218,112,214,0.6)',
// 工具箱边框颜色
borderColor: '#0066FF',
// 工具箱边框线宽，单位px，默认为0（无边框）
borderWidth: 1,
// 工具箱内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
padding: [15,15,15,15],
// 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 20,
// 工具箱icon大小，单位（px）
itemSize: 20,
// 工具箱icon颜色序列，循环使用，同时支持在具体feature内指定color
color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
// 禁用颜色定义
disableColor:'#fff',
// 生效颜色定义
effectiveColor:'red',
// 是否显示工具箱文字提示，默认启用
showTitle:true,
// 工具箱提示文字样式
textStyle:{
// 颜色
color: '#FF7F50',
// 水平对齐方式，可选为：'left' | 'right' | 'center'
align: 'left',
// 垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字体系列
fontFamily: 'Arial, 宋体, sans-serif',
// 字号 ，单位px
fontSize: 20,
// 样式，可选为：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
},
// 启用功能，目前支持feature见下，工具箱自定义功能回调处理
feature : {
// 辅助线标志,分别是启用，删除上一条，删除全部,可设置更多属性
mark : {
show : true,
title : {
mark : '辅助线开关',
markUndo : '删除辅助线',
markClear : '清空辅助线'
},
lineStyle : {
width : 2,
color : '#1e90ff',
type : 'dashed'
}
},
// 框选区域缩放，自动与存在的dataZoom控件同步，上图icon左数4/5，分别是启用，缩放后退
dataZoom : {
show : true,
title : {
dataZoom : '区域缩放',
dataZoomReset : '区域缩放后退'
}
},
// 数据视图，上图icon左数6，打开数据视图，可设置更多属性
dataView : {
show : true,
title : '数据视图',
readOnly: false,
lang: ['数据视图', '关闭', '刷新']
},
// 动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换，上图icon左数6~14，分别是切换为堆积，切换为平铺，切换折线图，切换柱形图，切换为力导向布局图，切换为和弦图，切换为饼图，切换为漏斗图
magicType: {
show : true,
title : {
line : '折线图切换',
bar : '柱形图切换',
stack : '堆积',
tiled : '平铺',
force: '力导向布局图切换',
chord: '和弦图切换',
pie: '饼图切换',
funnel: '漏斗图切换'
},
option: {
// line: {...},
// bar: {...},
// stack: {...},
// tiled: {...},
// force: {...},
// chord: {...},
// pie: {...},
// funnel: {...}
},
type : []
},
// 还原，复位原始图表
restore : {
show : true,
title : '还原'
},
// 保存图片（IE8-不支持），可设置更多属性
saveAsImage : {
show : true,
title : '保存为图片',
type : 'png',
lang : ['点击保存']
}
}
},
// 缩放漫游组件，仅对地图有效
roamController: {
// 显示策略，可选为：true（显示） | false（隐藏）
show: true,
// 水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'right',
// 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top',
// 指定宽度，决定4向漫游圆盘大小，可指定 {number}（宽度，单位px）
width: 120,
// 指定高度，缩放控制键默认会在指定高度的最下方最大化显示，可指定 {number}（高度，单位px）
height:200,
// 缩放漫游组件背景颜色，默认透明
backgroundColor:'rgba(0,0,0,0.1)',
// 缩放漫游组件边框颜色
borderColor: '#1e90ff',
// 缩放漫游组件边框线宽，单位px，默认为0（无边框）
borderWidth: 1,
// 缩放漫游组件内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
padding: [15,15,15,15],
// 漫游组件文字填充颜色
fillerColor:'#000',
// 控制手柄主体颜色
handleColor:'#e3655a',
// 4向漫游移动步伐，单位px
step:10,
// 必须，指定漫游组件可控地图类型
mapTypeControl: {
'china': true
}
},
series : [
{
// 图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。可选为：
// 'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
// 'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
type: 'map',
// 系列名称
name: 'iphone3',
// 地图类型，支持world，china及全国34个省市自治区
mapType: 'china',
// 是否开启滚轮缩放和拖拽漫游,默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
roam: false,
// 图形样式
itemStyle:{
// 默认状态下地图的文字
normal:{label:{show:true}},
// 鼠标放到地图上面显示文字
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '云南',value: Math.round(Math.random()*1000)},
{name: '辽宁',value: Math.round(Math.random()*1000)},
{name: '黑龙江',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山东',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '江苏',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '广西',value: Math.round(Math.random()*1000)},
{name: '甘肃',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '陕西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '贵州',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
},
{
name: 'iphone4',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
},
{
name: 'iphone5',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
]
}
]
};
myChart.setOption(option);
});