echarts 지도 정시 전환 산 점 과 다 중 그래프 등급 연결 상세 설명 실현
최근 에 프로젝트 를 하면 통계 와 관련 된 수 요 를 만 났 습 니 다.한 페이지 에 네 개 이상 의 도형 통계,바 이 두 지도,떡 그림,기둥 모양 그림,선형 그림 이 있 습 니 다.바 이 두 지도 에는 모든 가게 가 전국 각지 에서 대략적인 위 치 를 나타 내 고 있 으 며,현 재 는 각 성 마다 하 나 를 잠 정적 으로 정 하여 지도 상에 산 점 을 나타 내 고 있다.기본 값 으로 정저 우 산 점 플래시 를 표시 하면 다른 도형 은 정저 우 관련 데 이 터 를 표시 합 니 다.5 초 동안 다음 구역 점 을 전환 하고 다른 도표 데 이 터 는 변화 에 대응 합 니 다.먼저 위의 그림 에서 여러분 이 필요 로 하 는 것 이 있 으 면 이어서 내 려 가도 됩 니 다.
2. ECharts 및 지도 관련 json 도입
ECharts 3 는 더 이상 AMD 를 강제 적 으로 사용 하지 않 고 필요 에 따라 도입 하 며 코드 에 도 AMD 탑재 기 가 내장 되 어 있 지 않 습 니 다.따라서 도입 방식 은 훨씬 간단 해 졌 다.일반적인 자 바스 크 립 트 라 이브 러 리 처럼 script 태그 로 만 도입 해 야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- ECharts -->
<script src="echarts/jquery-1.11.2.min.js"></script>
<script src="echarts/echarts.min.js"></script>
<script src="echarts/china.js"></script>
</head>
</html>한 페이지 에 여러 개의 도 표를 배치 하 는 데 몇 가지 형식 이 있 으 니 참고 하여 처리 할 수 있다.
첫 번 째:웹 페이지 에 여러 개의 div 를 만 들 고 포 지 셔 닝 방식 으로 여러 개의 캔버스 를 만 듭 니 다.이 방법 은 여러 개의 echarts 대상 을 설명 하고 더 이상 소개 하지 않 습 니 다.특별한 개성 적 인 수 요 를 제외 하고 사용 하 는 것 을 추천 하지 않 습 니 다.
두 번 째:하나의 div 하나의 캔버스,하나의 option,여러 series,도형 x/y 의 100%를 조정 하여 도형 이 인터페이스 에 표 시 된 위 치 를 찾 습 니 다.본문 은 이 방법 을 사용한다.
세 번 째:두 번 째 기본 과 마찬가지 로 가장 큰 차이 점 은 모든 아이콘 에 하나의 제목,여러 개의 optio ins 가 있 을 수 있다 는 것 이다.여러 캔버스 인 데 이런 걸 추천 해 요.사이트 참조:http://gallery.echartsjs.com/editor.html?c=xBkXgRwejM
options = [
// graph
{
backgroundColor:'#FFFFFF',
title: {
text: 'Sales Revenue of CAN-LAX 2016-2017',
textStyle:{
fontSize:14
}
},
tooltip: { //
trigger: 'axis',
axisPointer: { // ，
type: 'shadow' // ， ：'line' | 'shadow'
}
},
legend: {
data: ['2016', '2017','Growing Rate'],
top:'18'
},
grid: {
left: '3%',
right: '5%',
bottom: '3%',
containLabel: true,
show: false // ，
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, //
//magicType: {show: true, type: ['stack', 'tiled']},
//restore: {show: true},
saveAsImage: {show: true}
}
},
xAxis: {
type: 'category',
boundaryGap: true, //
splitLine: { // x
show: false
},
data: ['1 ', '2 ', '3 ', '4 ', '5 ', '6 ', '7 ', '8 ', '9 ', '10 ', '11 ', '12 ']
},
yAxis: [ // y
{
name: 'Revenue(10k)',
type: 'value',
splitLine: { // y
show: false
},
axisLabel: {
formatter: '{value}'
}
},
{
name: 'Growing
Rate (%)',
//nameLocation: 'start',
splitLine: { // y
show: false
},
min:0,
max: 300, // growing rate upper limit
type: 'value',
//top:10,
inverse: false,
axisLine: {
lineStyle: {
color: '#2f4554'
}
}
}],
series: [
{
name:'2016',
type:'bar',
color:'#00BFFF',
//stack: ' ',
markPoint : {
data : [
{type : 'max', name : ' '},
{type : 'min', name : ' '}
]
},
markLine : {
data : [
{type : 'average', name : ' '}
]
},
data:[1741.9, 977, 1742.2, 1431.1, 1636.2, 1447, 1711.7, 1921.2, 2609.6, 3332.6, 3647.3, 2498.1]
},
{
name:'2017',
type:'bar',
color: '#DC143C',
//stack: ' ',
markPoint : {
data : [
{type : 'max', name : ' '},
{type : 'min', name : ' '}
]
},
markLine : {
data : [
{type : 'average', name : ' '}
]
},
data:[2609, 1162.9, 2942.9, 5174.6, 5114.4, 5065.8, 3956.1, 3691.1, 4637.6, 4603.8, 6401.1, 4988.4]
},
{
name:'Growing Rate',
type:'line',
yAxisIndex: 1, // yAxisIndex 1 y ， 0
color: '#FFD700',
//stack: ' ',
markPoint : {
data : [
{type : 'max', name : ' '},
//{type : 'min', name : ' '}
]
},
data:[49.8, 19, 68.9, 261.6, 212.6, 250.1, 131.1, 92.1, 77.7, 38.1, 75.5, 99.7]
}
]
},
// visualMap: { #
// type: 'continuous',
// dimension: 1,
// text: ['High', 'Low'],
// inverse: true,
// itemHeight: 200,
// calculable: true,
// min: -2,
// max: 6,
// top: 60,
// left: 10,
// inRange: {
// colorLightness: [0.4, 0.8]
//},
// outOfRange: {
// color: '#bbb'
// },
// controller: {
// inRange: {
// color: '#01949B'
//}
// }
//},
// 2 graph
{
backgroundColor:'#FFFFFF', //
title: {
text: 'Cargo Load Factor-2016/2017',
textStyle:{
fontSize:14,
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['CLF-2016','CLF-2017'],
top:'18' //
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, //
saveAsImage: {show:true}
}
},
xAxis: {
type: 'category',
boundaryGap: false, //
splitLine: { // x
show: false
},
data: ['1 ','2 ','3 ','4 ','5 ','6 ','7 ','8 ','9 ','10 ','11 ','12 ']
},
yAxis: {
type: 'value',
name: 'CLF(%)',
min: 70,
max: 100,
interval: 10,
splitLine: { // y
show: false
}
},
series: [
{
name:'CLF-2016',
type:'line',
data:[88.29, 83.68, 89.64, 90.47, 90.21, 93.63, 94.07, 90.85, 90.32, 90.56, 86.69, 81.77]
},
{
name:'CLF-2017',
type:'line',
data:[90.36, 86.21, 92.04, 89.91, 90.15, 90.38, 88.03, 88.99, 88.35, 87.18, 86.29, 81.23]
}
]
},
// 3 graph
{
backgroundColor:'#FFFFFF',
title: {
text: 'Sales Strcture of CAN-LAX in 2016',
//left:'center', // title
textStyle:{
fontSize:14,
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // ，
type: 'shadow' // ， ：'line' | 'shadow'
}
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, //
//magicType: {show: true, type: ['stack', 'tiled']},
//restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: [' ', ' ', ' ', ' '],
top:'18'
},
grid: {
left: '2%',
right: '9%',
bottom: '3%',
containLabel: true,
show: false // ，
},
xAxis: [{
type: 'category',
splitLine: { // x
show: false
},
data: ['1 ','2 ','3 ','4 ','5 ','6 ','7 ','8 ','9 ','10 ','11 ','12 ']
}],
yAxis: [{
name: 'Revenue(10k)',
type: 'value',
splitLine: { // y
show: false
},
axisLabel: {
formatter: '{value}'
},
}],
series: [{
name: ' ',
type: 'bar',
itemStyle:{
normal:{color:'#01949B'},
},
//markPoint : {
//data : [
//{type : 'max', name : ' '},
//{type : 'min', name : ' '}
//]
//},
markLine : {
data : [
{type : 'average', name : ' '}
]
},
data: [919, 455.7, 1074.8, 911.7, 1006.8, 1075.6, 1106.1, 1274.5, 1755.6, 2562.7, 2056.1, 1227.9]
},
{
name: ' ',
type: 'bar',
itemStyle:{
normal:{color:'#EBA954'},
},
//markPoint : {
//data : [
//{type : 'max', name : ' '},
//{type : 'min', name : ' '}
//]
//},
markLine : {
data : [
{type : 'average', name : ' '}
]
},
data: [567.1, 261.4, 456.8, 387, 419.2, 227, 417, 413.1, 564, 583, 915.9, 666.3]
}, {
name: ' ',
type: 'bar',
itemStyle:{
normal:{color:'#C23531'},
},
//markPoint : {
//data : [
//{type : 'max', name : ' '},
//{type : 'min', name : ' '}
//]
//},
markLine : {
data : [
{type : 'average', name : ' '}
]
},
data: [255.9, 259.8, 210.5, 118.2, 196.5, 140.6, 188.6, 204.4, 290, 186.9, 661.3, 468.2]
},{
name: ' ',
type: 'bar',
itemStyle:{
normal:{color:'#6495ED'},
},
//markPoint : {
//data : [
//{type : 'max', name : ' '},
//{type : 'min', name : ' '}
//]
//},
markLine : {
data : [
{type : 'average', name : ' '}
]
},
data: [0, 0, 0, 14.2, 13.7, 3.8, 0, 29.2, 0, 0, 14, 135.8]
}]
},
// 4 graph
{
backgroundColor:'#FFFFFF',
title: {
text: 'Cargo Structure Percentage',
subtext: '2016',
left: 'center',
subtextStyle:{
fontSize:18
}
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, //
//magicType: {show: true, type: ['stack', 'tiled']},
//restore: {show: true},
saveAsImage: {show: true}
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 20,
left: 'center',
data: [' ', ' ', ' ', ' '],
show:false // legend
},
series : [
{
name:'Cargo Source',
type: 'pie',
avoidLabelOverlap: false,
radius : '50%',
center: ['50%', '58%'],
selectedMode: 'single',
label: {
normal: {
show: true,
textStyle:{
fontSize: '10',
//fontWeight: 'bold'
},
formatter: '{b} : {d}%',
position: 'outer'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{name: ' ', value: 61.8},
{name: ' ', value: 13.2},
{name: ' ', value: 24.2},
{name: ' ', value: 0.8}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
},
// 5 graph
{
backgroundColor:'#FFFFFF',
title: {
text: 'Sales Strcture of CAN-LAX in 2017',
//left:'center', // title
textStyle:{
fontSize:14,
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // ，
type: 'shadow' // ， ：'line' | 'shadow'
}
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, //
//magicType: {show: true, type: ['stack', 'tiled']},
//restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: [' ', ' ', ' ', ' '],
top:'18'
},
grid: {
left: '2%',
right: '9%',
bottom: '3%',
containLabel: true,
show: false // ，
},
xAxis: [{
type: 'category',
splitLine: { // x
show: false
},
data: ['1 ','2 ','3 ','4 ','5 ','6 ','7 ','8 ','9 ','10 ','11 ','12 ']
}],
yAxis: [{
name: 'Revenue(10k)',
type: 'value',
splitLine: { // y
show: false
},
axisLabel: {
formatter: '{value}'
},
}],
series: [{
name: ' ',
type: 'bar',
itemStyle:{
normal:{color:'#01949B'},
},
//markPoint : {
//data : [
//{type : 'max', name : ' '},
//{type : 'min', name : ' '}
//]
//},
markLine : {
data : [
{type : 'average', name : ' '}
]
},
data: [1504.2, 622.8, 2132, 3668.6, 3797.3, 3632.8, 2716, 2320.6, 3288.1, 3220, 3911.4, 2942]
},
{
name: ' ',
type: 'bar',
itemStyle:{
normal:{color:'#EBA954'},
},
//markPoint : {
//data : [
//{type : 'max', name : ' '},
//{type : 'min', name : ' '}
//]
//},
markLine : {
data : [
{type : 'average', name : ' '}
]
},
data: [861.7, 196.6, 600.7, 836.2, 757.8, 804.2, 766.3, 797, 677.5, 734.2, 1363.5, 977.3]
}, {
name: ' ',
type: 'bar',
itemStyle:{
normal:{color:'#C23531'},
},
//markPoint : {
//data : [
//{type : 'max', name : ' '},
//{type : 'min', name : ' '}
//]
//},
markLine : {
data : [
{type : 'average', name : ' '}
]
},
data: [240.6, 294.4, 202.6, 476.9, 308.3, 376.4, 334.7, 401, 514, 506.2, 766.2, 794.4]
},{
name: ' ',
type: 'bar',
itemStyle:{
normal:{color:'#6495ED'},
},
//markPoint : {
//data : [
//{type : 'max', name : ' '},
//{type : 'min', name : ' '}
//]
//},
markLine : {
data : [
{type : 'average', name : ' '}
]
},
data: [2.5, 49.1, 7.6, 192.9, 251, 252.3, 139.1, 172.5, 157.9, 143.4, 359.9, 274.7]
}]
},
// 6 graph
{
backgroundColor:'#FFFFFF',
title: {
text: 'Cargo Structure Percentage',
subtext: '2017',
left: 'center',
subtextStyle:{
fontSize:18
}
},
toolbox: {
feature: {
dataView: {show: false, readOnly: false}, //
//magicType: {show: true, type: ['stack', 'tiled']},
//restore: {show: true},
saveAsImage: {show: true}
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 20,
left: 'center',
data: [' ', ' ', ' ', ' '],
show:false // legend
},
series : [
{
name:'Cargo Source',
type: 'pie',
avoidLabelOverlap: false,
radius : '50%',
center: ['50%', '58%'],
selectedMode: 'single',
label: {
normal: {
show: true,
textStyle:{
fontSize: '10',
//fontWeight: 'bold'
},
formatter: '{b} : {d}%',
position: 'outer'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{name: ' ', value: 66.1},
{name: ' ', value: 11.1},
{name: ' ', value: 19.1},
{name: ' ', value: 3.7}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
];페이지 정적 코드 는 매우 간단 합 니 다.다음은 웹 페이지 코드 레이아웃 을 보 겠 습 니 다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> - </title>
<link rel="stylesheet" type="text/css" href="skin/icon/iconfont.css" />
<link rel="stylesheet" type="text/css" href="skin/default/style.css" />
<script src="../scripts/jquery/jquery-1.11.2.min.js"></script>
<script src="js/common.js"></script>
<script src="../scripts/echart/echarts.min.js"></script>
<script src="../scripts/echart/china.js"></script>
<style>
#btnSet{padding:0;background-color:#020933;box-sizing:border-box;position:absolute;left:30px;top:24px;z-index:9999}
.btnPlay{height:20px;border-style:solid;border-width:10px 0 10px 20px;border-color:transparent transparent transparent #fff;transition:all .5s ease}
.btnPause{width:20px;height:20px;border-style:double;border-width:0 0 0 20px;border-color:#fff}
</style>
</head>
<body class="">
<form id="form1" runat="server">
<input type="hidden" id="start" name="start" value="0" />
<input type="button" id="btnSet" class="btnPause" title=" " />
<div id="mapContainer" class="mapContainer" style="background: #000000;"></div>
</form>
</body>
</html>
<script>
/**
*/
var mapContainer = document.getElementById('mapContainer');
// chart ,
var resizeWorldMapContainer = function () {
$("#mapContainer").width($(window).width());
$("#mapContainer").height($(window).height());
//$("#mapContainer").css("width", $(window).width()+"px");
//$("#mapContainer").css("height", $(window).height()+"px");
};
// dom， echarts
var myChart = echarts.init(mapContainer);
var geoCoordMap = { ' ': [113.664496, 34.817821], ' ': [113.75783, 34.502434], ' ': [116.403694, 39.915378], ' ': [117.216837, 39.142415], ' ': [121.479662, 31.234329], ' ': [114.494585, 38.129532], ' ': [112.569095, 37.908919], ' ': [123.445046, 41.806913], ' ': [126.582519, 43.86473], ' ': [87.559985, 43.879367], ' ': [91.160816, 29.653148], ' ': [111.771822, 40.93481], ' ': [106.492302, 29.601285], ' ': [101.73138, 36.627027], ' ': [113.254301, 23.129454], ' ': [112.953187, 28.265007] };
var data = [{ name: ' ', value: 3 }, { name: ' ', value: 1 }, { name: ' ', value: 1 }, { name: ' ', value: 1 }, { name: ' ', value: 2 }, { name: ' ', value: 1 }, { name: ' ', value: 1 }, { name: ' ', value: 0 }, { name: ' ', value: 1 }, { name: ' ', value: 0 }, { name: ' ', value: 1 }, { name: ' ', value: 0 }, { name: ' ', value: 0 }, { name: ' ', value: 0 }, { name: ' ', value: 0 }, { name: ' ', value: 0 }];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var uploadedDataURL = "../scripts/echart/china.json";
myChart.showLoading();
$.getJSON(uploadedDataURL, function (geoJson) {
echarts.registerMap('zhengzhou', geoJson);
myChart.hideLoading();
option = {
backgroundColor: '#020933',
title: {
top: 20,
left: 190,
text: ' ',
subtext: '',
x: 'left',
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // ，
type: 'shadow' // ， ：'line' | 'shadow'
},
formatter: function (params) {
if (typeof (params.value)[2] == "undefined") {
//return params.name + ' : ' + params.value;
} else {//
return params.name + ' : ' + params.value[2];
}
}
},
visualMap: {
show: false,
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: [' ', ' '], // ，
calculable: true,
seriesIndex: [1],
inRange: {
},
dimension: 0
},
// s
grid: [
{ x: '57%', y: '5%', width: '40%', height: '60%' },
{ x: '57%', y: '70%', width: '40%', height: '25%' }
],
xAxis: [{
title: "asdf",
gridIndex: 0,
type: 'value',
max: 10,//x
axisLabel: {
show: true,
},
splitLine: {
show: true
}
}, {
gridIndex: 1,
type: 'category',
axisLabel: {
show: true,
},
splitLine: {
show: true
}, data: ['2018-07-30', '2018-07-31', '2018-08-01', '2018-08-02', '2018-08-03', '2018-08-04', '2018-08-05', '2018-08-06']
}],
yAxis: [{
gridIndex: 0,
type: 'category',
axisLabel: {
show: true,
textStyle: {
color: '#ddd'
}
}
}, {
gridIndex: 1,
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#ddd'
}
}
}],
// e
geo: {
show: true,
map: 'zhengzhou',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: false,//
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 30
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
//
layoutCenter: ['32%', '52%'],
layoutSize: 900,
series: [
{
name: ' ',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize: function (val) {
//return val[2] / 10;//
return 20;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#F4E925',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
}, {
name: ' ',
type: 'pie',
z: 2,
color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
selectedMode: 'single',
radius: [0, '15%'],
center: ['20%', '80%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
// series ，
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
data: [{ value: 2, name: ' ' }, { value: 4, name: ' ', selected: true }, { value: 5, name: ' ' }, { value: 1, name: ' ' }]
},
{
name: ' ',
type: 'pie',
z: 2,
// 。
color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
radius: ['20%', '30%'],
center: ['20%', '80%'],
label: { formatter: "{b} {d}%" },
itemStyle: { //itemStyle ：normal， hover ：emphasis
emphasis: { //normal , shadow
shadowBlur: 10, //
shadowOffsetX: 0, //
shadowColor: 'rgba(0, 0, 0, 0.5)' //
}
},
// series ，
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
data: [{ value: 2, name: '18-25' }, { value: 8, name: '26-30' }, { value: 2, name: '31-40' }, { value: 0, name: '41-55' }, { value: 12, name: '55 ' }]
}
, {
id: 'bar',
name: ' ',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
label: {
normal: {
show: true,
position: ["100%", "40%"],
color: "#ffffff",
formatter: "{b} : {c}"
}
},
tooltip: {
trigger: 'item',
formatter: "{b} : {c}"
},
itemStyle: {
// colorList ， colorList ，
color: function (params) {
var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
return colorList[params.dataIndex];
}
},
z: 2,
data: [{ value: 3, name: ' ' }, { value: 1, name: ' ' }, { value: 1, name: ' ' }, { value: 1, name: ' ' }, { value: 2, name: ' ' }, { value: 1, name: ' ' }, { value: 1, name: ' ' }, { value: 0, name: ' ' }, { value: 1, name: ' ' }, { value: 0, name: ' ' }, { value: 1, name: ' ' }, { value: 0, name: ' ' }, { value: 0, name: ' ' }, { value: 0, name: ' ' }, { value: 0, name: ' ' }, { value: 0, name: ' ' }]
},
{
name: ' ',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
tooltip: {
trigger: 'item',
formatter: "{a} : {c}"
},
data: [1, 3, 2, 4, 1, 4, 3]
},
{
name: ' ',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
tooltip: {
trigger: 'item',
formatter: "{a} : {c}"
},
data: [1, 2, 3, 4, 3, 2, 2]
},
{
name: ' ',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
tooltip: {
trigger: 'item',
formatter: "{a} : {c}"
},
data: [1, 2, 3, 4, 3, 2, 4]
},
{
name: ' ',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
tooltip: {
trigger: 'item',
formatter: "{a} : {c}"
},
data: [1, 3, 2, 4, 1, 4, 2]
},
{
name: ' ',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
tooltip: {
trigger: 'item',
formatter: "{a} : {c}"
},
data: [1, 3, 2, 4, 1, 4, 2]
},
{
name: ' ',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
tooltip: {
trigger: 'item',
formatter: "{a} : {c}"
},
data: [1, 3, 2, 4, 1, 4, 2]
}
]
};
myChart.setOption(option);
//
resizeWorldMapContainer();
myChart.resize();
redoMethod();
// chart
window.onresize = function () {
//
resizeWorldMapContainer();
myChart.resize();
};
//
myChart.on('click', function (params) {
if (params.data) {
//var index = JSON.stringify(data).indexOf(params.data.name);// ：index=1
//if (index >= 0) {//
// ，
//1. 2.
if (params.seriesIndex == 0 || params.seriesIndex == 3) {
if ($("#btnSet").attr("title") == " ") {
$("#btnSet").trigger('click');
}
redoMethod(params.data.name);
}
//if (params.seriesIndex==3) {
// alert(params.data.name);
// //if ($("#btnSet").attr("title") == " ") {
// // $("#btnSet").trigger('click');
// //}
// //redoMethod(params.data.name);
//}
}
});
});
</script>지도 상의 산 점 섬 동 은 5 초 에 한 번 전환 되 며,모든 지도 정 보 는 폴 링 에 참여 합 니 다.구체 적 인 js 코드 는 다음 과 같다.
<script>
/**
* ashx
* @file
* @param get (a=1&b=2&c=3)
* @fn ： result=xxx; result 。
*/
$.ashx = function (file, param, fn, er) {
var sUrl = file;
$.ajax({
type: "GET",
contentType: "application/json",
cache: false,
url: sUrl,
data: param,
dataType: "json",
success: fn,
error: er
});
};
var globalIndex = 0;
//
function redoMethod(deptname) {
if (!deptname) {
deptname = data[globalIndex].name;
globalIndex++;
if (globalIndex == data.length) {
globalIndex = 0;
}
}
//alert(name);
$.ashx("ajax url ", "action=xx&deptname=" + deptname, function (result) {
if (result) {
if (result.results == "") {
return;
}
//debugger;
//alert(result.results.politcal);
var option = myChart.getOption();
//
option.series[0].data = convertData(data);//
option.series[0].symbolSize = function (val, params) {//
//alert(name.name);
if (deptname == params.name) {
return 35;//
} else {
return 20;
}
};
option.series[0].itemStyle.color = function (params) {
if (deptname == params.name) {
return "rgba(245, 214, 251, 1)";
} else {
return "#F4E925";
}
};
option.series[1].data = result.results[0].politcal;//
option.series[2].data = result.results[1].ageScale;//
option.series[3].itemStyle.color = function (params) {
if (deptname == params.name) {
return "rgba(245, 214, 251, 1)";
} else {
var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
return colorList[params.dataIndex];
}
}
option.series[4].data = [2, 7, 12, 6, 4, 6, 6, 3];//
option.series[5].data = [11, 5, 21, 3, 5, 10, 8, 5];//
option.series[6].data = [6, 1, 11, 1, 7, 4, 3, 13];//
option.series[7].data = [7, 2, 22, 14, 4, 4, 6, 9];//
option.series[8].data = [20, 7, 23, 11, 8, 4, 4, 7];//
option.series[9].data = [33, 4, 24, 9, 6, 4, 1, 1];//
myChart.setOption(option);
}
}, function (er) {
//alert(" ");
});
}
$(function () {
//
var interval = setInterval("redoMethod()", 5000);// redoMethod()
// ： 、
$("#btnSet").click(function () {//
if (interval) {
clearInterval(interval);
interval = null;
}
if ($(this).attr("title") == " ") {
$(this).attr("title", " ");
$(this).attr("class", "btnPlay");
} else {
$(this).attr("title", " ");
$(this).attr("class", "btnPause");
interval = setInterval("redoMethod()", 5000);
}
});
});
</script>이상 은 제 가 같은 페이지 의 다 도형 통 계 를 처리 하고 등급 연결 관 계 를 처리 할 때의 사고 와 채 갱 코드 입 니 다.글 에서 코드 는 모두 프로젝트 에서 복 제 된 것 입 니 다.완전 율 은 99.99%이 고 코드 가 약간 어 지 럽 습 니 다.개발 과정 에서 정리 한 사고 주석 이 무엇 인지 처리 되 지 않 은 것 을 양해 해 주 십시오.
자,이상 이 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
어쩌면 echarts에 더 좋은 방법echarts를 React에 유용하게 사용하세요. echarts-for-react 기반 Make echarts come in handy for React. Based on 🌈 사용하기 쉬움(기본 레이아웃 및 스타일 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
