您当前所在位置: > 实用问答

echarts 使用教程

时间:2019-06-21 17:50:32  来源:  作者:网络

echarts是百度旗下的纯js图形库,鉴于其使用方便、功能强大、跨平台而广受好评。

本文就为您介绍如何使用echarts,并以柱状图为例演示从echarts文件下载到图形在页面展示的全过程

步骤分解

  1. 1

    下载echarts文件

         1)在echarts官网,点击顶部菜单【下载】,在下拉菜单中点击【下载】

         2)在下载界面可以看到4个版本,通常来说选择【常用】就够用了,点击即可下载js文件

         3)对于某些对js大小要求极高,且图形比较单一的系统,可以选择【在线定制】按钮,勾选需要的功能下载

  2. 2

    配置项查找方式

         1)在echarts官网,点击顶部菜单【文档】,在下拉菜单中点击【配置项手册】

         2)在“配置项手册”页面,有各种图形的详细配置项与使用方式介绍

         3)当需要使用某种图形,又不知道有哪些属性可以使用时,可以在此页面找到使用方式

  3. 3

    官方实例使用方式

         1)在echarts官网,点击顶部菜单的【实例】,在下拉菜单中点击【官方实例】

         2)在左侧菜单是echarts支持的各种类型的图表,例如:折线图、柱状图、饼图、散点图、地图、K线图等等

         3)点击左侧菜单的类型,如柱状图,在右侧会显示各种柱状图实例,按照实际需要,点击对应图形即可进入明细页

         4)在具体图形的明细页,左侧是echarts图形的js配置项,右侧是运行效果展示,可以修改左侧配置,点击【运行】即可实时看到效果

  4. 4

    创建如下结构的测试页面(以柱状图为例演示)

         1)在上面第一步中选择,下载【常用】的echarts文件

         2)在电脑中任何地方创建如下结构的测试文件

              -- Content

                  -- echarts.common.min.js

              -- EchartsBar.html

  5. 5

    在EchartsBar文件中添加柱状图的占位dom,并将Content文件夹下的echarts文件引入页面

  6. 6

    渲染echarts柱状图

         1)将上面第3步中的柱状图的“坐标轴刻度与标签对齐”详细界面左侧的js代码复制到EchartsBar页面

         2)将复制的js与当前页面关联

         3)为了在一个图中显示完整,此处调整了js的格式,因此看起来格式稍微与复制的有一点不一样

         4)实际项目中:按照上面第2步中的各个配置项修改为实际项目需要的样子即可

  7. 7

    echarts默认柱状图运行效果如下(直接使用浏览器打开EchartsBar文件即可运行)

    END
相关下载

玩家评论

ECSS8总决赛地点确认继S6后重回德州阿灵顿

  主办方ECS公布了第八赛季总决赛的地点和日期。   比赛将于11月28日至12月1日在美国德克萨斯州阿灵顿市的电子竞技体育场举行,赛事总奖金为50详情>>

阅读: 15
日期: 2019-09-23
《怪物猎人 世界冰原》ecapcom豪华版开箱

原标题:《怪物猎人 世界冰原》ecapcom豪华版开箱 作者:NGA-我家先生今天出门吃酒 这个礼拜大家的豪华版基本都到了,版主也发了一个比较详细的,我在这个详情>>

阅读: 20
日期: 2019-09-22
RPG名作全新登场《帝国沙加eclipse》预约开启

原标题:RPG名作全新登场《帝国沙加 eclipse》预约开启 【9月17日讯】SQUARE ENIX 旗下网页 RPG 游戏《帝国沙加》宣布今年 12 月中止营运,并宣布详情>>

阅读: 21
日期: 2019-09-17
我的地球eco中文版

《我的地球eco》是一款非常类似《我的世界》的沙盒生存模拟游戏。相比于MC,《我的地球eco》构建了一个完美的平衡生态环境,玩家的举动会影响其他物种的生活,所以不能无节制的采详情>>

阅读: 0
日期: 2019-09-06
火焰纹章Echoes:另一个英雄王cia汉化版

游戏简介火纹系列游戏开发商也是在最近的发布会上公布了《火焰纹章Echoes:另一个英雄王cia》这一个创新性的火纹系列游戏,为什么说是创新性的呢?因为在这款游戏当中,虽然游戏仍详情>>

阅读: 0
日期: 2019-09-06
ECO中文版

如果你是一名沙盒生存游戏的爱好者,那么小编就推荐由StrangeLoopGames发行的《ECO》这款游戏,在这款游戏当中,玩家将来到一个星球上,在这里开启一段生存冒险之旅。同时游戏可支详情>>

阅读: 0
日期: 2019-09-06
Eclipse v4.2下载

游戏类型:系统辅助文件大小:45.5M软件语言:简体中文运营:软件授权:免费版应用平台:WinXP/Win2003/Vista/Win7/Win8安全认证:Eclipsev4.5官方下载版本:详情>>

阅读: 4
日期: 2019-04-03
Eclipse mac版 v4.6.0下载

游戏类型:系统辅助文件大小:未知软件语言:多国语言/简体中文运营:软件授权:免费版应用平台:Mac10.6+安全认证:Eclipsemac版v4.6.0下载版本:v4.6.0【软件介绍】 详情>>

阅读: 8
日期: 2019-04-03
地铁逃离epec购买教程 地铁逃离怎么买

地铁逃离游戏该怎么在epic平台购买呢?下面来分享一下地铁逃离epec购买教程,给大家一个参考。地铁逃离epec购买教程首先需要先去epic官网注册一个账号。(最好是有详情>>

阅读: 9
日期: 2019-02-20
eclipse怎么导入主题,eclipse怎么换背景

我们都知道eclipse默认的颜色主题是白色的背景,但是如果想改变代码编辑区的背景颜色,需要怎么办呢?下面一起来看看吧。打开Eclipse-help-E详情>>

阅读: 11
日期: 2019-02-01
eclipse怎么连接genymotion模拟器

Android开发人员都知道,原生的模拟器启动比较慢,操作起来也不流畅,有时候还会莫名的掉线,出现各种问题问题。当然很多人都会选择直接使用android手机来开发,但是有时候需详情>>

阅读: 14
日期: 2019-02-01
继edCetra之后,NexTech AR宣布收购AR电子商务公司AR Ecommerce

继去年12月收购AR在线学习平台edCetra之后,加拿大上市公司NexTechARSolutions于近日宣布已正式收购AR电子商务公司ARE详情>>

阅读: 3
日期: 2019-01-11
eclipse项目如何导入myeclipse项目中如何把eclipse项

  很多初学者可能都遇到过这样的问题,有时候从网上下载的项目是myeclipse环境开发的,但是自己的电脑只装了eclipse,那么如何把eclipse项目如何导入my详情>>

阅读: 3
日期: 2018-06-22
eclipse没有server选项解决方法 eclipse servers不见了怎么办

  eclipse是一款使用频率十分高的强大编译软件,但是经常有许多的开发人员/使用者会发现一个重要的问题就是打开eclipse之后没有了server选项,也不知道该如详情>>

阅读: 8
日期: 2018-04-17
精彩推荐