获取 ECharts

你可以通过以下几种方式获取 ECharts。

  1. 从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。

  2. 在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。

  3. 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

  4. cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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

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

</head>

</html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>

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

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

</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

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

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

</head>

<body>

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

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

    <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]

            }]

        };

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

        myChart.setOption(option);

    </script>

</body>

</html>

这样你的第一个图表就诞生了！

5 分钟上手 ECharts的更多相关文章

  1. Echarts 学习系列(1)-5分钟上手ECharts

    目录 写在前面 下载Echarts和主题 绘制一个简单的图表 写在前面 最近,在做某个项目的时候.需要使用的可视化的图表显数据.最后,选择了百度的Echarts. 下载Echarts和主题 1.获取E ...

  2. ECharts数据图表系统？ 5分钟上手！

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  3. ECharts模块化使用5分钟上手

    什么是EChats? 一句话: 一个数据可视化(图表)Javascript框架,详细?移步这里,类似(推荐)的有 HighCharts,其他? 嗯,先看看吧-- 快速上手: 模块化单文件引入(推荐). ...

  4. 一分钟上手artTemplate

    一分钟上手artTemplate artTemplate是腾讯开源的前端模版引擎.之前做hue二次开发,只接触过用python写的mako模版引擎,所以之前对前端模版引擎了解不是很多. 这次因为pm叫 ...

  5. 普通Linux用户1分钟上手vi编辑器

    *导读:普通用户只要花1分钟看第二部分即可.高级用户请忽略本文* 目录 1. 编辑器之战 2. vi的使用 2.1 vi的3个模式 2.2 vi的3个模式切换 2.3 vi最基本的命令 2.4 vi的 ...

  6. Nodejs新手村指引——30分钟上手

    概要 #准备工作 #开启简单的服务 #路由 #获取参数的三种方式 #静态文件 #数据库集成 #async解决多重嵌套问题 本文适合没有nodejs项目开发经验而又想对nodejs有个大概了解的你阅读, ...

  7. 一分钟上手, 让 Golang 操作数据库成为一种享受

    gorose, 最风骚的 go orm, 拥有链式操作, 开箱即用, 一分钟上手等八大风骚, 让 golang 操作数据库成为一种享受, 妈妈再也看不到我处理数据的痛苦了, 下面就来为大家一一讲解 g ...

  8. 三分钟上手Highcharts简易甘特图

    根据业务需求,找到了这个很少使用的图形,话不多说,看看该如何使用.首先要引入支持文件:可根据链接下载. exporting.js:https://img.hcharts.cn/highcharts/m ...

  9. 【新手】【十分钟上手系列-一】快速开发vue插件

    2018.6.28 在这浮躁的前端娱乐圈,不会三两个新框架都觉得自己不是前端.哦,不是我说的.说到底.原生才是重中之重.加油. vue用了大半年多,一直在用ui库,插件等,没有自己的东西. 想想连个v ...

随机推荐

  1. maven基础学习

    项目结构 src      -main           -java                -package      -test           -java               ...

  2. LeetCode Count of Smaller Numbers After Self

    原题链接在这里:https://leetcode.com/problems/count-of-smaller-numbers-after-self/ 题目: You are given an inte ...

  3. delphi之动态库调用和串口通讯

    串口通讯: Spcomm 控件属性: CommName  :表示COM1,COM2等串口的名字: BaudRate:设定波特率9600,4800等 StartComm StopComm 函数Write ...

  4. MyBatis Generator自动生成的配置及使用

    注意:文件名不能有中文字符,不然不能自动生成 找到MyBatis Generator.rar\MyBatis Generator\eclipse里的features和plugins文件,把这两个文件复 ...

  5. windows系统调用 互斥体mutex

    #include "iostream" #include "windows.h" using namespace std; class CCountUpDown ...

  6. 【final】站立会议---11.27

    名称:nice! 组长:李权 成员:于淼  刘芳芳韩媛媛 宫丽君 时间:11月27日 13:00 项目内容:约跑app(约吧) 地点:传媒西楼220室 内容: 新任务的分配 1.李权分配任务 2.韩媛 ...

  7. Eclipse中实现JAVA代码的自动提示功能

    1.打开Eclipse,在.出现时进行代码提示换成任意字母+.出现时的代码提示了(.abcdefghijklmnopqrstuvwxyz):

  8. 企业信息系统——SCM

    供应链是供应商.制造商.仓库.配送中心和渠道商等构成的物流网络.同一个企业可能构成这个网络的不同组成节点,但更多的情况下是由不同的企业构成这个网络中的不同节点.例如,在某条供应链中,某个企业可能即在制 ...

  9. css3实现轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. dotfiles管理

    刚刚知道dotfiles这个东西,百度也没发现什么太有价值的讲解,还都是英文,所以自己立志来好好屡屡清楚 1.dotfiles是什么?我自己的理解:linux下(mac下)有各种app,每个人会根据自 ...