echarts演示笔记
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演示笔记的更多相关文章
- echarts学习笔记(一)
echarts学习笔记(一) echarts开发步骤 创建一个新的html文件 在html文件head头部信息中导入echarts 声明一个容器(可以理解为画布),用于存放echarts 实例化ech ...
- Qt+ECharts开发笔记（二）：Qt窗口动态调整大小，使ECharts跟随Qt窗口大小变换而变换大小
前言 上一篇将ECharts嵌入Qt中,在开始ECharts使用之前,还有一个很重要的功能,就是在窗口变换大小的时候,ECharts的图表尺寸也要跟随Qt窗口变换大小而变换大小. Demo演示 ...
- Qt+ECharts开发笔记（三）：ECharts的柱状图介绍、基础使用和Qt封装Demo
前言 上一篇成功是EChart随着Qt窗口变化而变化,本篇将开始正式介绍柱状图介绍.基础使用,并将其封装一层Qt. 本篇的demo实现了隐藏js代码的方式,实现了一个条形图的基本交互方式,即Qt ...
- Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo
前言 前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt. 本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口. Demo演示 ...
- Qt+ECharts开发笔记（五）：ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo
前言 上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口. 本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt ...
- Echarts学习笔记之饼图
注:ECHarts的相关文件请到ECharts官网下载,下载地址:http://echarts.baidu.com/download.html 1.前台 <div style="ali ...
- echarts 认知笔记
0.echarts.setOption的核心认知 请注意,它是合并对象,而不是替换对象. 举个简单的例子,如果你第一次setOption时在series中配置了10个对象. 那么你下一次你意图使用只有 ...
- Echarts学习笔记
1.Ecahrts使用首先需要引用js文件 Echarts.js 然后定义一个带id的容器(div就可以) 然后就可以初始化echarts了 ↓这是柱形图 <h2 class="con ...
- echarts学习笔记（部分angular及ant-design）
1.在项目中修改ng-zorro组件默认样式的一些方法: 类名等 前加::ng-deep: 类名等 前加:root: 类名等 前加:host /deep/: 2.echarts横轴自定义时间粒度 两种 ...
随机推荐
- iptables 实现centos内网机器访问外网
环境:一台带外网和内网的机器,另一台只有内网,默认不能上网.两台机器都是centos系统带外网机器的外网ip为 123.221.20.11, 内网ip为 192.168.15.100内网机器的内网ip ...
- python 之 Paramiko学习
paramiko模块,基于SSH用于连接远程服务器并执行相关操作. 一.安装 pip3 install paramiko 二.使用 SSHClient 用于连接远程服务器并执行基本命令 基于用户名密码 ...
- JQuery.ajax一解
关于JQuery.ajax方法,好处也不用多说了,主要是想记下ajax中的一些参数: url:请求的目标地址,为一个字符串,格式为:http://localhost:端口号/User/方法名.eg:现 ...
- (转) 值不能为空。参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explorer)
打开MSSQL 2008 R2的时候,展开数据库都显示以下的错误提示: 值不能为空.参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explo ...
- 转载 Silverlight实用窍门系列：1.Silverlight读取外部XML加载配置---（使用WebClient读取XAP包同目录下的XML文件））
转载:程兴亮文章,地址;http://www.cnblogs.com/chengxingliang/archive/2011/02/07/1949579.html 使用WebClient读取XAP包同 ...
- C++中的函数指针用法
代码: #include <iostream> #include <cstdio> typedef void (*FUN)(); using namespace std; vo ...
- Ajax调用asp.net后台代码
后台代码: [WebMethod] public static string CreateDate(string name,string age) { return "姓名:"+n ...
- php的一些小笔记-文件函数（1）
---恢复内容开始--- 与文件操作相关的函数有一部分可以和linux命令比较,但是我觉得可能还是linux上使用的比较频繁 如:chown,chmod,chgrp,rename,touch,link ...
- C语言读写伯克利DB 3
gcc -o channeldb channel.c -db -Wall # -Wall参数等价于执行lint,即:进行代码的静态分析,它可以指出未初始化的变量,未使用的变量 #include < ...
- Unity3D使用NGUI做个弹窗
主要函数: NGUITools.AddChild(gameobj, prefab);//gameobj为父对象,prefab为要显示的窗体对象预制 然后写个方法,限制出现多个即可