ECharts饼图-在地图上显示饼图.rar_ECharts-GL绘制地图tooltips为饼图资源-CSDN文库

共4个文件

js：2个

json：1个

html：1个

echarts

统计分析

数据可视化

需积分: 5 65 浏览量 2024-10-27 07:50:55 上传评论收藏 893KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts饼图-在地图上显示饼图.rar （4个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

svg

geo

index.html 3KB

images

json

usa.json 145KB

<!doctype html> <html> <head> <meta charset="utf-8"> <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"> //初始化图表对象。 var myChart = echarts.init(document.getElementById('chart-panel')); //图表配置。 // This example requires ECharts v5.4.0 or later myChart.showLoading(); $.get('./json/usa.json', function (usaJson) { echarts.registerMap('USA', usaJson, { Alaska: { left: -131, top: 25, width: 15 }, Hawaii: { left: -110, top: 28, width: 5 }, 'Puerto Rico': { left: -76, top: 26, width: 2 } }); function randomPieSeries(center, radius) { const data = ['A', 'B', 'C', 'D'].map((t) => { return { value: Math.round(Math.random() * 100), name: 'Category ' + t }; }); return { type: 'pie', coordinateSystem: 'geo', tooltip: { formatter: '{b}: {c} ({d}%)' }, label: { show: false }, labelLine: { show: false }, animationDuration: 0, radius, center, data }; } let option = { toolbox: { show: true, feature: { saveAsImage: { }, }, }, geo: { map: 'USA', roam: true, itemStyle: { areaColor: '#e7e8ea' } }, tooltip: {}, legend: {}, series: [ randomPieSeries([-86.753504, 33.01077], 15), randomPieSeries([-116.853504, 39.8], 25), randomPieSeries([-99, 31.5], 30), randomPieSeries( // it's also supported to use geo region name as center since v5.4.1 +echarts.version.split('.').slice(0, 3).join('') > 540 ? 'Maine' : // or you can only use the LngLat array [-69, 45.5], 12 ) ] }; myChart.hideLoading(); //将图表对象和图表配置进行关联。 myChart.setOption(option); }); </script> </body> </html>

评论收藏

内容反馈