一个简单的 echart 迁徙图

最新推荐文章于 2024-07-31 17:33:03 发布

mrzhangmingxing123

最新推荐文章于 2024-07-31 17:33:03 发布

阅读量295

点赞数

分类专栏：迁徙图

本文链接：https://blog.csdn.net/zhangmingxinghejiaku/article/details/107906495

版权

本文展示了如何使用ECharts创建一个简单的中国地图迁徙图，包括地图的配置、颜色设定、提示信息、图例和数据范围选择器等元素，以及动态标记线和点的设置。

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>

<div id="echarts_map" style="height: 600px; padding: 5px; border: 1px solid #CCC"></div>

<script src="source/echarts.js"></script>

// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
var mapoption = {
backgroundColor: '#1b1b1b',
// backgroundColor: '#e5c7c7',
color: ['gold', 'aqua', 'lime'],
title: {
show: true,
text: '客户分布图',
x: 'center',
textStyle: {
color: '#fff'
}
},
//鼠标移上去展示的文本
tooltip: {
trigger: 'item',
formatter: '区域：{b}<br/>客户数量：{c}'
},
legend: {
show: false,
orient: 'vertical',
x: 'left',
data: ['北京 Top10', '上海 Top10', '广州 Top10'],
selectedMode: 'single',
selected: {
'上海 Top10': true,
'广州 Top10': true
},
textStyle: {
color: '#fff'
}
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
dataRange: {
min: 0,
max: 100,
calculable: true,
color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
textStyle: {
color: '#fff'
}
},
series: [
{
name: '全国',
type: 'map',

最低0.47元/天解锁文章

mrzhangmingxing123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的 echart 迁徙图

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ECharts</title></head><body>  &l...
复制链接

扫一扫