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,今天先从最基础的开始记录 ...
随机推荐
- ListView练习
1. 在 .xml中创建一个ListView是不会显示出来的. 2. ListView的Item: 列表项, 3. 显示ListView的4个要素: 3.1 ListView控件:在layout布局中 ...
- dbt
Procedure Relocate(s : state; b : base_index) { Move base for state s to a new place beginning at b ...
- php入门变量之变量的间接引用、连接字符串和连接赋值运算符
[1]变量的间接引用: <?php $a = 'b'; $$a = '123'; echo $b; ?> 上面的输出结果是123 我们可以看到在第二行代码中多了一个$,并通过指定的名称访问 ...
- 学习VirtualEnv和Nginx+uwsgi用于django项目部署
以下叙述中用到的操作系统:Linux CentOS 6.X. 最近几天了解一下VirtualEnv,Apache+Daemon mode,Nginx+uwsgi的概念,并且在项目中实验性部署了一下(目 ...
- 使用urllib2的HttpResponse导致内存不回收（内存泄漏）
问题出现环境:python 2.7.1(X)及以下, Windows(或CentOS) 这个问题产生在lib/urllib2.py的line 1174 (python 2.7.1),导致形成了cycl ...
- 快速编译Delphi XE3 项目工程组
Embarcadero 做了个好事.工程组可以直接使用 MSBuild 进行编译,让发布更简单.在Bin目录中 rsvars.bat 用于设置编译的环境变量,结合使用就可以顺利进行编译. call r ...
- jquery pass parameter to ajax callback
$('.del').on('click', function () { var id = $(this).attr('id'); var url = '/m/g2_content_del/' + id ...
- iOS的view翻转动画实现--代码老，供参考
新建一个view-based模板工程,在ViewController文件中添加下面的代码,即可实现翻转效果: - (void)viewDidLoad { [super viewDidLoad]; // ...
- C#实现IDispose模式
.net的GC机制有两个问题:首先GC并不能释放所有资源,它更不能释放非托管资源.其次,GC也不是实时的,所有GC存在不确定性.为了解决这个问题.NET提供了析构函数 public class Dis ...
- css3分栏
<!DOCTYPE HTML> <meta charset="UTF-8"> <title>分栏</title> <style ...