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的第一个图表的更多相关文章

  1. 5分钟上手写ECharts的第一个图表

    网址:http://echarts.baidu.com/doc/start.html 架构特性 http://echarts.baidu.com/doc/feature.html | 架构 提供商业产 ...

  2. ECharts数据图表系统? 5分钟上手!

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  3. ECharts模块化使用5分钟上手

    什么是EChats? 一句话: 一个数据可视化(图表)Javascript框架,详细?移步这里,类似(推荐)的有 HighCharts,其他? 嗯,先看看吧-- 快速上手: 模块化单文件引入(推荐). ...

  4. Echarts 学习系列(1)-5分钟上手ECharts

    目录 写在前面 下载Echarts和主题 绘制一个简单的图表 写在前面 最近,在做某个项目的时候.需要使用的可视化的图表显数据.最后,选择了百度的Echarts. 下载Echarts和主题 1.获取E ...

  5. 5 分钟上手 ECharts

    获取 ECharts 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整 ...

  6. Echarts入门教程精简实用系列

    引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单 1.从官方网站中下载所需的echarts.js文件,该文件因功能广泛,包体较大,可自行 ...

  7. echarts入门

    一直好奇,今晚就学习了一番,算是入门的级别,学习总是一个渐进的过程. 一路记录,一路足迹. 一:学习资料 1.主要参考的代码 https://github.com/shengxinjing/imooc ...

  8. 转:ECharts图表组件入门教程之Theme:ECharts图表的皮肤是什么?如何给图表换主题(皮肤)Theme?

    一.什么是ECharts图表的皮肤(主题)? 针对这个问题我只能这样回答,ECharts图表的主题(皮肤)就犹如人的衣服一样,是用来衬托和渲染主体,使其变得更加美观好看的目的.你去过ECharts图表 ...

  9. echarts入门1【柱状图/饼图】

    这几天刚好用到了echarts,不过项目使用的前端框架非常老了,由此可见echarts兼容性还是hin好的,以后的项目中可能也会遇到很多,准备由浅至深的学习一下echarts,今天先从最基础的开始记录 ...

随机推荐

  1. Asp.net 引用css/js资源文件

    注意Page.ResolveUrl之前的双引号,不是单引号 <script type="text/javascript" src="<%= Page.Reso ...

  2. Cassandra1.2文档学习(19)—— CQL索引

    参考文档:http://www.datastax.com/documentation/cql/3.0/webhelp/index.html#cql/ddl/ddl_primary_index_c.ht ...

  3. spark向量

    转自 1.本地向量MLlib的本地向量主要分为两种,DenseVector和SparseVector,顾名思义,前者是用来保存稠密向量,后者是用来保存稀疏向量,其创建方式主要有一下三种(三种方式均创建 ...

  4. 使用WebGL实现一个Viewer来显示STL文件

    关键字:WebGL,STL,ThreeJS,Chrome,Viewer,Python3.4, HTML5,Canvas. OS:Windows 10. 本文介绍如何使用ThreeJS来实现一个WebG ...

  5. ValueError: No JSON object could be decoded?此种异常的解决方案之一

    第一次遇到这样的异常,实在不知道如何是好?进行了测试发现报错的json出没有问题,而且每次出现异常的位置不一样 于是我认为这样的问题可能是因为程序执行过快,所以很简单的解决办法是: def deal_ ...

  6. unity3d KeyCode各键值说明

    KeyCode :KeyCode是由Event.keyCode返回的.这些直接映射到键盘上的物理键. http://docs.unity3d.com/ScriptReference/KeyCode.h ...

  7. oracle中的dual表详解

    oracle中的dual表详解 1.DUAL表的用途 Dual 是 Oracle中的一个实际存在的表,任何用户均可读取,常用在没有目标表的Select语句块中 --查看当前连接用户 SQL> s ...

  8. MVC5+EF6+BootStrap3.3.5 博客系统之EF(一)

  9. Code for the Homework1 改进

    #include <iostream> #include <vector> #include "shape.h" //using namespace std ...

  10. [转载]再谈iframe自适应高度

    Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html 下面开始讲: 通过Google搜索iframe 自适应高度,结果5W多条,搜索 ...