### eCharts
官方文档：基本介绍、示例、API文档、配置项
实例--->官方实例
文档--->教程、配置项手册
echarts基本使用：（App.vue）
①安装插件：
npm install echarts（项目名不能和插件名相同）
②引入：
import echarts from "echarts";
或
var echarts=require("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", 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>