### eCharts
官方文档：基本介绍、示例、API文档、配置项
实例--->官方实例
文档--->教程、配置项手册
echarts基本使用：（App.vue）
①安装插件：
npm install echarts（项目名不能和插件名相同）
②引入：
import echarts from "echarts";
③mounted中初始化（echarts.init()）：
this.echartsObj=echarts.init(this.$refs.map);
④echartsObj.setOption()设置配置项（配置项从官方实例中粘贴option）：
this.echartsObj.setOption(option);
⑤如果还没有显示，可能是.map没有高度：
.map {position: fixed;left: 0;bottom: 0;top: 0;right: 0;}
⑥如果需要其他图表，只需要将option对象替换就行。
⑦在配置项手册中，可以进行搜索，查询每个配置项的作用，可以对option中的配置项进行添加和修改，对图表进行优化。
### HackerAttacks 黑客攻击
显示世界地图：
引入世界地图的json信息：
import worldJson from "echarts/map/json/world.json";
将地图信息注册为map对象：
echarts.registerMap("world",worldJson);
将map结构配置到配置项里：
series:[{type:"map",map:"world"}]
具体代码：
<template>
<div class="hackerAttacks" ref="hackerAttacks">黑客攻击</div>
</template>
<script>
import echarts from "echarts";
import worldJson from "echarts/map/json/world.json";
import chinaJson from "echarts/map/json/china.json";
import chinaContourJson from "echarts/map/json/china-contour.json";
import chinaCitiesJson from "echarts/map/json/china-cities.json";
import anHuiJson from "echarts/map/json/province/anhui.json";
let lineData = [
{
fromName: "北京",
toName: "Lakshadweep",
coords: [// coord----坐标
[116.46, 39.92],
[72.7811, 11.2249]
]
},
{
fromName: "北京",
toName: "British Columbia",
coords: [
[116.46, 39.92],
[-124.662, 54.6943]
]
},
{
fromName: "北京",
toName: "北京",
coords: [
[116.46, 39.92],
[116.46, 39.92]
]
},
{
fromName: "British Columbia",
toName: "吴启浪",
coords: [
[-124.662, 54.6943],
[0, 0]
]
},
{
fromName: "吴启浪",
toName: "孙艺珍",
coords: [
[0, 0],
[-60, -30]
]
}
];
let scatterData = [
{
name: "BeiJing", //城市名称
value: [116.46, 39.92, 400] //城市经纬度信息，第三个参数是攻击次数
},
{
name: "Lakshadweep",
value: [72.7811, 11.2249, 130]
},
{
name: "British Columbia",
value: [-124.662, 54.6943, 200]
},
{
name: "吴启浪",
value: [0, 0, 200]
},
{
name: "孙艺珍",
value: [-60, -30, 100]
}
];
export default {
methods: {
initECharts() {
// 将地图信息注册为map对象
echarts.registerMap("world", worldJson);
echarts.registerMap("china", chinaJson);
echarts.registerMap("chinaContour", chinaContourJson);
echarts.registerMap("chinaCities", chinaCitiesJson);
echarts.registerMap("anHui", anHuiJson);
this.echartsObj = echarts.init(this.$refs.hackerAttacks);
// 地图背景的配置信息
let geoOption = {
map: "world",
itemStyle: {
// 正常状态
normal: {
areaColor: "rgba(4,10,16,1)",
borderColor: "rgba(45,97,122,1)",
color: "green"
},
// 鼠标移入状态 emphasis----强调
emphasis: {
areaColor: "rgba(4,10,16,1)",
borderColor: "deeppink"
}
}
};
// 涟漪特效的配置项
let scatterOption = {
type: "effectScatter", // effectScatter----涟漪特效
coordinateSystem: "geo", // coordinateSystem----坐标系
symbolSize: function(value) {
// 涟漪尺寸
return value[2] / 10;
},
data: scatterData,
rippleEffect: {
// rippleEffect----波纹效应
brushType: "fill" // 波纹的绘制方式，可选 ‘stroke----打一下‘ 和 ‘fill----填满‘
},
label: {
// 鼠标移入显示字体
emphasis: {
// emphasis----强调（高亮）
formatter: "{b}", // formatter----格式化程序
position: "right",
show: true,
color: "greenyellow"
}
},
zlevel: 1, // 层级，默认为1，level----水平
itemStyle: {
normal: {
color: {
type: "radial",// radial----径向的
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,// offset----抵消
color: "rgba(255,142,20,0)"
},
{
offset: 0.4,
color: "rgba(255,142,20,0)"
},
{
offset: 0.9,
color: "rgba(255,142,20,0.2)"
},
{
offset: 1,
color: "rgba(255,142,20,0.4)"
}
],
globalCoord: false// coord----坐标
},
shadowBlur: 20,// shadowBlur----阴影模糊
shadowColor: "red"
}
}
};
// 连线的配置项
let lineOption = {
type:"lines",
coordinateSystem:"geo",// coordinateSystem----坐标系
zlevel:1,
data:lineData,
effect:{// effect----影响
show:true,
period:3,// 点的移动速率 period----周期
color:"yellowgreen"
},
lineStyle:{
normal:{
color:"#ccc",
width:1,
opacity:0,
curveness:0,// curveness----弧度
}
}
};
this.echartsObj.setOption({
backgroundColor: "rgba(4,10,16,1)",
geo: geoOption,
series: [scatterOption,lineOption]
});
}
},
mounted() {
this.initECharts();
}
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
.hackerAttacks {
background-color: skyblue;
position: fixed;
left: 0;
bottom: 0;
top: 0;
right: 0;
}
</style>
原文地址：https://www.cnblogs.com/wuqilang/p/12315333.html
时间： 2024-08-28 10:20:36