在vue项目中实现:
1.安装echarts
npm i echarts
2.使用echarts,这里需要中国地图的json数据,可以自行查找(或者私我)。
// echarts5版本,引入echarts的方式发生了改变,要使用以下方式引入
import * as echart from "echarts"
import {ref,onMounted} from "vue"
// 引入中国地图的json数据
import CHINA from "./assets/china.json";
let container=ref()
onMounted(() => {
let myChart = echarts.init(container.value);
// 注册地图
echarts.registerMap("china", CHINA as any);
myChart.setOption({
geo: [
{
show: true,
map: "china",
roam: true,
label: {
show: true,
color: "white",
},
itemStyle: {
areaColor: {
// 径向渐变
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: "green", // 0% 处的颜色
},
{
offset: 1,
color: "#399036", // 100% 处的颜色
},
],
},
},
// 强调(鼠标放上去的省份位置)
emphasis: {
label: {
fontSize: 16,
color: "white",
},
itemStyle: {
color: "green",
opacity: 0.9,
},
},
},
],
series: [
{
// 用于带有起点和终点信息的线数据的绘制,主要用于地图上的航线,路线的可视化
type: "lines",
data: [
{
// coords是一个二维数组
coords: [
[116.405285, 39.904989],
[112.549248, 37.857014],
],
},
{
coords: [
[111.670801, 40.818311],
[121.472644, 31.231706],
],
},
],
lineStyle: {
color: "white",
opacity: 0.1,
width: 2,
type: [2, 2],
curveness: 0.1,
},
// 特效
effect: {
show: true,
period: 4,
// 特效图形的标记,可以使用图片链接,或者"path://"+svg图标的矢量路径
symbol: "rect",
symbolSize: 16,
color: "skyblue",
},
},
],
});
});