Echarts在地图上将特定城市显示高亮光柱

Question

Echarts使用一：在地图上将特定城市显示高亮

需要城市显示高亮光柱
有酬劳20，修改源码
联系方式qq
2462450090

Answer 1

引用 皆我百晓生 小程序回复内容作答：
要在地图上将特定城市显示高亮光柱，可以使用Echarts的柱状图（bar）组件。下面是一个简单的示例代码，演示如何在地图上将城市显示为高亮光柱。

首先，你需要引入Echarts的库文件和相关的地图数据文件。在网页中加入以下代码：

<!-- 引入Echarts的库文件 -->
<script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script>

<!-- 引入中国地图数据文件 -->
<script src="https://cdn.staticfile.org/echarts/4.9.0/map/js/china.js"></script>

接下来，在HTML中添加一个容器来显示地图：

<!-- 地图容器 -->
<div id="map" style="width: 600px; height: 400px;"></div>

然后，使用JavaScript代码创建地图，并设置需要高亮显示的城市：

// 创建地图实例
var myChart = echarts.init(document.getElementById('map'));

// 地图数据
var mapData = [
  {name: '北京', value: 100},
  {name: '上海', value: 80},
  {name: '广州', value: 70},
  // 其他城市的数据...
];

// 设置地图选项
var option = {
  // 地图类型
  series: [{
    type: 'map',
    map: 'china'
  }],
  // 高亮显示的城市
  visualMap: {
    min: 0,
    max: 100,
    left: 'left',
    top: 'bottom',
    text: ['High', 'Low'],
    calculable: true
  },
  // 光柱数据
  series: [{
    name: '光柱',
    type: 'bar',
    data: mapData
  }]
};

// 使用配置项显示地图
myChart.setOption(option);

你可以根据需要修改地图容器的宽度和高度，以及地图数据和光柱数据。在mapData数组中，每个对象表示一个城市，name属性表示城市的名称，value属性表示城市的值。光柱的长度会根据该值进行调整，值越大，光柱越高。