ECharts地图-自定义10.rar资源-CSDN文库

共7个文件

js：4个

json：2个

html：1个

echarts

echarts地图

立体地图

统计分析

需积分: 5 199 浏览量 2024-09-13 09:53:40 上传评论收藏 927KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts地图-自定义10.rar （7个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

bmap

bmap.min.js 6KB

bmap.js 13KB

svg

geo

china.json 69KB

xinjiang.json 260KB

index.html 7KB

images

json

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> #chart-panel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 1000px; height: 750px; } </style> <script src="./lib/5.5.0/echarts.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div id="chart-panel"></div>  <script type="text/javascript"> //1、初始化图表对象。 var myChart = echarts.init(document.getElementById('chart-panel')); //2、图表配置。 var uploadedDataURL = "./geo/xinjiang.json"; myChart.showLoading(); $.getJSON(uploadedDataURL, function (geoJson) { echarts.registerMap('xinjiang', geoJson); myChart.hideLoading(); var option = { toolbox: { feature: { saveAsImage: {} } }, backgroundColor: '#020933', title: { top: 20, text: "新疆地图", left: 'center', textStyle: { color: '#ccc' } }, tooltip: { trigger: 'item', formatter: function (params) { return params.name; } }, geo: { map: 'xinjiang', roam: false, itemStyle: { normal: { areaColor: '#013c62', shadowColor: '#182f68', shadowOffsetX: 0, shadowOffsetY: 25 } } }, series: [ { type: 'map', map: 'xinjiang', roam: false, label: { normal: { show: true, textStyle: { color: '#fff' } }, emphasis: { textStyle: { color: '#fff' } } }, itemStyle: { normal: { borderColor: '#2ab8ff', borderWidth: 1.5, areaColor: '#12235c' }, emphasis: { areaColor: '#2ab8ff', borderWidth: 1.5, } }, }, ] } let index = -1;//数据下标。 var timer = setInterval(function () { //隐藏当前提示框。 hideTip(0, index); // 取消当前高亮数据。 downplay(0, index); // 显示下一个数据提示框。 showTip(0, index + 1); //高亮下一条数据。 highlight(0, index + 1); index++; if (index > 17) { index = -1; } }, 2000) //鼠标移入地图区域。 myChart.on('mousemove', function (e) { clearInterval(timer); //取消当前所有高亮。 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0 }); //将鼠标移入的区域高亮。 highlight(0, e.dataIndex); //将鼠标移入的区域显示提示信息。 showTip(0, e.dataIndex); }); //鼠标移出地图区域。 myChart.on('mouseout', function (e) { //取消当前所有高亮。 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0 }); timer = setInterval(function () { // 隐藏提示框。 hideTip(0, index); // 取消高亮指定的数据图形。 downplay(0, index); // 显示提示框。 showTip(0, index + 1); // 高亮指定的数据图形。 highlight(0, index + 1); index++; if (index > 17) { index = -1; } }, 2000); }); //显示提示信息。seriesIndex=系列下标。dataIndex=数据下标。 function showTip(seriesIndex, dataIndex) { myChart.dispatchAction({ type: 'showTip', seriesIndex: seriesIndex, dataIndex: dataIndex }); } //隐藏提示信息。seriesIndex=系列下标。dataIndex=数据下标。 function hideTip(seriesIndex, dataIndex) { myChart.dispatchAction({ type: 'hideTip', seriesIndex: seriesIndex, dataIndex: dataIndex }); } //高亮指定数据。seriesIndex=系列下标。dataIndex=数据下标。 function highlight(seriesIndex, dataIndex) { myChart.dispatchAction({ type: 'highlight', seriesIndex: seriesIndex, dataIndex: dataIndex }); } //取消高亮。seriesIndex=系列下标。dataIndex=数据下标。 function downplay(seriesIndex, dataIndex) { myChart.dispatchAction({ type: 'downplay', seriesIndex: seriesIndex, dataIndex: dataIndex }); } //3、通过图表对象的setOption方法和图表配置进行关联。 myChart.setOption(option); }) </script> </body> </html>

评论收藏

内容反馈