ECharts快速入门

  1. 引入 ECharts
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <!-- 引入 ECharts 文件 -->

    <script src="echarts.min.js"></script>

</head>

</html>
  1. 准备一个具备高和宽的DOM容器
<body>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

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

</body>
  1. 初始化echarts实例
<script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

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

        // 指定图表的配置项和数据

        var option = {

            title: {

                text: 'ECharts 入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

            xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            }]

        };

    </script>
  1. 通过setOption方法激活！
// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

完成代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!--1. 引入 echarts.js -->

    <script src="echarts.min.js"></script>

</head>

<body>

    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->

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

    <script type="text/javascript">

        //3. 基于准备好的dom，初始化echarts实例

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

        // 指定图表的配置项和数据

        var option = {

            title: {

                text: 'ECharts 入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

            xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [5, 20, 36, 10, 10, 20]

            }]

        };

        // 4.使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

ECharts——快速入门的更多相关文章

  1. Echarts快速入门---------v客学院技术分享

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  2. ECharts快速入门

    一.简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Saf ...

  3. Web Api 入门实战 （快速入门+工具使用+不依赖IIS）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  4. SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  5. 前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令（2）

    今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...

  6. 【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  7. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  8. Mybatis框架 的快速入门

    MyBatis 简介 什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果 ...

  9. grunt快速入门

    快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...

  10. 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

随机推荐

  1. ASR项目实战-交付团队的分工

    对于通常的软件项目,参与角色,比如可以有用户,消费者,产品团队,研发团队(研发团队包括开发和测试),运营团队,运维团队,管理团队. 通常认为,用户,负责购买服务的群体,而消费者,负责使用业务的群体.这 ...

  2. [简单] 基于注解玩转excel导出导入

    基于注解玩转excel导出导入 demo 请 加入 598347590 技术解决群获取 个人博客 https://yangbuyi.top 话不多说 开始 <!-- poi office --& ...

  3. 文心一言 VS 讯飞星火 VS chatgpt （169）-- 算法导论13.2 2题

    二.用go语言,证明:在任何一棵有 n 个结点的二叉搜索树中,恰有 n-1种可能的旋转. 文心一言: 要证明在任何一棵有 n 个结点的二叉搜索树中,恰有 n-1 种可能的旋转,我们可以按照以下步骤逐步 ...

  4. Windows 7更新失败的解决方法

    你好,1.在开始菜单中点击运行,→输入"services.msc"→找到"windows update"右击选择"停止":2.进入C:\wi ...

  5. 【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存

    问题描述 在APIM的 <return-response> 策略中,设置Cookie值,因为需要设置多个Cookie值,使用下面两种方式都只能保存一个Cookie值: 方式一:把多个coo ...

  6. cookie的一些知识点总结

    一.cookie的种类 sessionID 这个ID是会话性的,只要关闭了当前浏览器,这个ID会消失,需要调用getSessoin重新获取一个新的session 会话性cookie 这个cookie也 ...

  7. flink 笔记

    flink 分区实现 http://smartsi.club/physical-partitioning-in-apache-flink.html

  8. 使用 UCS(On-Premises) 管理您的GPU资源池，释放AI大模型算力潜能

    本文分享自华为云社区<使用 UCS(On-Premises) 管理您的GPU资源池,释放AI大模型算力潜能>,作者:云容器大未来. AI 技术现状及发展趋势 过去十余年,依托全球数据.算法 ...

  9. DTSE Tech Talk 第18期丨统计信息大揭秘，数仓SQL执行优化之密钥

    摘要:华为云EI DTSE技术布道师王跃,针对统计信息对于查询优化器的重要性,GaussDB(DWS)最新版本的analyze当前能力,与开发者和伙伴朋友们展开交流互动,帮助开发者快速上手使用统计信息 ...

  10. 人工智能聊天DEMO

    import urllib.parse import requests #调用机器人接口 def qingyunke(msg): url = "http://api.qingyunke.co ...