使用echarts图表库绘制地图

最新推荐文章于 2024-03-06 11:33:20 发布

cheung_seol

最新推荐文章于 2024-03-06 11:33:20 发布

阅读量3k

点赞数

分类专栏： web 文章标签： echarts js 图表

本文链接：https://blog.csdn.net/pepping798/article/details/46685869

版权

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

使用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的内容，得到需要的效果。

cheung_seol

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用echarts图表库绘制地图

使用echarts图表库绘制地图echarts是一个js图标库，注意到这个图标库的一个功能亮点是可以绘制地图图形。从echarts官网上下载好文件并解压缩，然后使用webstorm创建一个html项目，在js中拖拽解压缩文件夹中的echarts.js文件。编辑html项目中的index.html文件内容，采用标签引用的方式，代码如下。参考 http://echarts.baidu.com/doc/s
复制链接

扫一扫