tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增地图组件

Browse Source
This commit is contained in:
Administrator
2020-12-08 18:16:01 +08:00
parent c2d169b164
commit 18a3768517
9 changed files with 342 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1
View File
@@ -202,6 +202,7 @@ Vue.prototype.$http = axios.create({
4. 使用 Mixins 注入图表响应式代码。 4. 使用 Mixins 注入图表响应式代码。
5. vue-awesome 改成按需引入的方式。 5. vue-awesome 改成按需引入的方式。
6. 封装渲染函数，抽离了数据使逻辑更加清晰。 6. 封装渲染函数，抽离了数据使逻辑更加清晰。
7. 新增地图组件，并添加自动轮播功能
## 五、其余 ## 五、其余
src/common/echart/index.vue
+3 -2
View File
@@ -4,11 +4,12 @@
<script> <script>
import tdTheme from './theme.json' // 引入默认主题 import tdTheme from './theme.json' // 引入默认主题
import echartMixins from "@/utils/resizeMixins"; import resizeMixins from "@/utils/resizeMixins";
import '../map/fujian.js'
export default { export default {
name: 'echart', name: 'echart',
mixins: [echartMixins], mixins: [resizeMixins],
props: { props: {
className: { className: {
type: String, type: String,
src/common/map/fujian.js
+46
View File
File diff suppressed because one or more lines are too long
src/components/echart/bottom/bottomLeftChart/chart.vue
+1 -4
View File
@@ -150,7 +150,4 @@ export default {
}, },
}, },
} }
</script> </script>
<style lang="scss" scoped>
</style>
src/components/echart/bottom/bottomRightChart/chart.vue
+1 -4
View File
@@ -355,7 +355,4 @@ export default {
} }
} }
}; };
</script> </script>
<style lang="scss" scoped>
</style>
src/components/echart/centerLeft/centerLeft2Chart/chart.vue
+247 -80
View File
@@ -1,18 +1,19 @@
<template> <template>
<div> <div>
<Echart <Echart
:options="options"
id="centreLeft2Chart" id="centreLeft2Chart"
height="4.625rem" ref="centreLeft2ChartRef"
:options="options"
height="4.5rem"
width="4.125rem" width="4.125rem"
></Echart> ></Echart>
</div> </div>
</template> </template>
<script> <script>
import Echart from '@/common/echart' import Echart from '@/common/echart';
export default { export default {
data () { data() {
return { return {
options: {}, options: {},
}; };
@@ -22,94 +23,260 @@ export default {
}, },
props: { props: {
cdata: { cdata: {
type: Object, type: Array,
default: () => ({}) default: () => [],
}, },
}, },
watch: { watch: {
cdata: { cdata: {
handler (newData) { handler(newData) {
// 设置点的位置(经纬度)
const geoCoordMap = {
厦门市: [118.11022, 24.490474, 20],
福州市: [119.206239, 26.275302, 20],
泉州市: [118.589421, 24.908853, 20],
漳州市: [117.561801, 24.510897, 20],
龙岩市: [116.82978, 25.391603, 20],
莆田市: [119.007558, 25.591011, 20],
三明市: [117.435001, 26.465444, 20],
南平市: [118.178459, 27.535627, 20],
宁德市: [119.527082, 27.15924, 20],
};
let seriesData = [
{
name: '厦门市',
},
{
name: '福州市',
},
{
name: '泉州市',
},
{
name: '漳州市',
},
{
name: '龙岩市',
},
{
name: '莆田市',
},
{
name: '三明市',
},
{
name: '南平市',
},
{
name: '宁德市',
},
];
let convertData = function (data) {
let scatterData = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
scatterData.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return scatterData;
};
this.options = { this.options = {
angleAxis: { showLegendSymbol: true,
interval: 1, tooltip: {
type: "category", trigger: 'item',
data: newData.angleAxisData,
z: 10,
axisLine: {
show: true,
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
}
},
axisLabel: {
interval: 0,
show: true,
color: "#00c7ff",
margin: 8,
fontSize: 12
}
},
radiusAxis: {
min: 0,
max: 100,
interval: 20,
axisLine: {
show: true,
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
}
},
axisLabel: {
formatter: "{value} %",
show: false,
padding: [0, 0, 20, 0],
color: "#00c7ff",
fontSize: 16
},
splitLine: {
lineStyle: {
color: "#00c7ff",
width: 1,
type: "solid"
}
}
},
legend: {
show: true,
orient: "vartical",
top: "center",
bottom: "0%",
itemWidth: 16,
itemHeight: 8,
itemGap: 16,
textStyle: { textStyle: {
color: "#A3E2F4", fontSize: 14,
fontSize: 12, lineHeight: 22,
fontWeight: 0 },
position: point => {
// 固定在顶部
return [point[0] + 50, point[1] - 20];
},
// 如果需要自定义 tooltip样式，需要使用formatter
/*
formatter: params => {
return `<div style=""> ... </div>`
}
*/
},
visualMap: {
min: 0,
max: 10,
show: false,
seriesIndex: 0,
// 颜色
inRange: {
color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
},
},
// 底部背景
geo: {
show: true,
aspectScale: 0.85, //长宽比
zoom: 1.2,
top: '10%',
left: '16%',
map: '福建',
roam: false,
itemStyle: {
normal: {
areaColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(7,114,204, .8)',
shadowOffsetX: 5,
shadowOffsetY: 5,
},
emphasis: {
areaColor: '#00aeef',
},
}, },
}, },
polar: {},
series: [ series: [
{ {
name: "A", name: '相关指数',
type: "bar", type: 'map',
radius: ["20%", "100%"], aspectScale: 0.85, //长宽比
data: newData.seriesData, zoom: 1.2,
coordinateSystem: "polar" mapType: '福建', // 自定义扩展图表类型
} top: '10%',
] left: '16%',
itemStyle: {
normal: {
color: 'red',
areaColor: 'rgba(19,54,162, .5)',
borderColor: 'rgba(0,242,252,.3)',
borderWidth: 1,
shadowBlur: 7,
shadowColor: '#00f2fc',
},
emphasis: {
areaColor: '#4f7fff',
borderColor: 'rgba(0,242,252,.6)',
borderWidth: 2,
shadowBlur: 10,
shadowColor: '#00f2fc',
},
},
label: {
formatter: params => `${params.name}`,
show: true,
position: 'insideRight',
textStyle: {
fontSize: 14,
color: '#efefef',
},
emphasis: {
textStyle: {
color: '#fff',
},
},
},
data: newData,
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 7,
effectType: 'ripple',
legendHoverLink: false,
showEffectOn: 'render',
rippleEffect: {
period: 4,
scale: 2.5,
brushType: 'stroke',
},
zlevel: 1,
itemStyle: {
normal: {
color: '#99FBFE',
shadowBlur: 5,
shadowColor: '#fff',
},
},
data: convertData(seriesData),
},
],
}; };
// 重新选择区域
this.handleMapRandomSelect();
}, },
immediate: true, immediate: true,
deep: true deep: true,
} },
} },
methods: {
// 开启定时器
startInterval() {
const _self = this;
// 应通过接口获取配置时间，暂时写死5s
const time = 2000;
if (this.intervalId !== null) {
clearInterval(this.intervalId);
}
this.intervalId = setInterval(() => {
_self.reSelectMapRandomArea();
}, time);
},
// 重新随机选中地图区域
reSelectMapRandomArea() {
const length = 9;
this.$nextTick(() => {
const map = this.$refs.centreLeft2ChartRef.chart;
let index = Math.floor(Math.random() * length);
while (index === this.preSelectMapIndex || index >= length) {
index = Math.floor(Math.random() * length);
}
map.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: this.preSelectMapIndex,
});
map.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index,
});
map.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: index,
});
this.preSelectMapIndex = index;
});
},
handleMapRandomSelect() {
this.$nextTick(() => {
const map = this.$refs.centreLeft2ChartRef.chart;
const _self = this;
setTimeout(() => {
_self.reSelectMapRandomArea();
}, 0);
// 移入区域，清除定时器、取消之前选中并选中当前
map.on('mouseover', function (params) {
clearInterval(_self.intervalId);
map.dispatchAction({
type: 'mapUnSelect',
seriesIndex: 0,
dataIndex: _self.preSelectMapIndex,
});
map.dispatchAction({
type: 'mapSelect',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
_self.preSelectMapIndex = params.dataIndex;
});
// 移出区域重新随机选中地图区域，并开启定时器
map.on('globalout', function () {
_self.reSelectMapRandomArea();
_self.startInterval();
});
this.startInterval();
});
},
},
}; };
</script> </script>
<style lang="scss" scoped>
</style>
src/components/echart/centerLeft/centerLeft2Chart/index.vue
+41 -95
View File
@@ -9,102 +9,48 @@ import Chart from './chart.vue';
export default { export default {
data () { data () {
return { return {
cdata: { cdata: [
angleAxisData: [ {
"there1", // 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
"there2", name: '福州市',
"there3", value: 10,
"there4", elseData:{
"there5", // 这里放置地图 tooltip 里想显示的数据
"there6",
"there7",
"there8",
"there9",
"there10 "
],
seriesData: [
{
value: 87,
itemStyle: {
normal: {
color: "#f54d4d"
}
}
},
{
value: 80,
itemStyle: {
normal: {
color: "#f87544"
}
}
},
{
value: 75,
itemStyle: {
normal: {
color: "#ffae00"
}
}
},
{
value: 69,
itemStyle: {
normal: {
color: "#dcff00"
}
}
},
{
value: 63,
itemStyle: {
normal: {
color: "#25d053"
}
}
},
{
value: 54,
itemStyle: {
normal: {
color: "#01fff5"
}
}
},
{
value: 47,
itemStyle: {
normal: {
color: "#007cff"
}
}
},
{
value: 40,
itemStyle: {
normal: {
color: "#4245ff"
}
}
},
{
value: 35,
itemStyle: {
normal: {
color: "#c32eff"
}
}
},
{
value: 33,
itemStyle: {
normal: {
color: "#ff62e8"
}
}
} }
] },
} {
name: '厦门市',
value: 9,
},
{
name: '漳州市',
value: 8,
},
{
name: '泉州市',
value: 7,
},
{
name: '三明市',
value: 6,
},
{
name: '莆田市',
value: 5,
},
{
name: '南平市',
value: 4,
},
{
name: '龙岩市',
value: 3,
},
{
name: '宁德市',
value: 2,
}
]
} }
}, },
components: { components: {
src/components/echart/centerRight/centerRightChart/chart.vue
+1 -4
View File
@@ -128,7 +128,4 @@ export default {
} }
} }
}; };
</script> </script>
<style lang="scss" scoped>
</style>
src/views/centerLeft2.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<icon name="chart-pie"></icon> <icon name="chart-pie"></icon>
</span> </span>
<div class="d-flex"> <div class="d-flex">
<span class="fs-xl text mx-2">数据情况</span> <span class="fs-xl text mx-2">地图数据</span>
<dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" /> <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
</div> </div>
</div> </div>