echarts入门，5分钟上手写ECharts的第一个图表
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和所需图表的路径
<!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和所需图表，回调函数中可以初始化图表并驱动图表的生成
<!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>
5.查看效果
参考上述内容+官方相关案例，调整修改，应用到自己的项目中
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>支付方式统计</title>
<style>
#main {
margin: 30px;
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:500px"></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/pie' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['微信','支付宝','积分','其他']
},
series: [
{
name:'支付方式',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:'{sh:$payment.weixin}', name:'微信'},
{value:'{sh:$payment.alipay}', name:'支付宝'},
{value:'{sh:$payment.integral}', name:'积分'},
{value:'{sh:$payment.other}', name:'其他'}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
获取相关数据
<?php
/**
* 支付方式管理
*/
class PaymentAction extends AgentAction{
protected function _initialize() {
parent::_initialize();
}
// 付款方式统计
public function index(){
// 统计订单的支付方式
$orderModel = D('Order');
$payment['weixin'] = $orderModel->getPaytypeOrderNum('weixin');
$payment['alipay'] = $orderModel->getPaytypeOrderNum('alipay');
$payment['integral'] = $orderModel->getPaytypeOrderNum('integral');
$payment['other'] = $orderModel->getPaytypeOrderNum();
$this->assign('payment',$payment);
$this->display();
}
}
?>
echarts入门，5分钟上手写ECharts的第一个图表的更多相关文章
- 5分钟上手写ECharts的第一个图表
网址:http://echarts.baidu.com/doc/start.html 架构特性 http://echarts.baidu.com/doc/feature.html | 架构 提供商业产 ...
- ECharts数据图表系统？ 5分钟上手！
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
- ECharts模块化使用5分钟上手
什么是EChats? 一句话: 一个数据可视化(图表)Javascript框架,详细?移步这里,类似(推荐)的有 HighCharts,其他? 嗯,先看看吧-- 快速上手: 模块化单文件引入(推荐). ...
- Echarts 学习系列(1)-5分钟上手ECharts
目录 写在前面 下载Echarts和主题 绘制一个简单的图表 写在前面 最近,在做某个项目的时候.需要使用的可视化的图表显数据.最后,选择了百度的Echarts. 下载Echarts和主题 1.获取E ...
- 5 分钟上手 ECharts
获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...
- Echarts入门教程精简实用系列
引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单 1.从官方网站中下载所需的echarts.js文件,该文件因功能广泛,包体较大,可自行 ...
- echarts入门
一直好奇,今晚就学习了一番,算是入门的级别,学习总是一个渐进的过程. 一路记录,一路足迹. 一:学习资料 1.主要参考的代码 https://github.com/shengxinjing/imooc ...
- 转：ECharts图表组件入门教程之Theme：ECharts图表的皮肤是什么？如何给图表换主题（皮肤）Theme？
一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表 ...
- echarts入门1【柱状图/饼图】
这几天刚好用到了echarts,不过项目使用的前端框架非常老了,由此可见echarts兼容性还是hin好的,以后的项目中可能也会遇到很多,准备由浅至深的学习一下echarts,今天先从最基础的开始记录 ...
随机推荐
- WPF-实现Windows 7 样式 Aero TreeView 控件
关于实现Windows 7 样式 Aero TreeView 控件的具体过程可以参考如下文章 http://www.cnblogs.com/o2ds/archive/2010/06/22/176302 ...
- EXTJS 4.2 资料 控件之combo 联动
写两个数据源: 1.IM_ST_Module.js { success:true, data:[ { ModuleId: '1', ModuleName: '资讯' } , { ModuleId: ' ...
- c#对字符串的各种操作
1.字符串定义 2.在字符串后面追加字符串 3.获取字符串长度 4.截取字符串的一部分 5.字符串转为比特码 6.查指定位置是否为空字符 7.查字符串是否是标点符号 8.截头去尾(Trim) 9.替换 ...
- .net sql connection pool leak
Timeout expired. The timeout period elapsed prior to obtaining a connection from the pool. This ma ...
- UITableView实现格瓦拉飞天投票模块-b
格瓦拉目前来说动画效果确实做的还比较好,虽然不是说很炫但做到精致,这次就模仿了它投票的模块.其实想到要实现它还是有很多方法,不过这次我还是采用了苹果自带控件UITableView简简单单来实现它,再次 ...
- AFNetworking 简单应用
最近最学习 AFNetworking ,根据自己所学对 AFNetWorking 一些简单应用做了一下简单封装,主要有 get,post形式获取 xml,json,get 方式获取图片,下载文件,上传 ...
- uva 10940
数学 打了个表 找一下规律.... #include <cstdio> int a[30]; void init() { a[1]=2;a[2]=4;a[3]=8;a[4]=16;a[5] ...
- oracle中int类型和number类型区别
INT类型是NUMBER类型的子类型.下面简要说明:(1)NUMBER(P,S)该数据类型用于定义数字类型的数据,其中P表示数字的总位数(最大字节个数),而S则表示小数点后面的位数.假设定义SAL列为 ...
- C++: 单例模式和缺陷
C++: 单例模式和缺陷 实现一个单例模式 1 class Singleton { 2 private: 3 Singleton() { cout << " ...
- 微软的Dll管理方案及其变迁（Side-by-side assembly）
本文简要介绍Side-by-side assembly技术,探讨在插件技术中使用类似方法的可能. 什么是Side-ty-side Assembly Side-by-side assembly是Wind ...