echarts3的地图

最近页面需要使用echarts来展示一个地图,但是地图出来了,各省的名称却没有出来,本来这个echarts就不熟练,各种找,终于发现是中国地图的js没有引用造成的,下面分享一下echarts3的使用方法。
①地图JavaScript 引入示例

// 引入echarts.js
<script src="echarts.js"></script>
// 引入中国地图坐标集china.js
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

②主题使用示例

<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
<!-- 引入 vintage 主题 -->
<script src="theme/vintage.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({
    ...
});
</script>

当然还必须要给图表展示指定一个有宽高的div

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>

其中所有的echarts.js,china.js,vintage.js在echarts官网都可以免费下载。

ECharts 3D 地图ECharts 数据可视化库中的一种图表类型,可以用来展示三维地理数据地图信息。通过 ECharts 3D 地图,你可以在一个三维场景中展示地理区域、地点和相关的数据。 以下是一个简单示例代码,展示如何在 ECharts 中创建一个基本的 3D 地图: ```javascript // 创建 ECharts 实例 var myChart = echarts.init(document.getElementById('my-chart')); // 替换为你的容器元素 ID // 定义地图数据 var geoCoordMap = { '北京': [116.407394, 39.904211], '上海': [121.473662, 31.230372], '广州': [113.280637, 23.125178], // 其他地点... }; // 定义数据 var data = [ { name: '北京', value: 100 }, { name: '上海', value: 80 }, { name: '广州', value: 60 }, // 其他数据... ]; // 创建地图的 option 配置项 var option = { tooltip: {}, visualMap: { min: 0, max: 100, calculable: true, inRange: { color: ['#ffeda0', '#f03b20'] // 调整颜色范围 } }, geo3D: { map: 'china', // 使用中国地图 roam: true, // 开启鼠标缩放、平移漫游 itemStyle: { color: '#ddd' // 地图颜色 }, label: { show: true, textStyle: { color: '#000' // 地名字体颜色 } }, emphasis: { label: { show: true }, itemStyle: { color: '#f00' // 高亮颜色 } }, shading: 'lambert' // 地图着色模式 }, series: [{ type: 'bar3D', coordinateSystem: 'geo3D', shading: 'lambert', data: data.map(function (item) { return { name: item.name, value: [geoCoordMap[item.name][0], geoCoordMap[item.name][1], item.value] }; }), barSize: 1, // 柱子的粗细程度 minHeight: 0.2, // 柱子的最小高度 silent: true // 鼠标事件是否响应 }] }; // 将配置应用于图表 myChart.setOption(option); ``` 在这个示例中,我们使用了 ECharts 的 3D 地图组件 `geo3D` 和 `bar3D` 来创建一个基本的 3D 地图。你可以根据需要修改地图数据数据和样式配置项来适应你的需求。 请注意,你需要将代码中的 `my-chart` 替换为你的 ECharts 实例的容器元素的 ID,并根据你的地理数据和需求进行相应的修改。另外,你可以根据需要调整可视化效果、颜色、标签等其他属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值