您的位置：首页 > Web前端 > JavaScript

使用echarts图表库绘制地图

2015-06-29 19:41 746 查看

使用echarts图表库绘制地图

echarts是一个js图标库，注意到这个图标库的一个功能亮点是可以绘制地图图形。

从echarts官网上下载好文件并解压缩，然后使用webstorm创建一个html项目，在js中拖拽解压缩文件夹中的echarts.js文件。

编辑html项目中的index.html文件内容，采用标签引用的方式，代码如下。

参考 http://echarts.baidu.com/doc/start.html，有三种引入echarts的方式，链接页面介绍了两种，分别是模块化单文件引入和标签式单文件引入。此外还有模块化包引入的方式。

下面代码为标签式单文件引入的示例：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));

var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>


在echarts网站中提供了大量的图标示例，可以通过修改body标签中script内部 var option的内容，得到需要的效果。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  echarts js 图表
相关文章推荐
新的分享
章节导航