### eCharts
Official documentation: basic introduction, example, API documentation, configuration items
Examples ---> Official examples
Documents ---> tutorial, manual configuration items
echarts basic use: (App.vue)
① install the plugin:
npm install echarts (project name and the plug-in can not be the same name)
② introduction:
import echarts from "echarts";
③mounted initialize (echarts.init ()):
this.echartsObj=echarts.init(this.$refs.map);
④echartsObj.setOption () and set configuration items (CI paste option from the official example):
this.echartsObj.setOption(option);
⑤ If you do not show, it may be .map no height:
.map {position: fixed;left: 0;bottom: 0;top: 0;right: 0;}
⑥ If other charts, only need to replace the need for an object option on the line.
⑦ configuration items in the manual, you can search, query the role of each configuration item can be added and modified on the option of configuration items for the chart to be optimized.
### HackerAttacks hacker attacks
World map display:
The introduction of information json world map:
import worldJson from "echarts/map/json/world.json";
The map information is registered as a map object:
echarts.registerMap("world",worldJson);
The map structure configuration to configuration items in:
series:[{type:"map",map:"world"}]
Specific code:
<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': "Beijing" ,
ToName: "Lakshadweep" ,
the coords: [ // coord ---- coordinates
[116.46, 39.92 ],
[ 72.7811, 11.2249 ]
]
},
{
'fromName': "Beijing" ,
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': "Qi-Long" ,
ToName: "SYJ" ,
the coords: [
[ 0, 0 ],
[ -60, -30 ]
]
}
];
the let scatterData = [
{
name: "BeiJing", // city name
value : [116.46, 39.92, 400] // city latitude and longitude information, the third parameter is the number of attacks
},
{
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 () {
// The map information is registered as map objects
echarts.registerMap ( "world" , worldJson);
echarts.registerMap ( "china" , chinaJson);
echarts.registerMap ( "chinaContour" , chinaContourJson);
echarts .registerMap ( "chinaCities" , chinaCitiesJson);
echarts.registerMap ( "anhui" , anHuiJson);
the this .echartsObj = echarts.init ( the this $ refs.hackerAttacks.);
// map background configuration information
let geoOption ={
Map: "World" ,
ItemStyle: {
// normal
Normal: {
areaColor: "RGBA (4,10,16,1)" ,
the borderColor: "RGBA (45,97,122,1)" ,
Color: "Green"
} ,
// move the mouse into the state of emphasis ---- stressed
emphasis: {
areaColor: "RGBA (4,10,16,1)" ,
borderColor: "DeepPink"
}
}
};
// ripple effects of configuration items
the let scatterOption = {
type: "effectScatter", // effectScatter ---- ripple effects
the coordinateSystem: "GEO", // the coordinateSystem ---- coordinates
SymbolSize: function (value ) {
// ripple size
return value [2] / 10 ;
},
Data: scatterData,
rippleEffect: {
//rippleEffect ---- moire effect
brushType: "Fill" // Draw corrugations embodiment, optional 'Stroke ---- beat' and 'fill Fill ----'
},
label: {
// mouse into the display font
emphasis: {
// emphasis ---- emphasized (highlighting)
formatter: "{b}", // formatter ---- formatter
position: "right" ,
Show: to true ,
Color: "GreenYellow"
}
},
zlevel: 1, // level, the default is 1, Level ---- horizontal
ItemStyle: {
Normal: {
Color: {
type: "Radial", // Radial radial ----
X: 0.5 ,
Y: 0.5 ,
R & lt : 0.5 ,
colorStops: [
{
offset: 0, // offset canceling ----
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: to false // coord ---- coordinate
},
the shadowBlur: 20 is, // the shadowBlur ---- shadow blur
shadowColor: "Red"
}
}
};
// connection configuration items
the let lineOption = {
of the type: "Lines" ,
the coordinateSystem: "GEO", // the coordinateSystem ---- coordinates
zlevel:. 1 ,
Data: Linedata,
Effect: { // Effect Effect ----
Show: to true ,
period: . 3, // rate of movement points period- cycle ---
Color: "YellowGreen"
},
the 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>