_liuz 2015-07-22 09:35:53

参考网址:http://echarts.baidu.com/doc/start.html

一、制作一个图表容器
<div id="main" style="height:400px;"></div>

二、引入echarts.js文件
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

三、配置图表路径
require.config({
    paths:{echarts:".../dist"}
});

四、加载图表js文件
require(["echarts", "echarts/chart/bar"], loadComplete);

五、绘制图表
function loadComplete(ec) {
    var myChart = ec.init(document.getElementById("main"));
    var option = { ... }; // 图表配置信息
    myChart.setOption(option);
}

 
  
 
_liuz (北京)

愿原力与你同在。

这篇日记的标签  · · · · · ·

Echarts

推荐这篇日记的豆列  · · · · · ·  ( 全部 )

 
 

使用Echarts的五个步骤的更多相关文章

  1. 原生ajax请求的五个步骤

    //第一步,创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest(); function CommentAll() { //第二步,注册回调函数 xm ...

  2. 用 C 语言编写 Windows 服务程序的五个步骤

    Windows 服务被设计用于需要在后台运行的应用程序以及实现没有用户交互的任务.为了学习这种控制台应用程序的基础知识,C(不是C++)是最佳选择.本文将建立并实现一个简单的服务程序,其功能是查询系统 ...

  3. ORM武器:NHibernate(三)五个步骤+简单对象CRUD+HQL

    前面的两篇文章中.我们对NHibernate已经做了大致了解 <ORM利器:NHibernate(一)简单介绍>Nhibernate的作用:攻克了对象和数据库的转化问题 <ORM利器 ...

  4. 五个步骤搞定敏捷UX设计

    互联网产品发展的速度越来越快,人们对于产品的要求也在不断的升级,这直接地导致了用户体验设计的重要性不断提升.与此同时,过去的流程冗长的设计开发模式已经不能够满足快速迭代的需要.<敏捷宣言> ...

  5. 五个步骤教你理清Redis与Memcached的区别

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由Super发表于云+社区专栏 memcached和redis,作为近些年最常用的缓存服务器,相信大家对它们再熟悉不过了.前两年还在学校 ...

  6. 转 脸书pop动画的五个步骤

    http://blog.csdn.net/u013741809/article/details/38511741 5 Steps For Using Facebook Pop   // 1. Pick ...

  7. AJAX应用的五个步骤

    1.建立xmlHttpRequest对象 if(window.XMLHttpRequest) {    xmlHttp = new XMLHttpRequest();    if(xmlHttp.ov ...

  8. C#读取XML文件的五个步骤

    //1.创建XmlDocument对象 XmlDocument  xmlDoc=new XmlDocument(); //2.加载源文件 xmlDoc.Load("文件名.xml" ...

  9. 用C语言编写Windows服务程序的五个步骤

    Windows 服务被设计用于需要在后台运行的应用程序以及实现没有用户交互的任务.为了学习这种控制台应用程序的基础知识,C(不是C++)是最佳选择.本文将建立并实现一个简单的服务程序,其功能是查询系统 ...

随机推荐

  1. 【Android - 框架】之ButterKnife的使用

    ButterKnife可以省去控件findViewById的步骤,提高开发效率. 用法: 1.添加依赖: compile 'com.jakewharton:butterknife:5.1.1' 2.在 ...

  2. 用户浏览器关闭cookie处理方法

    方法一: function getSessionId(){ var c_name = "jsessionid"; // alert("cookie:"+docu ...

  3. hdu1558--并查集+判断线段相交

    简单的计算几何题,判断两线段是否相交.将相交的两线段使用并查集归到一类中.查询时输出线段对应集合中元素的个数. #include<stdio.h> struct Point{ double ...

  4. spark 启动job的流程分析

    从WordCount開始分析 编写一个样例程序 编写一个从HDFS中读取并计算wordcount的样例程序: packageorg.apache.spark.examples importorg.ap ...

  5. android 30 下拉列表框:ArrayAdapter和Spinner.

    package com.sxt.day05_04; import android.os.Bundle; import android.app.Activity; import android.cont ...

  6. android 26 设置项目有多个入口Activity。

    第一个activity package com.sxt.day04_11; import android.os.Bundle; import android.app.Activity; import ...

  7. Java基础知识强化之集合框架笔记28:ArrayList集合练习之去除ArrayList集合中的重复字符串元素(升级)

    1. 需求:ArrayList去除集合中字符串的重复值(字符串的内容相同)     要求:不能创建新的集合,就在以前的集合上做. 2. 代码示例之 去除集合中重复元素,不创建新的集合: package ...

  8. postgre sql 字符串转为integer类型

    select cast(setting_value as integer) from ud_organization_setting. select cast('123123' as integer) ...

  9. SQL某个字段在原内容上增加固定内容或replace查找替换内容

    今天正好遇到一个SQL小问题,特做备注 在原有的表中数据如pic 在不动原内容的基础上增加../路径,但不能修改原数据值 原数据 SQL: pic字段 需要增加'../'的内容 update Bmps ...

  10. The windows PowerShell snap-in 'Microsoft.Crm.PowerShell' is not installed on this computer

    加载PowerShell插件时出现以下错误: The windows PowerShell snap-in 'Microsoft.Crm.PowerShell' is not installed on ...