http://echarts.baidu.com/doc/start.html

1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
</body>

2、新建<script>标签引入模块化单文件echarts.js

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>

<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</body>

3、新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见引入ECharts2

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>

<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
</script>
</body>

4、<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见API & Doc

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>

以上就完成了一个简单的echarts图表，在真正用的时候要查看文档，找出自己要的属性并设置

echarts演示笔记的更多相关文章

  1. echarts学习笔记(一)

    echarts学习笔记(一) echarts开发步骤 创建一个新的html文件 在html文件head头部信息中导入echarts 声明一个容器(可以理解为画布),用于存放echarts 实例化ech ...

  2. Qt+ECharts开发笔记（二）：Qt窗口动态调整大小，使ECharts跟随Qt窗口大小变换而变换大小

    前言   上一篇将ECharts嵌入Qt中,在开始ECharts使用之前,还有一个很重要的功能,就是在窗口变换大小的时候,ECharts的图表尺寸也要跟随Qt窗口变换大小而变换大小.   Demo演示 ...

  3. Qt+ECharts开发笔记（三）：ECharts的柱状图介绍、基础使用和Qt封装Demo

    前言   上一篇成功是EChart随着Qt窗口变化而变化,本篇将开始正式介绍柱状图介绍.基础使用,并将其封装一层Qt.  本篇的demo实现了隐藏js代码的方式,实现了一个条形图的基本交互方式,即Qt ...

  4. Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo

    前言   前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt.  本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.   Demo演示 ...

  5. Qt+ECharts开发笔记（五）：ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo

    前言   上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.  本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt ...

  6. Echarts学习笔记之饼图

    注:ECHarts的相关文件请到ECharts官网下载,下载地址:http://echarts.baidu.com/download.html 1.前台 <div style="ali ...

  7. echarts 认知笔记

    0.echarts.setOption的核心认知 请注意,它是合并对象,而不是替换对象. 举个简单的例子,如果你第一次setOption时在series中配置了10个对象. 那么你下一次你意图使用只有 ...

  8. Echarts学习笔记

    1.Ecahrts使用首先需要引用js文件 Echarts.js 然后定义一个带id的容器(div就可以) 然后就可以初始化echarts了 ↓这是柱形图 <h2 class="con ...

  9. echarts学习笔记（部分angular及ant-design）

    1.在项目中修改ng-zorro组件默认样式的一些方法: 类名等 前加::ng-deep: 类名等 前加:root: 类名等 前加:host /deep/: 2.echarts横轴自定义时间粒度 两种 ...

随机推荐

  1. 集合运算符之全集、交集、补集【weber出品必属精品】

    集合的概念 与数学中的全集.交集.补集的概念是一样的 常用的集合运算符 集合运算符的作用:把两个查询构造为一个联合查询 1. 全集:求连个查询的全集 union all:将两个查询的所有数据全部列出, ...

  2. Windows环境变量修改

    做开发的时候都设置过Windows的环境变量,一直觉得实在是难用之极.网上搜索过解决方案,有个开源的小程序,试过,有问题,没有办法正常运行.所以自己写一个,权当练手. 下载地址:http://file ...

  3. keil中查看内存数据

    1.工具栏中 view->Memory Windows 然后  c:0 表示读取0地址开始的代码区数据  d:0 表示读取0地址开始的数据区数据  x:0表示读取0地址开始的外部数据区

  4. js工厂模式

    设计工厂模式是为了创建对象.通常在类或者类的静态方法中实现,具有两个目标.其中一个是:当创建相似对象时执行重复操作: 另外一个目标是:编译时不知道具体类型(类)的情况下,为工厂客户提供一种创建对象的接 ...

  5. 高效的jQuery代码编写技巧总结

    最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上找的和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度 ...

  6. jquery navi

    /// <reference path="../global.js" /> /********************************************* ...

  7. 安装python3.4

    1.http://www.python.org下载适合自己机型的镜像文件 2.一路“next”到底,安装python到C盘上 3.计算机-属性-高级系统设置-环境变量,将刚刚安装的python路径添加 ...

  8. Effective Java2读书笔记-类和接口（一）

    第13条:使类和成员的可访问性最小化 设计良好的模块的模块与设计不好的模块区别在于,设计良好的模块会隐藏所有的实现细节,把它的API与他的实现清晰地隔离开来.然后模块之间只通过API通信. 信息隐藏之 ...

  9. cygwin--简单备忘

    cygwin是windows上使用linux的一个东东 linux中可以apt-get来安装软件,在cygwin中则使用apt-cyg来安装软件 具体怎么玩的呢: 1.下载cygwin 2.下载并且修 ...

  10. Buffer lock

    buffer lock    Oracle 提供非常精确,有效的Row Level Lock机制,多个用户同时修改数据时,为了保护数据. 以块为单位挂起锁的情况不会发生,但这不太正确. 以块为单位的锁 ...