You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
800 lines
24 KiB
800 lines
24 KiB
<template>
|
|
<div class="center-right">
|
|
<div class="bs-card business-serve">
|
|
<div class="bs-card__title jc-between">
|
|
<p class="bs-card__title--text">
|
|
商业化服务
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<div id="business-serve-pie-chart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bs-card serve-map">
|
|
<div class="bs-card__title jc-between">
|
|
<p class="bs-card__title--text">
|
|
服务地图
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<div id="serve-map-fly-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import China from "echarts/map/json/china.json"
|
|
import echarts from 'echarts'
|
|
export default {
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
methods: {
|
|
initFlyLine () {
|
|
this.flyLineChart = echarts.init(document.querySelector('#serve-map-fly-line'));
|
|
echarts.registerMap('china', China)
|
|
this.setFlyLineOptions(this.flyLineChartData);
|
|
},
|
|
setFlyLineOptions (chartdata) {
|
|
this.flyLineChart.setOption({
|
|
visualMap: {
|
|
show: false,
|
|
type: 'continuous',
|
|
calculable: true,
|
|
left: '0%',
|
|
bottom: '3%',
|
|
dimension: 0, // 指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
|
|
seriesIndex: 1,
|
|
itemWidth: 15, // 图形的宽度，即长条的宽度。
|
|
itemHeight: 68,
|
|
min: 0,
|
|
// max: that.mapmax,
|
|
// color: ['#01fffd', '#1E74FF'],
|
|
// color: ['#0B64F3', '#1A05B8'],
|
|
color: ['#007EF9 ', '#0B275E'],
|
|
textStyle: {
|
|
color: '#ccc',
|
|
fontSize: 12
|
|
}
|
|
},
|
|
tooltip: {
|
|
// 轮播框
|
|
enterable: true,
|
|
transitionDuration: 1,
|
|
textStyle: {
|
|
fontFamily: 'Microsoft YaHei',
|
|
color: '#b8c8e5',
|
|
fontSize: 13
|
|
},
|
|
backgroundColor: 'rgba(15,33,70,0.7)',
|
|
borderColor: 'rgba(54,82,132,0.7)',
|
|
borderWidth: 1,
|
|
padding: [10, 14],
|
|
extraCssText: 'z-index:4',
|
|
formatter: function (parma) {
|
|
if(parma.seriesType === 'effectScatter') {
|
|
return parma.name
|
|
} else {
|
|
return parma.name
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
show: false,
|
|
color: ['#5bffde'],
|
|
icon: 'circle', // 只显示小圆点
|
|
|
|
top: '10.7%',
|
|
// bottom: '2.8%',
|
|
left: '2%',
|
|
itemGap: 22,
|
|
itemWidth: 8, // 图例图形宽度
|
|
textStyle: {
|
|
color: '#ffff',
|
|
fontSize: 14,
|
|
fontWeight: 'normal',
|
|
// align: "left",
|
|
padding: [0, 3],
|
|
fontFamily: 'Microsoft YaHei'
|
|
},
|
|
itemHeight: 8 // 改变圆圈大小
|
|
},
|
|
geo: {
|
|
zoom: 1.22, // 缩放比例
|
|
top: '11%',
|
|
left: '20%',
|
|
show: true,
|
|
aspectScale: 0.85,
|
|
silent: true, // 鼠标事件是否开启
|
|
animation: true,
|
|
map: 'china',
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
roam: false, //是否可缩放
|
|
// aspectScale: 1, //长宽比
|
|
// 这里是重点！！！
|
|
regions: [
|
|
{
|
|
name: '南海诸岛',
|
|
itemStyle: {
|
|
// 隐藏地图
|
|
normal: {
|
|
opacity: 0 // 为 0 时不绘制该图形
|
|
}
|
|
},
|
|
label: {
|
|
show: false // 隐藏文字
|
|
}
|
|
}
|
|
],
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
// areaColor: '#122C69', // #415ef7
|
|
borderColor: '#122C69',
|
|
shadowColor: '#122C69',
|
|
shadowOffsetX: 1,
|
|
shadowOffsetY: 9
|
|
// borderWidth: 3,
|
|
},
|
|
emphasis: {
|
|
areaColor: '#4499d0'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '背景地图',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
symbolSize: function () {
|
|
return 8
|
|
},
|
|
// data: mapData,
|
|
data: [],
|
|
rippleEffect: {
|
|
period: 4,
|
|
scale: 1.5,
|
|
brushType: 'stroke'
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'bottom',
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
showEffectOn: 'render',
|
|
hoverAnimation: true,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#5bffde' // 点的颜色
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
// 高亮 鼠标移上去
|
|
// emphasis: {
|
|
// color: 'red'
|
|
// }
|
|
},
|
|
// select: {
|
|
// // 选中
|
|
// itemStyle: {
|
|
// color: 'yellow'
|
|
// }
|
|
// },
|
|
zlevel: 1
|
|
},
|
|
{
|
|
// 真的地图
|
|
type: 'map',
|
|
map: 'china',
|
|
zoom: 1.22, // 缩放比例
|
|
geoIndex: 1,
|
|
left: '20%',
|
|
top: '11%',
|
|
aspectScale: 0.85, // 长宽比
|
|
showLegendSymbol: true, // 存在legend时显示
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
roam: false,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'none',
|
|
areaColor:'#dce5ee', //'#01032a',
|
|
borderColor: '#246BD2', // 4065eb
|
|
borderWidth: 1,
|
|
},
|
|
emphasis: {
|
|
areaColor: '#34d1fc'
|
|
}
|
|
},
|
|
select: {
|
|
// 选中时样式
|
|
label: {
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
areaColor: '#34d1fc'
|
|
}
|
|
},
|
|
animation: true,
|
|
|
|
data: []
|
|
// data: that.maparr
|
|
},
|
|
{
|
|
name: '大网点',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
symbolSize: function () {
|
|
return 14
|
|
},
|
|
data: [
|
|
{
|
|
name: '当前重点的地址名称',
|
|
value: {
|
|
visualMap: {
|
|
show: false,
|
|
type: 'continuous',
|
|
calculable: true,
|
|
left: '0%',
|
|
bottom: '3%',
|
|
dimension: 0, // 指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
|
|
seriesIndex: 1,
|
|
itemWidth: 15, // 图形的宽度，即长条的宽度。
|
|
itemHeight: 68,
|
|
min: 0,
|
|
// max: that.mapmax,
|
|
// color: ['#01fffd', '#1E74FF'],
|
|
// color: ['#0B64F3', '#1A05B8'],
|
|
color: ['#007EF9 ', '#0B275E'],
|
|
textStyle: {
|
|
color: '#ccc',
|
|
fontSize: 12
|
|
}
|
|
},
|
|
tooltip: {
|
|
// 轮播框
|
|
enterable: true,
|
|
transitionDuration: 1,
|
|
textStyle: {
|
|
fontFamily: 'Microsoft YaHei',
|
|
color: '#b8c8e5',
|
|
fontSize: 13
|
|
},
|
|
backgroundColor: 'rgba(15,33,70,0.7)',
|
|
borderColor: 'rgba(54,82,132,0.7)',
|
|
borderWidth: 1,
|
|
padding: [10, 14],
|
|
extraCssText: 'z-index:4',
|
|
formatter: function (parma) {
|
|
if(parma.seriesType === 'effectScatter') {
|
|
return parma.name
|
|
} else {
|
|
return parma.name
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
show: false,
|
|
color: ['#5bffde'],
|
|
icon: 'circle', // 只显示小圆点
|
|
|
|
top: '10.7%',
|
|
// bottom: '2.8%',
|
|
left: '2%',
|
|
itemGap: 22,
|
|
itemWidth: 8, // 图例图形宽度
|
|
textStyle: {
|
|
color: '#ffff',
|
|
fontSize: 14,
|
|
fontWeight: 'normal',
|
|
// align: "left",
|
|
padding: [0, 3],
|
|
fontFamily: 'Microsoft YaHei'
|
|
},
|
|
itemHeight: 8 // 改变圆圈大小
|
|
},
|
|
geo: {
|
|
zoom: 1.22, // 缩放比例
|
|
top: '11%',
|
|
left: '20%',
|
|
show: true,
|
|
aspectScale: 0.85,
|
|
silent: true, // 鼠标事件是否开启
|
|
animation: true,
|
|
map: 'china',
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
roam: false, //是否可缩放
|
|
// aspectScale: 1, //长宽比
|
|
// 这里是重点！！！
|
|
regions: [
|
|
{
|
|
name: '南海诸岛',
|
|
itemStyle: {
|
|
// 隐藏地图
|
|
normal: {
|
|
opacity: 0 // 为 0 时不绘制该图形
|
|
}
|
|
},
|
|
label: {
|
|
show: false // 隐藏文字
|
|
}
|
|
}
|
|
],
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
// areaColor: '#122C69', // #415ef7
|
|
borderColor: '#122C69',
|
|
shadowColor: '#122C69',
|
|
shadowOffsetX: 1,
|
|
shadowOffsetY: 9
|
|
// borderWidth: 3,
|
|
},
|
|
emphasis: {
|
|
areaColor: '#4499d0'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '接单网点',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
symbolSize: function () {
|
|
return 8
|
|
},
|
|
// data: mapData,
|
|
data: [],
|
|
rippleEffect: {
|
|
period: 4,
|
|
scale: 1.5,
|
|
brushType: 'stroke'
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'bottom',
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
showEffectOn: 'render',
|
|
hoverAnimation: true,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#5bffde' // 点的颜色
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
// 高亮 鼠标移上去
|
|
// emphasis: {
|
|
// color: 'red'
|
|
// }
|
|
},
|
|
// select: {
|
|
// // 选中
|
|
// itemStyle: {
|
|
// color: 'yellow'
|
|
// }
|
|
// },
|
|
zlevel: 1
|
|
},
|
|
{
|
|
// 真的地图
|
|
type: 'map',
|
|
map: 'china',
|
|
zoom: 1.22, // 缩放比例
|
|
geoIndex: 1,
|
|
left: '20%',
|
|
top: '11%',
|
|
aspectScale: 0.85, // 长宽比
|
|
showLegendSymbol: true, // 存在legend时显示
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
roam: false,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'none',
|
|
areaColor:'#122C69', //'#01032a',
|
|
borderColor: '#246BD2', // 4065eb
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
areaColor: '#34d1fc'
|
|
}
|
|
},
|
|
select: {
|
|
// 选中时样式
|
|
label: {
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
areaColor: '#34d1fc'
|
|
}
|
|
},
|
|
animation: true,
|
|
|
|
data: []
|
|
// data: that.maparr
|
|
},
|
|
{
|
|
name: '网点',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
symbolSize: function () {
|
|
return 14
|
|
},
|
|
data: [
|
|
{
|
|
name: '终点名称-广东',
|
|
value: ['113.746262', '23.046237'] // 当前终点的经纬度
|
|
}
|
|
],
|
|
rippleEffect: {
|
|
period: 4,
|
|
scale: 1.5,
|
|
brushType: 'stroke'
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'bottom',
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
showEffectOn: 'render',
|
|
hoverAnimation: true,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#5bffde' // 点的颜色
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
// 高亮 鼠标移上去
|
|
// emphasis: {
|
|
// color: 'red'
|
|
// }
|
|
},
|
|
// select: {
|
|
// // 选中
|
|
// itemStyle: {
|
|
// color: 'yellow'
|
|
// }
|
|
// },
|
|
zlevel: 2
|
|
},
|
|
{
|
|
type: 'lines',
|
|
zlevel: 1,
|
|
effect: {
|
|
show: true,
|
|
period: 6, //箭头指向速度，值越小速度越快
|
|
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
|
symbol: 'arrow', //箭头图标
|
|
symbolSize: 6 //图标大小
|
|
},
|
|
label: {
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1, //尾迹线条宽度
|
|
color: '#27C7E9',
|
|
opacity: 1, //尾迹线条透明度
|
|
curveness: 0.3 //尾迹线条曲直度
|
|
}
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
}
|
|
}
|
|
],
|
|
rippleEffect: {
|
|
period: 4,
|
|
scale: 1.5,
|
|
brushType: 'stroke'
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'bottom',
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
showEffectOn: 'render',
|
|
hoverAnimation: true,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#5bffde' // 点的颜色
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
// 高亮 鼠标移上去
|
|
// emphasis: {
|
|
// color: 'red'
|
|
// }
|
|
},
|
|
// select: {
|
|
// // 选中
|
|
// itemStyle: {
|
|
// color: 'yellow'
|
|
// }
|
|
// },
|
|
zlevel: 2
|
|
},
|
|
{
|
|
type: 'lines',
|
|
zlevel: 1,
|
|
effect: {
|
|
show: true,
|
|
period: 6, //箭头指向速度，值越小速度越快
|
|
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
|
symbol: 'arrow', //箭头图标
|
|
symbolSize: 6 //图标大小
|
|
},
|
|
label: {
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1, //尾迹线条宽度
|
|
color: '#27C7E9',
|
|
opacity: 1, //尾迹线条透明度
|
|
curveness: 0.3 //尾迹线条曲直度
|
|
}
|
|
},
|
|
data: [
|
|
[
|
|
{ // 第一个起点的经纬度配置
|
|
coord:['119.946973', '31.772752'],
|
|
value: "0000100101"
|
|
},
|
|
{
|
|
coord: ['113.746262', '23.046237'] // 跟上面的广东那一层的经纬度对应
|
|
}
|
|
],
|
|
[
|
|
{ // 第二个起点的经纬度配置
|
|
coord:['119.946973', '31.772752'],
|
|
value: "0000100101"
|
|
},
|
|
{
|
|
coord: ['113.746262', '23.046237'] // 跟上面的广东那一层的经纬度对应
|
|
}
|
|
]
|
|
]
|
|
}
|
|
]
|
|
})
|
|
},
|
|
|
|
initChart() {
|
|
this.chart = echarts.init(document.querySelector('#business-serve-pie-chart'));
|
|
this.setOptions(this.chartData);
|
|
},
|
|
setOptions() {
|
|
this.chart.setOption({
|
|
title: {
|
|
show: false,
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
visualMap: {
|
|
show: false,
|
|
min: 60,
|
|
max: 600,
|
|
inRange: {
|
|
colorLightness: [0, 1]
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '60%',
|
|
center: ['50%', '50%'],
|
|
data: [
|
|
{
|
|
value: 550,
|
|
name: '居家照护',
|
|
itemStyle: {
|
|
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#7a2cf5'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#b274f7'
|
|
}
|
|
])
|
|
}
|
|
},
|
|
{
|
|
value: 510,
|
|
name: '陪诊',
|
|
itemStyle: {
|
|
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#53a2c1'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#6fe8fb'
|
|
}
|
|
])
|
|
}
|
|
},
|
|
{
|
|
value: 510,
|
|
name: '问诊',
|
|
itemStyle: {
|
|
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#81bf3b'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#6be04a'
|
|
}
|
|
])
|
|
}
|
|
},
|
|
{
|
|
value: 620,
|
|
name: '个性化服务',
|
|
itemStyle: {
|
|
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#ad862e'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#dfb43f'
|
|
}
|
|
])
|
|
}
|
|
},
|
|
{
|
|
value: 580,
|
|
name: '医院陪护',
|
|
itemStyle: {
|
|
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#2238ed'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#3779f0'
|
|
}
|
|
])
|
|
}
|
|
}
|
|
].sort(function (a, b) {
|
|
return a.value - b.value;
|
|
}),
|
|
roseType: 'radius',
|
|
label: {
|
|
color: '#fff',
|
|
formatter: '{b} \n {c}个{d}%'
|
|
},
|
|
labelLine: {
|
|
lineStyle: {
|
|
color: '#71e8fc'
|
|
},
|
|
smooth: 0.2,
|
|
length: 10,
|
|
length2: 20
|
|
},
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
shadowBlur: 100,
|
|
// shadowColor: 'rgba(0, 0, 0, 0.2)'
|
|
}
|
|
},
|
|
animationType: 'scale',
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function (idx) {
|
|
return Math.random() * 200;
|
|
}
|
|
}
|
|
]
|
|
})
|
|
|
|
}
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
this.initChart()
|
|
this.initFlyLine()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.center-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.business-serve {
|
|
height: 382px;
|
|
|
|
#business-serve-pie-chart {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
}
|
|
.serve-map {
|
|
height: 243px;
|
|
|
|
#serve-map-fly-line {
|
|
height: 170px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|