From 46c4e9927b8df938caf57a5f5280e86bc85b3ad7 Mon Sep 17 00:00:00 2001 From: sulenn <273409891@qq.com> Date: Wed, 11 Dec 2019 15:21:30 +0800 Subject: [PATCH] complete search funciton by province name --- demo.html | 222 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 213 insertions(+), 9 deletions(-) diff --git a/demo.html b/demo.html index 9582d1c..ceb7f97 100644 --- a/demo.html +++ b/demo.html @@ -653,9 +653,13 @@ ] // 设置 series 内容 - let redName = '上海'; - var series = []; - [ ['北京', chinaDatas] ].forEach(function(item, i) { + let redName = '西藏'; + +// 搜索时，高亮搜索结果（省份） + function highLight(name) { + redName = name + var series = []; + [ [redName, chinaDatas] ].forEach(function(item, i) { series.push( { type: 'effectScatter', @@ -686,11 +690,11 @@ show: false, // color: '#f00' color: function(params) { //圆环显示文字 - if (params.data.dataItem[0].name == redName) { - return '#2bd291' - } else { + // if (params.data.dataItem[0].name == redName) { + // return '#2bd291' + // } else { return '#70c4eb' - } + // } }, } }, @@ -737,6 +741,200 @@ }; }), }, + { + type: 'scatter', + coordinateSystem: 'geo', + zlevel: 2, + rippleEffect: { + period: 4, + brushType: 'stroke', + scale: 4 + }, + + label: { + normal: { + show: true, + position: 'right', + fontSize: 14, + offset: [5, 0], + color: '#2bd291', + formatter: '{b}', + textStyle: { + color: "#2bd291" + } + }, + }, + symbol: 'pin', + color:'#2bd291', + symbolSize: 50, + data: [{ + name: item[0], + value: chinaGeoCoordMap[item[0]].concat([10]), + }], + }, + { + type: 'map', + geoIndex: 0 + } + ); + }); + + option = { + tooltip: { + show:false, + trigger: 'item', + position: 'top', + backgroundColor: 'rgba(166, 200, 76, 0.82)', + borderColor: '#040616', + showDelay: 0, + hideDelay: 0, + enterable: true, + transitionDuration: 0, + extraCssText: 'z-index:100' + }, + backgroundColor: "#1D346F", + geo: { + show: true, + map: 'china', + label: { + normal: { + show: false + }, + emphasis: { + show: false, + } + }, + // roam: false,//地图设置不可拖拽，固定的 + itemStyle: { + normal: { + areaColor: '#1D346F', + borderWidth: 0, + shadowColor: '#D79D3D', + shadowBlur: 30, + shadowOffsetX: -5, + shadowOffsetY: 10 + } + } + }, + series: series + }; + + myChart.setOption(option); + } + var series = []; + [ [redName, chinaDatas] ].forEach(function(item, i) { + series.push( + { + type: 'effectScatter', + coordinateSystem: 'geo', + zlevel: 2, + rippleEffect: { //涟漪特效 + period: 4, //动画时间，值越小速度越快 + brushType: 'fill', //波纹绘制方式 stroke, fill + scale: .5 //波纹圆环最大限制，值越大波纹越大 + }, + label: { + normal: { + show: true, + position: 'right', //显示位置 + offset: [5, 0], //偏移设置 + formatter: function(params) { //圆环显示文字 + return params.data.name; + }, + fontSize: 14 + }, + }, + symbol: 'circle', + symbolSize: function(val) { + return 10; //圆环大小 + }, + itemStyle: { + normal: { + show: false, + // color: '#f00' + color: function(params) { //圆环显示文字 + // if (params.data.dataItem[0].name == redName) { + // return '#2bd291' + // } else { + return '#70c4eb' + // } + }, + } + }, + // 在这里修改悬浮框,加了一个show:true + tooltip: { + show:true, + trigger: 'item', + backgroundColor: 'rgba(8, 18, 42, 0.85)', + borderColor: '#040616', + showDelay: 0, + hideDelay: 0, + enterable: true, + transitionDuration: 0, + extraCssText: 'z-index:100', + formatter: function(params, ticket, callback) { + // 根据业务自己拓展要显示的内容 + //console.log('params--2',params) + let res = ""; + let name = params.data.dataItem[0].name; + let ave = params.data.dataItem[0].ave; + let provincialcapital= params.data.dataItem[0].provincialcapital; + let diqu = params.data.dataItem[0].diqu; + let qihou = params.data.dataItem[0].qihou; + let people = params.data.dataItem[0].people; + let num = params.data.dataItem[0].num; + let GDP = params.data.dataItem[0].GDP; + let renjunGDP = params.data.dataItem[0].renjunGDP; + + res = "
名称：" + name + "
中文名：" + ave + "
外文名：" + provincialcapital + "
所属地区：" + diqu + "
气候：" + qihou + "
面积：" + people + "
语言：" + num + "
海拔：" + GDP + "
著名景点：" + renjunGDP + + '
' + + ' ' + + '
'+ "
演示表格可以任意定制输入及其他参数"; + setTimeout(function() { + tooltipCharts(params.name); + }, 10); + return res; + } + }, + data: item[1].map(function(dataItem) { + return { + dataItem: dataItem, + name: dataItem[0].name, + value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]) + }; + }), + }, + { + type: 'scatter', + coordinateSystem: 'geo', + zlevel: 2, + rippleEffect: { + period: 4, + brushType: 'stroke', + scale: 4 + }, + + label: { + normal: { + show: true, + position: 'right', + fontSize: 14, + offset: [5, 0], + color: '#2bd291', + formatter: '{b}', + textStyle: { + color: "#2bd291" + } + }, + }, + symbol: 'pin', + color:'#2bd291', + symbolSize: 50, + data: [{ + name: item[0], + value: chinaGeoCoordMap[item[0]].concat([10]), + }], + }, { type: 'map', geoIndex: 0 @@ -1167,7 +1365,10 @@ loadVideo(city) }); - myChart.setOption(option); + function refresh(option){ + myChart.setOption(option); + } + refresh(option) function fillInfo(result, name) { // graphList = {"keyword":{ @@ -1502,9 +1703,12 @@ // 根据省份查找 function searchProvince (value) { console.log('查找的省份:', value); + highLight(value) + } $('.search_icon').on('click', function () { - var $val = $(this).val(); + var $val = $(".search_input").val(); + // alert($val) searchProvince($val) }); $('.search_input').on('keydown', function (e) {