Echarts基础与地图开放平台

最新推荐文章于 2024-06-11 21:36:57 发布

XT_天辰

最新推荐文章于 2024-06-11 21:36:57 发布

阅读量210

点赞数 2

本文链接：https://blog.csdn.net/TCDWOI/article/details/116236575

版权

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

摘要由CSDN通过智能技术生成

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',//系

最低0.47元/天解锁文章

XT_天辰

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts基础与地图开放平台

EchartsEcharts官网.ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）map（地图）等使用Echarts1.通过 npm 获取 echartsnpm install echarts --save2.引入
复制链接

扫一扫