目录
前言
一，echarts介绍
二，echart的使用
2.1获取Apache ECharts
三，echart中toolbox
3.1 toolbox介绍
3.2 toolbox的基本属性
四，用echart画地图
4.1导入china.js文件
4.2绘制地图
4.3 增加toolbox属性
4.4完整代码
4.5效果图
前言
本文使用echarts和工具栏组件toolbox绘画地图，使用echarts和toolbox 进行数据可视化时可提供直观、交互丰富，可高度个性化定制的数据可视化图表。
一，echarts介绍
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
二，echart的使用
2.1获取Apache ECharts
在http:// https://www.jsdelivr.com/package/npm/echarts echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js，点击并保存为 echarts.js 文件。
2.2引入 Apache ECharts
在刚才保存 echarts.js 的目录新建一个 index.html 文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
</html>接下来就可以绘画图表啦。
三，echart中toolbox
3.1 toolbox介绍
工具栏是可选的一个组件，可以显示在图标上，里面的每一个工具都具有一个小功能，可以帮助用户和图表更好的交互。ECharts中内置了5个工具：数据区域缩放、动态类型切换、数据视图、重置和导出图片。在option.toolbox属性中进行配置。
3.2 toolbox的基本属性
1, toolbox.feature.saveAsImage // 导出图片
2. toolbox.feature .dataView // 数据视图
3. toolbox.feature .restore // 重置
4. toolbox.feature .dataZoom // 区域缩放
5. toolbox.feature. magicType // 动态图表类型的切换
四，用echart画地图
4.1导入china.js文件
我们需要到github上下载china.js导入echart文件中
地址： GitHub - liangrumeng2015/China.js: echarts里面的地图文件China.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="china.js"></script>
</head>
</html>4.2绘制地图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bar</title>
<script type="text/javascript" src="../static/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="../static/echarts.min.js"></script>
<script type="text/javascript" src="../static/china.js"></script>
</head>
<body>
<h2>中国地图</h2>
<div id="chart" style="width:900; height:500px;"></div>
<script type='text/javascript'>
var myChart = echarts.init(document.getElementById('chart'));
var option;
option = {
series: [
{
type: 'map',
map: 'china',
zoom: 1, //按比例放大缩小
//地图下的文字
label: {
show: true,
color: 'white',
fontSize: 10
},
itemStyle: {
normal: {
borderWidth: 2,//边际线大小
borderColor: '#00ffff',//边界线颜色
areaColor: 'pink'//默认区域颜色
},
emphasis: {
show: true,
areaColor: '#3066ba',//鼠标滑过区域颜色
shadowOffsetx: 60, //控制板块偏移
shadowOffsety: 20, //控制板块偏移
shadowBlur: 40, //控制阴影模糊程度
borderWidth: 5,//控制板块边框
shadowColor: 'pink',
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
},
name: '标签',
data: [
{
name: "南海诸岛",
value: 888,
},
{
name: "北京",
value: 8888,
},
{
name: "香港",
value: 8888,
},
{
name: "澳门",
value: 00000,
}
]
}
],
}
myChart.setOption(option);
</script>
</body>
</html>4.3 增加toolbox属性
toolbox: {
show:true,
feature: {
saveAsImage: {show:true}, // 导出图片//是否显示该工具
dataView: {show:true,}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
}
},
4.4完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bar</title>
<script type="text/javascript" src="../static/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="../static/echarts.min.js"></script>
<script type="text/javascript" src="../static/china.js"></script>
</head>
<body>
<h2>中国地图</h2>
<div id="chart" style="width:900; height:500px;"></div>
<script type='text/javascript'>
var myChart = echarts.init(document.getElementById('chart'));
var option;
option = {
toolbox: {
show:true,
feature: {
saveAsImage: {show:true}, // 导出图片//是否显示该工具
dataView: {show:true,}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
}
},
series: [
{
type: 'map',
map: 'china',
zoom: 1, //按比例放大缩小
//地图下的文字
label: {
show: true,
color: 'white',
fontSize: 10
},
itemStyle: {
normal: {
borderWidth: 2,//边际线大小
borderColor: '#00ffff',//边界线颜色
areaColor: 'pink'//默认区域颜色
},
emphasis: {
show: true,
areaColor: '#3066ba',//鼠标滑过区域颜色
shadowOffsetx: 60, //控制板块偏移
shadowOffsety: 20, //控制板块偏移
shadowBlur: 40, //控制阴影模糊程度
borderWidth: 5,//控制板块边框
shadowColor: 'pink',
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
},
name: '标签',
data: [
{
name: "南海诸岛",
value: 888,
},
{
name: "北京",
value: 8888,
},
{
name: "香港",
value: 8888,
},
{
name: "澳门",
value: 00000,
}
]
}
],
}
myChart.setOption(option);
</script>
</body>
</html>4.5效果图
