vue12----eCharts, HackerAttacks 해킹
공식 문서: 기본 설명서, 예제, 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 {position: fixed;left: 0;bottom: 0;top: 0;right: 0;}⑥ 다른 차트가 필요한 경우 option 객체를 바꾸기만 하면 됩니다.
⑥ 프로필 매뉴얼에서 검색을 할 수 있고 모든 프로필의 역할을 조회할 수 있으며 옵션의 프로필을 추가하고 수정하여 도표를 최적화할 수 있다.
###해커어택스 해킹
월드맵 보이기:
세계지도의 json 정보 도입:
import worldJson from "echarts/map/json/world.json";맵 객체로 맵 정보 등록하기
echarts.registerMap("world",worldJson);맵 구조를 구성 항목에 구성하려면 다음과 같이 하십시오.
series:[{type:"map",map:"world"}]세부 코드:
<span style="color: #000000;">
import echarts from </span>"echarts"<span style="color: #000000;">;
import worldJson from </span>"echarts/map/json/world.json"<span style="color: #000000;">;
import chinaJson from </span>"echarts/map/json/china.json"<span style="color: #000000;">;
import chinaContourJson from </span>"echarts/map/json/china-contour.json"<span style="color: #000000;">;
import chinaCitiesJson from </span>"echarts/map/json/china-cities.json"<span style="color: #000000;">;
import anHuiJson from </span>"echarts/map/json/province/anhui.json"<span style="color: #000000;">;
let lineData </span>=<span style="color: #000000;"> [
{
fromName: </span>" "<span style="color: #000000;">,
toName: </span>"Lakshadweep"<span style="color: #000000;">,
coords: [</span><span style="color: #008000;">//</span><span style="color: #008000;"> coord---- </span>
[116.46, 39.92<span style="color: #000000;">],
[</span>72.7811, 11.2249<span style="color: #000000;">]
]
},
{
fromName: </span>" "<span style="color: #000000;">,
toName: </span>"British Columbia"<span style="color: #000000;">,
coords: [
[</span>116.46, 39.92<span style="color: #000000;">],
[</span>-124.662, 54.6943<span style="color: #000000;">]
]
},
{
fromName: </span>" "<span style="color: #000000;">,
toName: </span>" "<span style="color: #000000;">,
coords: [
[</span>116.46, 39.92<span style="color: #000000;">],
[</span>116.46, 39.92<span style="color: #000000;">]
]
},
{
fromName: </span>"British Columbia"<span style="color: #000000;">,
toName: </span>" "<span style="color: #000000;">,
coords: [
[</span>-124.662, 54.6943<span style="color: #000000;">],
[</span>0, 0<span style="color: #000000;">]
]
},
{
fromName: </span>" "<span style="color: #000000;">,
toName: </span>" "<span style="color: #000000;">,
coords: [
[</span>0, 0<span style="color: #000000;">],
[</span>-60, -30<span style="color: #000000;">]
]
}
];
let scatterData </span>=<span style="color: #000000;"> [
{
name: </span>"BeiJing", <span style="color: #008000;">//</span><span style="color: #008000;"> </span>
value: [116.46, 39.92, 400] <span style="color: #008000;">//</span><span style="color: #008000;"> ， </span>
<span style="color: #000000;"> },
{
name: </span>"Lakshadweep"<span style="color: #000000;">,
value: [</span>72.7811, 11.2249, 130<span style="color: #000000;">]
},
{
name: </span>"British Columbia"<span style="color: #000000;">,
value: [</span>-124.662, 54.6943, 200<span style="color: #000000;">]
},
{
name: </span>" "<span style="color: #000000;">,
value: [</span>0, 0, 200<span style="color: #000000;">]
},
{
name: </span>" "<span style="color: #000000;">,
value: [</span>-60, -30, 100<span style="color: #000000;">]
}
];
export </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> {
methods: {
initECharts() {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> map </span>
echarts.registerMap("world"<span style="color: #000000;">, worldJson);
echarts.registerMap(</span>"china"<span style="color: #000000;">, chinaJson);
echarts.registerMap(</span>"chinaContour"<span style="color: #000000;">, chinaContourJson);
echarts.registerMap(</span>"chinaCities"<span style="color: #000000;">, chinaCitiesJson);
echarts.registerMap(</span>"anHui"<span style="color: #000000;">, anHuiJson);
</span><span style="color: #0000ff;">this</span>.echartsObj = echarts.init(<span style="color: #0000ff;">this</span><span style="color: #000000;">.$refs.hackerAttacks);
</span><span style="color: #008000;">//</span><span style="color: #008000;"> </span>
let geoOption =<span style="color: #000000;"> {
map: </span>"world"<span style="color: #000000;">,
itemStyle: {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> </span>
<span style="color: #000000;"> normal: {
areaColor: </span>"rgba(4,10,16,1)"<span style="color: #000000;">,
borderColor: </span>"rgba(45,97,122,1)"<span style="color: #000000;">,
color: </span>"green"<span style="color: #000000;">
},
</span><span style="color: #008000;">//</span><span style="color: #008000;"> emphasis---- </span>
<span style="color: #000000;"> emphasis: {
areaColor: </span>"rgba(4,10,16,1)"<span style="color: #000000;">,
borderColor: </span>"deeppink"<span style="color: #000000;">
}
}
};
</span><span style="color: #008000;">//</span><span style="color: #008000;"> </span>
let scatterOption =<span style="color: #000000;"> {
type: </span>"effectScatter", <span style="color: #008000;">//</span><span style="color: #008000;"> effectScatter---- </span>
coordinateSystem: "geo", <span style="color: #008000;">//</span><span style="color: #008000;"> coordinateSystem---- </span>
symbolSize: <span style="color: #0000ff;">function</span><span style="color: #000000;">(value) {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> </span>
<span style="color: #0000ff;">return</span> value[2] / 10<span style="color: #000000;">;
},
data: scatterData,
rippleEffect: {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> rippleEffect---- </span>
brushType: "fill" <span style="color: #008000;">//</span><span style="color: #008000;"> ， 'stroke---- ' 'fill---- '</span>
<span style="color: #000000;"> },
label: {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> </span>
<span style="color: #000000;"> emphasis: {
</span><span style="color: #008000;">//</span><span style="color: #008000;"> emphasis---- （ ）</span>
formatter: "{b}", <span style="color: #008000;">//</span><span style="color: #008000;"> formatter---- </span>
position: "right"<span style="color: #000000;">,
show: </span><span style="color: #0000ff;">true</span><span style="color: #000000;">,
color: </span>"greenyellow"<span style="color: #000000;">
}
},
zlevel: </span>1, <span style="color: #008000;">//</span><span style="color: #008000;"> ， 1，level---- </span>
<span style="color: #000000;"> itemStyle: {
normal: {
color: {
type: </span>"radial",<span style="color: #008000;">//</span><span style="color: #008000;"> radial---- </span>
x: 0.5<span style="color: #000000;">,
y: </span>0.5<span style="color: #000000;">,
r: </span>0.5<span style="color: #000000;">,
colorStops: [
{
offset: </span>0,<span style="color: #008000;">//</span><span style="color: #008000;"> offset---- </span>
color: "rgba(255,142,20,0)"<span style="color: #000000;">
},
{
offset: </span>0.4<span style="color: #000000;">,
color: </span>"rgba(255,142,20,0)"<span style="color: #000000;">
},
{
offset: </span>0.9<span style="color: #000000;">,
color: </span>"rgba(255,142,20,0.2)"<span style="color: #000000;">
},
{
offset: </span>1<span style="color: #000000;">,
color: </span>"rgba(255,142,20,0.4)"<span style="color: #000000;">
}
],
globalCoord: </span><span style="color: #0000ff;">false</span><span style="color: #008000;">//</span><span style="color: #008000;"> coord---- </span>
<span style="color: #000000;"> },
shadowBlur: </span>20,<span style="color: #008000;">//</span><span style="color: #008000;"> shadowBlur---- </span>
shadowColor: "red"<span style="color: #000000;">
}
}
};
</span><span style="color: #008000;">//</span><span style="color: #008000;"> </span>
let lineOption =<span style="color: #000000;"> {
type:</span>"lines"<span style="color: #000000;">,
coordinateSystem:</span>"geo",<span style="color: #008000;">//</span><span style="color: #008000;"> coordinateSystem---- </span>
zlevel:1<span style="color: #000000;">,
data:lineData,
effect:{</span><span style="color: #008000;">//</span><span style="color: #008000;"> effect---- </span>
show:<span style="color: #0000ff;">true</span><span style="color: #000000;">,
period:</span>3,<span style="color: #008000;">//</span><span style="color: #008000;"> period---- </span>
color:"yellowgreen"<span style="color: #000000;">
},
lineStyle:{
normal:{
color:</span>"#ccc"<span style="color: #000000;">,
width:</span>1<span style="color: #000000;">,
opacity:</span>0<span style="color: #000000;">,
curveness:</span>0,<span style="color: #008000;">//</span><span style="color: #008000;"> curveness---- </span>
<span style="color: #000000;"> }
}
};
</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.echartsObj.setOption({
backgroundColor: </span>"rgba(4,10,16,1)"<span style="color: #000000;">,
geo: geoOption,
series: [scatterOption,lineOption]
});
}
},
mounted() {
</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.initECharts();
}
};
</span>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
