<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小(宽高)的Dom-->
<div id="echarts_map" style="height: 600px; padding: 5px; border: 1px solid #CCC"></div>
<!--Step:2 Import echarts.js-->
<!--Step:2 引入echarts.js-->
<script src="source/echarts.js"></script>
<script type="text/javascript">
// 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',