写在前面


最近,在做某个项目的时候。需要使用的可视化的图表显数据。最后,选择了百度的Echarts。

下载Echarts和主题


1.获取Echarts

  • 这是这官网的地址 传送门 直接下载最新的版本的Echarts

2.下载Echarts

  • 选择下载,拉到下面,点击在线定制

  • 然后跳转到在线构建页面,图表只选择常规的柱状图、折线图、饼图

  • 坐标系不选

  • 组件选择标题、图例、提示框

  • 其他选项 选择工具集 、代码压缩

  • 跳转下载界面,下载完成

3.下载主题

  • 选择下载->下载主题

  • 选择自己喜欢的主题

  • 点击下载

绘制一个简单的图表


1.引用Echats

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>

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

<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>

3.然后就可以通过 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>

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

这个是官网给出的最简单的例子。如果还是,有不明白的地方,可以去官网详细的看文档。

Echarts 学习系列(1)-5分钟上手ECharts的更多相关文章

  1. Echarts 学习系列(2)-常见的静态ECharts图

    目录 写在前面 折线(面积)图 1.折线图 2.堆叠折线图 3.堆积面积图 柱状(条形)图 1.柱状图 2.条形图 3.堆积条形图 饼(圆环)图 1.饼图 2.环形图 3.南丁格尔图 写在前面 上一小 ...

  2. 5 分钟上手 ECharts

    获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...

  3. Echarts 学习系列(3)-Echarts动态数据交互

    写在前面 上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件 开发环境:win10 ...

  4. echarts学习总结

    ECharts学习总结使用步骤1 引入ECharts <script src="echarts.min.js"></script>2 绘制一个简单的图表 为 ...

  5. ECharts数据图表系统? 5分钟上手!

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

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

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

  7. echarts入门,5分钟上手写ECharts的第一个图表

    1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...

  8. Echarts学习总结(一)-----柱状图

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,基于[HTML5]Canvas (ZRender),纯Javascript图表库,是百度的一个开源的数据可视化工具,业 ...

  9. 快速上手 Echarts

    最近使用到了 百度的 Echarts 数据可视化工具,这里简单介绍如何快速上手. 一.下载 这里选择目前最新版本,4.2.1 地址:https://github.com/apache/incubato ...

随机推荐

  1. mac运行模拟器simulator突然很慢

    一直都正常,突然变慢,而且慢的离谱. 上网查了下,这里记录下,或许问题不仅限于此. simulator->Debug->Slow Animations. 这个Slow Animations ...

  2. Ubuntu 出现access denied by server while mounting

    3516cv500板端nfst调试时如此配置 虚拟机: #vi /etc/exports  添加 /home/"待分享文件路径"   *(rw,sync,no_root_squas ...

  3. drf框架 - 视图家族 | GenericAPIView | mixins | generics | viewsets

    视图家族 view:视图 generics:工具视图 mixins:视图工具集 viewsets:视图集 学习曲线: APIView => GenericAPIView => mixins ...

  4. 201871010121 王方 《面向对象程序设计(java)》 第二周学习总结

    这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/11475 ...

  5. 每天一道Rust-LeetCode(2019-06-01)

    每天一道Rust-LeetCode(2019-06-01) 坚持每天一道题,刷题学习Rust. 题目描述 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的, ...

  6. Edit Video

    Vsco: the app function is very basic. To what extent. That is to say, there are several more options ...

  7. 模拟赛 T1 费马小定理+质因数分解+exgcd

    求:$a^{bx \%p}\equiv 1(\mod p)$ 的一个可行的 $x$. 根据欧拉定理,我们知道 $a^{\phi(p)}\equiv 1(\mod p)$ 而在 $a^x\equiv 1 ...

  8. Python面向对象 | isinstance和issubclass

    isinstance(a,b):判断a是否是b类(或者b类的基类)实例化的对象 class A: pass class B(A): pass obj = B() print(isinstance(ob ...

  9. 玩NOILinux

    添加PPA源 sudo add-apt-repository ppa:... 搜狗输入法 官网安装指南 下载搜狗输入法的安装包 sudo dpkg -i sogou... 安装fcitx(应该已经有了 ...

  10. Http 状态码(Status Codes)

    七.状态码(Status Codes)*服务器向用户返回的状态码和提示信息,常见的有以下一些(方括号中是该状态码对应的HTTP动词).200 OK - [GET]:服务器成功返回用户请求的数据,该操作 ...