Vue3.2+Vite+Echarts 5 に中国の 3D 線効果地図を描画するよう教える
序章
この記事では、Vue3.2+Vite プロジェクトで Echarts 5 を使用して中国の地図を描画し、配布ポイントをマークする方法を紹介します。これまで Echarts に触れたことがない場合は、まず公式サンプルにアクセスすると、そのグラフィックスは非常に完成度が高くなります。ただ、公式文書は面倒そうだし、覚えることが多すぎるので、無駄な作業を繰り返さずに自分でまとめて次回すぐに使えるようにします。
プラグインをインストールする
1. echartをダウンロードして導入する
Echarts はバージョン 5.0 以降に更新されています。インストール後、バージョンが 5.0 以降であるかどうかを必ず確認してください。
インストールが完了したら、package.json? でインストールが成功したかどうかを確認します。
// `安装`
npm install echarts --save
2. 地図のjsonデータをダウンロードする
Alibaba Cloud は中国と各省の地図データをダウンロード、無料ファイルのダウンロード アドレス:
ポータル [ダウンロード アドレス]
引入需要绘制的地图数据 json 或 js 文件，本文使用的是 json 格式：
// 地图的 json 数据
import chinaJson from '../utils/china.json'
3. グローバル インポートまたはローカル インポート (ここでは単一ページのローカル インポートを選択します)
1. グローバル インポート man.js でマウントをインポートします;
2. 単一ページのインポート方法:
<script setup>
import * as echarts from 'echarts'
import chinaJson from '../utils/china.json'
</script>
3. 容器を準備する
//
<div ref="chinaMap" class="map"></div>
4. echarts オブジェクトをインスタンス化する
<script setup>
import * as echarts from 'echarts'
import chinaJson from '../utils/china.json' // 地图的 json 数据
// 初始化
const chinaMap = ref()
var myChart = echarts.init(chinaMap.value)
echarts.registerMap('china', chinaJson) //注册可用的地图
</script>
5. 設定項目とデータを指定する
var option = {
// 存放需要绘制图片类型，以及样式设置
}
4. 中国の簡素化された地図を描き始めます
1、开始绘制
const drawChina = () => {
var myChart = echarts.init(chinaMap.value)
echarts.registerMap('china', chinaJson) //注册可用的地图
var option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(252, 252, 252, 0.82)',
borderColor: '#fff',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: (params, ticket, callback) => {
//根据业务自己拓展要显示的内容
// console.log(params,'params',)
var res = ''
var initss = 0
var newArry = ''
var name = params.name
// var value = params.value[params.seriesIndex + 1]
if (params.data.ints > 0) {
initss = params.data.ints
}
if (params.data.tit?.length > 0) {
newArry = Array.from(params.data.tit,(item)=> item.title)
}
res = "<div style='max-width:500px;white-space:pre-wrap;'><span>" + name + '</span>旅游：'+ "<div style='color: red;'>" + newArry + "</div></div>"
return res
},
},
geo: {
show: true,
center: [105.194115019531, 35.582111640625],
map: 'china',
roam: drawChinaObj.roam, //是否允许缩放，拖拽
zoom: drawChinaObj.zoom, //初始化大小
//缩放大小限制
scaleLimit: {
min: 0.1, //最小
max: 12, //最大
},
//设置中心点
//center: [95.97, 29.71],
//省份地图添加背景
//regions: regions,
itemStyle: {
// normal: {
areaColor: '#3352c7',
color: '#e91e63',
borderColor: '#5e84fd',
borderWidth: 2,
// },
},
label: {
color: 'rgba(255,255,255,0.5)',
show: false,
},
//高亮状态
emphasis: {
label: {
show: true,
color: '#fff',
},
itemStyle: {
areaColor: '#e91e63',
},
},
z: 10,
},
//配置属性
series: series,
}
myChart.setOption(option)
}
2. ラインアニメーション効果のキーコード処理:
var series = []
;[['上海', chinaDatas]].forEach((item, i) => {
series.push(
//设置指向箭头信息
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 8, //图标大小
},
coords:[[1,2],[2,3]],
lineStyle: {
// normal: {
color: '#adffd0',
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
// },
},
data: convertData(item[1]),
},
// 发射点位置涟漪等效果
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4, //波纹圆环最大限制，值越大波纹越大
},
itemStyle: {
// normal: {
show: false,
color: '#f8f9f5',
// },
},
label: {
// normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function (params) {
//圆环显示文字
return params.data.name
},
fontSize: 13,
// },
emphasis: {
show: true,
},
},
symbol: 'circle',
symbolSize: (val) => {
return 5 + val[2] * 5 //圆环大小
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
tit: dataItem[0].obj,
ints: dataItem[0].ints,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
}
}),
},
//被攻击点
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪相关
period: 2,
brushType: 'stroke',
scale: 5,
},
itemStyle: {
color: '#f00',
},
label: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#fff',
fontSize: 12,
},
emphasis: {
show: true,
color: '#f60',
},
},
symbol: 'circle',
symbolSize: 10, //圆圈大小
data: [
{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
},
],
},
)
})
プロジェクトの実践
最後に完璧なケースを共有します
<template>
<div class="page">
<div class="h1">管理后台大屏可视化界面</div>
<!-- 封装组件全局挂载 -->
<div class="time">
<mm-time />
</div>
<div class="ul">
<span @click="onClickOpen(1)">还原</span>
<span @click="onClickOpen(2)" :class="{'spanBg': !drawChinaObj.roam}">固定</span>
<span @click="onClickOpen(3)">缩放+</span>
<span @click="onClickOpen(4)">缩放-</span>
<span @click="onClickOpen(5)">刷新</span>
</div>
<!-- 组件小提示 -->
<div class="tip">
<TextSoll />
</div>
<div ref="chinaMap" class="map"></div>
</div>
</template>
<script setup>
import * as echarts from 'echarts'
import chinaJson from '../utils/china.json'
import TextSoll from '@/components/textSoll.vue'
const {
proxy } = getCurrentInstance()
onMounted(() => {
drawChina()
})
// 事件
const onClickOpen = (e) => {
if (e == 1) {
drawChinaObj.roam = true
drawChinaObj.zoom = 1.5
} else if (e == 2) {
drawChinaObj.roam = false
} else if (e === 3) {
drawChinaObj.zoom = drawChinaObj.zoom + 0.2
} else if (e === 4) {
drawChinaObj.zoom = drawChinaObj.zoom - 0.2
} else {
drawChina()
}
drawChina()
}
// 初始化
const chinaMap = ref()
const drawChinaObj = reactive({
hint: proxy.$utlis.handleTips(),
roam: false,
zoom: 1.5,
})
/**
* 设置投射点
* 中国地理坐标图
*/
const chinaGeoCoordMap = {
上海: [121.46503408447266, 31.221068849156694],
湖南省张家界: [110.54218025390624, 29.122992832430285],
湖南省凤凰古城: [109.10110225, 27.4452938],
浙江省杭州西湖: [120.1941180322266, 30.23469703027832],
重庆市: [109.40093,31.018551],
广西省北海涠洲岛: [109.23477202734375,20.857876355435824],
哈尔滨市: [127.16687354565428,45.45942366122554],
}
const chinaDatas = [
[
{
name: '湖南省张家界',
value: 1,
ints: 10,
obj: [
{
title: '张家界(1次)'},
]
},
],
[
{
name: '湖南省凤凰古城',
value: 1,
ints: 10,
obj: [
{
title: '凤凰古城(1次)'},
]
},
],
[
{
name: '浙江省杭州西湖',
value: 1,
ints: 10,
obj: [
{
title: '杭州西湖(1次)'}
]
},
],
[
{
name: '重庆市',
value: 1,
ints: 10,
obj: [
{
title: '巴南区花园(1次)'},
{
title: '奉节县白帝城(1次)'},
]
},
],
[
{
name: '广西省北海涠洲岛',
value: 1,
ints: 10,
obj: [
{
title: '北海涠洲岛(1次)'}
]
},
],
[
{
name: '哈尔滨市',
value: 1,
ints: 10,
obj: [
{
title: '哈尔滨市'}
]
}
]
]
const scatterPos = [121.46503408447266, 31.221068849156694]
// 1
const convertData = (data) => {
var res = []
for (var i = 0; i < data.length; i++) {
var dataItem = data[i]
var fromCoord = chinaGeoCoordMap[dataItem[0].name]
console.log(dataItem,'fromCoord')
var toCoord = scatterPos
if (fromCoord && toCoord) {
res.push([
{
tit: dataItem[0].obj,
coord: fromCoord,
value: dataItem[0].value,
},
{
coord: toCoord,
},
])
}
}
console.log('res', res)
return res
}
// 2
var series = []
;[['上海', chinaDatas]].forEach((item, i) => {
series.push(
// {
// //绘制一个新地图
// type: 'map',
// map: 'china',
// zoom: 1,
// center: [105.194115019531, 35.582111640625],
// z: -1,
// aspectScale: 0.75, //
// itemStyle: {
// // normal: {
// areaColor: '#f00',
// borderColor: '#090438',
// borderWidth: '2',
// shadowColor: '#090438',
// shadowOffsetX: 0,
// shadowOffsetY: 15,
// // },
// },
// },
//设置指向箭头信息
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 8, //图标大小
},
coords:[[1,2],[2,3]],
lineStyle: {
// normal: {
color: '#adffd0',
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
// },
},
data: convertData(item[1]),
},
// 发射点位置涟漪等效果
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4, //波纹圆环最大限制，值越大波纹越大
},
itemStyle: {
// normal: {
show: false,
color: '#f8f9f5',
// },
},
label: {
// normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function (params) {
//圆环显示文字
return params.data.name
},
fontSize: 13,
// },
emphasis: {
show: true,
},
},
symbol: 'circle',
symbolSize: (val) => {
return 5 + val[2] * 5 //圆环大小
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
tit: dataItem[0].obj,
ints: dataItem[0].ints,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
}
}),
},
//被攻击点
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪相关
period: 2,
brushType: 'stroke',
scale: 5,
},
itemStyle: {
color: '#f00',
},
label: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#fff',
fontSize: 12,
},
emphasis: {
show: true,
color: '#f60',
},
},
symbol: 'circle',
symbolSize: 10, //圆圈大小
data: [
{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
},
],
},
)
})
// 3
const drawChina = () => {
var myChart = echarts.init(chinaMap.value)
echarts.registerMap('china', chinaJson) //注册可用的地图
var option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(252, 252, 252, 0.82)',
borderColor: '#fff',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: (params, ticket, callback) => {
//根据业务自己拓展要显示的内容
// console.log(params,'params',)
var res = ''
var initss = 0
var newArry = ''
var name = params.name
// var value = params.value[params.seriesIndex + 1]
if (params.data.ints > 0) {
initss = params.data.ints
}
if (params.data.tit?.length > 0) {
newArry = Array.from(params.data.tit,(item)=> item.title)
}
res = "<div style='max-width:500px;white-space:pre-wrap;'><span>" + name + '</span>旅游：'+ "<div style='color: red;'>" + newArry + "</div></div>"
return res
},
},
geo: {
show: true,
center: [105.194115019531, 35.582111640625],
map: 'china',
roam: drawChinaObj.roam, //是否允许缩放，拖拽
zoom: drawChinaObj.zoom, //初始化大小
//缩放大小限制
scaleLimit: {
min: 0.1, //最小
max: 12, //最大
},
//设置中心点
//center: [95.97, 29.71],
//省份地图添加背景
//regions: regions,
itemStyle: {
// normal: {
areaColor: '#3352c7',
color: '#e91e63',
borderColor: '#5e84fd',
borderWidth: 2,
// },
},
label: {
color: 'rgba(255,255,255,0.5)',
show: false,
},
//高亮状态
emphasis: {
label: {
show: true,
color: '#fff',
},
itemStyle: {
areaColor: '#e91e63',
},
},
z: 10,
},
//配置属性
series: series,
}
myChart.setOption(option)
}
</script>
<style lang="less" scoped>
.page {
width: 100%;
height: 100%;
background-image: url(xxxxxxxxxxx);
background-position: 0% 0%;
background-size: 100% 100%;
background-repeat: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
position: relative;
.h1 {
position: absolute;
width: 100%;
top: 4%;
text-align: center;
// padding: 27px 0;
font-size: 26px;
font-weight: bold;
color: #fff;
letter-spacing: 4px;
}
.time {
position: absolute;
width: 300px;
top: 6%;
left: 2%;
color: #fff;
text-align: center;
z-index: 100;
}
.ul {
position: absolute;
width: 100%;
top: 12%;
z-index: 9;
font-size: 12px;
color: #fff;
text-align: center;
margin-top: 10px;
span {
color: #03A9F4;
padding: 4px 12px;
border-radius: 4px;
border: 2px solid #03A9F4;
margin-left: 10px;
cursor: pointer;
&:first-child {
margin-left: 0px;
}
&:active {
color: #fff;
background-color: rgba(137, 192, 243, 0.82)
}
}
.spanBg {
color: #fff;
background-color: rgba(137, 192, 243, 0.82)
}
}
.tip {
position: absolute;
width: 360px;
top: 6%;
right: 2%;
color: #b9b5b5;
float: right;
}
.map {
width: 100%;
margin: auto;
height: calc(100vh);
position: relative;
// width: 100%;
// height: calc(100vh - 90px);
// background: rgba(6, 58, 214, 0.1);
transform: rotate3d(1, 0, 0, 35deg);
}
}
</style>
要約:
前への道 | 私はほとんど知識がありませんが、学ぶのは得意です。
ご質問がございましたら、メッセージを残してご相談ください。
— フォローしてください: フロントエンドで迷わないように —