关于百度echarts map地图的使用之分布图

最新推荐文章于 2024-06-11 21:36:57 发布

玉帛逸

最新推荐文章于 2024-06-11 21:36:57 发布

阅读量2.2k

点赞数 1

分类专栏： web端

本文链接：https://blog.csdn.net/liming911911/article/details/77221277

版权

这篇博客展示了如何利用百度Echarts库制作一个展示公司产品注册分布的地图。通过一个模拟的数据集，博主呈现了效果，并提供了代码片段，强调了数据分段依据后台数据进行调整。读者可以参考Echarts官方文档和提供的GitHub demo来了解更多详情。

摘要由CSDN通过智能技术生成

首先贴出效果图，是关于公司产品注册的分布情况（数据非真实情况，仅为模拟）：这里写图片描述

下面为代码片段：

<!--主要 css --> 
.map-table{
    width:700px ;
    height:540px;
}

<!--html --> 
<div id="map-data" class=" map-table" ></div>

// 用户分布数据图表
var mapData = echarts.init(document.getElementById('map-data'));
option = {
  tooltip : {
       trigger: 'item'
    },
    dataRange: {
        x: 'left',
        y: 'bottom',
        itemWidth:20,
        itemHeight:14,
        splitList: [
           //{start: 5, end: 10, label: '文字自定义', color: '自定义颜色'},
            {start: 500,label: '>500人',color:'#3a94e5'},
            {start: 200, end: 500,label: '200 - 500人',color:'#68b1ec'},
            {start: 100, end: 200,la