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. kafka的一些常用命令

    启动zookeeper bin/zookeeper-server-start.sh config/zookeeper.properties & 启动kafka bin/kafka-server ...

  2. OD调试4--去除NAG窗口

    OD调试4--去除NAG窗口 nag本意是烦人的意思,nag窗口是软件设计者用来时不时提醒用户购买正版的警告窗口.软件设计者可能认为当用户忍受不了试用版中的这些烦人的窗口时,就会考虑购买正式版本. 一 ...

  3. VC中遍历目标进程中的模块

    VC中遍历目标进程中的模块 MFC代码win32 也可以用 在下面代码进行修改转换就可以了CString strModule; 可以换成 char* 但是MODULEENTRY32结构中的szModu ...

  4. 如何向java后台的对象中传数组

    1.后台对象的参数需要是是list对象 /* * copyright : GLOBALROAM Ptd Ltd * VmCreateInfo.java * Author: * zhangpengyan ...

  5. 如何让checkbox复选框只能单选

    function框架div 如何让checkbox复选框只能单选 在项目开发中遇到一个这样的问题,要让一列复选框架在任何时间段内只能选择一个. 有人说怎么不用单选框了,因为单选框一旦选择了就不能取消选 ...

  6. Funny String

    def main(): t = int(raw_input()) for _ in xrange(t): s = raw_input().strip() s_len = len(s) is_funny ...

  7. Android ListView SimpleAdapter支持Bitmap类型图片显示

    // 处理simpleAdapter中包括bitmap类型 adapter.setViewBinder(new ViewBinder() { public boolean setViewValue(V ...

  8. 迷宫问题python实现(靠右手摸墙)

    大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang 这是大二时候的数学模型毕业课程设计,我选择了自己研究盲人穿越迷宫的问题.当然后来再在网上查了这个问 ...

  9. php跨服务器传递对象

    最近因为研究跨域名,跨服务器的问题,所以无聊,就想到了一个跨服务器传递对象的问题. 想要跨服务器传递数据,那么就要使用到get或者post提交. 我这里的方法有点复杂,但是因为平时工作时,有封装相应的 ...

  10. 使用CURL发彩信，短信和进行多线程

    短彩信发送 01 $xml_data = '<?xml version="1.0" encoding="UTF-8" standalone="y ...