Echarts基础与地图开放平台

最新推荐文章于 2025-04-25 16:52:58 发布

原创最新推荐文章于 2025-04-25 16:52:58 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了Echarts的基础知识，包括如何通过npm安装和引入Echarts，以及展示了柱形图、折线图、饼图的配置案例。同时，文章还探讨了Echarts中的地图功能，并提到了如何使用百度地图开放平台创建项目并获取密钥。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts

Echarts官网.
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
echarts 里系列类型（series.type）就是图表类型。
系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）map（地图）等

使用Echarts

1.通过 npm 获取 echarts

npm install echarts --save

2.引入echarts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
    //可以根据自己所需引入不同版本的echarts
</head>
</html>

以上两种方法都可以使用Echarts

案例

1.先引入Echarts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
    //可以根据自己所需引入不同版本的echarts
</head>
<body>
  <div id="chart"></div>
</body>
</html>

2.配置好基本框架

<script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
        xAxis: {},
        yAxis: {},
        series: [{}]
        };
        myChart.setOption(option);
    </script>

3.柱形图

 xAxis: {
     data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
 },
 yAxis: {},
 series: [{
     type: 'bar',//系图类型
     data: [5, 20, 36, 10, 10, 20] //与上面的data相对应，这个为数据
 }]

在这里插入图片描述
4.折线图

 xAxis: {
    data: ["4.1","4.2","4.3","4.4","4.5","4.6","4.7"]
 },
 yAxis: {},
 series: [{
     type: 'line',//系图类型
     data: [25,30,25,27,32,30,35] //与上面的data相对应，这个为数据
 }]

在这里插入图片描述
5.饼图

 series: [{
     type: 'pie',//系图类型
     data: [22,34,32] //与上面的data相对应，这个为数据
 }]

在这里插入图片描述
这就是基础的饼图
指示线可以去掉
加入这个属性并设置

label: {
   normal: {
            show: false, //改为false就消失，true就出现
    }
}

在这里插入图片描述

在series中加入
radius: [“40%”, “70%”]
可以让你的饼图变成环形

在这里插入图片描述

地图

百度地图.
百度地图开放平台是一款对开发者提供地图模块的一个平台
使用这个平台首先的根据这个一步步来
百度地图: 注册
在获取密钥ak的时候，你只是学习需要引入地图，可以这样：
在这里插入图片描述
来创建项目获取密钥ak
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=3yj0rStCaFnxTV7o70kTcevEUajrqMWn"></script>
    //<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">  可以换成你的ak来进行试验
</script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #map{
            width: 600px;
            height: 600px;
        }
        .anchorBL,.BMap_cpyCtrl{
            display: none;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map = new BMapGL.Map('map')
        var point = new BMapGL.Point(116.404,39.915)
        map.centerAndZoom(point, 10)
        map.enableScrollWheelZoom(true)
    </script>
</body>
</html>

在这里插入图片描述