最近公司接了一个项目,关于做数据的大屏展示的,在此记录一下一些效果实现遇到的问题和怎么解决的
第一部分
右下角的饼图模块,当其中的标签长度过长的时候,可以采用分页显示
legend: {
textStyle: {
fontWeight: 'normal',
color: '#fff',
fontSize: fontSize(0.14)
},
type: 'scroll', // scroll开启分页
orient: 'vertical', // 标签展示方向
right: 0,
top: fontSize(0.3),
bottom: fontSize(0.5),
data: title
},
核心是中间的地图模块
因为需求不是世界和中国地图,而是区地图,所以只能绘制出区的地图模块,
那么去地图的地理位置数据从这里拿。
拿到对应的json地图数据之后,开始引入
<div class="classNamemap" :style="{height:height}" ref="myEchart" @click="details"></div>
// js引入
import echarts from 'echarts'
import map from '../../utils/map.json' // 引入的地图json
this.chart = echarts.init(this.$refs.myEchart)
echarts.registerMap('longhua', map) // 配置地图
this.chart.setOption({
// echarts 配置
tooltip: {
trigger: 'item'
},
geo: {
// 地图配置
show: true,
left: 'center',
map: 'longhua',
label: {
show: false,
emphasis: {
show: false
}
},
emphasis: {
label: {
show: false
}
},
tooltip: {
show: false
},
roam: false,
itemStyle: {
normal: { // 修改地图的正常背景色
areaColor: '#0F76B1',
borderColor: '#06143A'
},
emphasis: { // 修改地图鼠标悬浮的时候正常背景色
areaColor: '#0F76B1'
}
},
zoom: 1.2
},
series: [
{
// 地图配置
name: '工程数',
type: 'map',
mapType: 'longhua', // 自定义扩展图表类型
geoIndex: 0,
// aspectScale: 0.75, // 长宽比
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
}
},
]
})
画出来的样子
如果需要配置散点图就在series的属性中加入散点配置
{
// 散点配置
name: '扫码',
type: 'effectScatter',
coordinateSystem: 'geo',
data: list, // 数据可以去看官网格式
symbolSize: function (data) {
return data[1] / 2
}, // 散点图的大小,造成随机
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
color: '#EF837F',
period: 4,
scale: 2.5
},
tooltip: {
formatter: '{b}',
show: true
},
hoverAnimation: true,
label: {
color: '#fff',
show: false,
emphasis: { // 高亮时
show: false
}
},
itemStyle: {
normal: {
color: '#F65650'
}
}
},