echarts介绍及如何使用（转）

最新推荐文章于 2025-03-19 17:58:06 发布

A.杨大侠

最新推荐文章于 2025-03-19 17:58:06 发布

阅读量595

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_28863191/article/details/102768393

版权

本文档介绍了ECharts的快速入门，包括环境搭建只需引入echarts.min.js，创建DOM容器，使用echarts.init初始化，以及设置图表参数的方法。通过简单的步骤，读者可以了解如何在五分钟内创建一个条形图，同时提供了官方API链接以获取更多详细信息。

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

转载地址：https://blog.youkuaiyun.com/u010989191/article/details/51326939

前言

如果你想要用较少的代码实现比较酷炫的数据统计表，echarts是值得你考虑的一种实现方式。官网提供了很多实例供参考：http://echarts.baidu.com/examples.html。感兴趣可以先一睹为快！！！

环境搭建

这个环境搭建so easy! 其实只有一个echarts.min.js而已。可以从官网下载http://echarts.baidu.com/download.html。根据自己的需要可以常用、精简、安装或者源码包，甚至可以自定义下载。
在你的网页里加入这个js文件就有了echarts的开发环境，是不是so easy！

创建演示实例

虽说官方给出了很多演示实例，同时也给出了一些帮助文档。但是个人认为还是有必要弄清楚如何利用官方所提供的js创建实现一些图表，具体每个图表的参数有哪些，怎么设置，这就需要查看相关的帮助文档。而我这里所说的就是指明怎么创建及一些值得注意的地方。

1）引入echarts.js。

<script type="text/javascript" src="./js/echarts.js"></script>

2）创建一个DOM容器。熟悉html的朋友应该很清楚，一个html就是一个DOM树，各个标签节点都是dom节点。DOM容器就是里面可以存放其他节点标签，比如div。

<div id="main" style="width: 500px;height: 400px;"></div>

3）echarts.init(dom容器)。dom容器必须是html的节点，如果是使用jQuery获取的则必须指定集合中的一个元素节点，比如(“#main”)则表示jQuery对象。$(“#main”)[0]则表示一个id为main的节点。

var myChart = echarts.init(document.getElementById("main"));

4）设置参数。
方法一：

var option = {
                title:{
                    text:"第一个图标演示示例"
                },
                tooltip:{
                    text:"this is tool tip"
                },
                legend:{
                    data:['销量']
                },
                xAxis:{
                    data:["寸衫","羊毛衫","裤子","袜子","皮鞋","帽子"]
                },
                yAxis:{},
                series:[{
                            name:["销量"],
                            type:"bar",
                            data:[5,20,36,6,43,67]
                        }]
            };

            myChart.setOption(option);

方法二：

myChart.setOption({
                title:{
                    text:"第一个图标演示示例"
                },
                tooltip:{
                    text:"this is tool tip"
                },
                legend:{
                    data:['销量']
                },
                xAxis:{
                    data:["寸衫","羊毛衫","裤子","袜子","皮鞋","帽子"]
                },
                yAxis:{},
                series:[{
                            name:["销量"],
                            type:"bar",
                            data:[5,20,36,6,43,67]
                        }]
            });

完成以上就已经实现了一个条形图。对就是这么简简单单的就实现了图表，正如官网说的五分钟学会echarts。
具体每一个图表的相关设置属性需要查看相对额帮助文档！！！http://echarts.baidu.com/api.html。

演示实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/echarts.js"></script>
</head>
<body>
    <div class="col-xs-4">
            <h3>条形图</h3>
            <div id="main" style="width: 500px;height: 400px;"></div>
            <script type="text/javascript">
            var myChart = echarts.init(document.getElementById("main"));
            var option = {
                title:{
                    text:"第一个图标演示示例"
                },
                tooltip:{
                    text:"this is tool tip"
                },
                legend:{
                    data:['销量']
                },
                xAxis:{
                    data:["寸衫","羊毛衫","裤子","袜子","皮鞋","帽子"]
                },
                yAxis:{},
                series:[{
                            name:["销量"],
                            type:"bar",
                            data:[5,20,36,6,43,67]
                        }]
            };

            // myChart.setOption(option);

            myChart.setOption({
                title:{
                    text:"第一个图标演示示例"
                },
                tooltip:{
                    text:"this is tool tip"
                },
                legend:{
                    data:['销量']
                },
                xAxis:{
                    data:["寸衫","羊毛衫","裤子","袜子",

最低0.47元/天解锁文章