Echart的简单例子

【转载自:http://echarts.baidu.com/echarts2/doc/start.html】

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>ECharts</title>
</head>
<body>
  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  <div id="main" style="height:400px"></div>
  <!-- ECharts单文件引入 -->
  <script src="${pageContext.request.contextPath}/lib/echart/dist/echarts.js"></script>
  <script type="text/javascript">
  // 路径配置
    require.config({
    paths: {
    echarts: ‘${pageContext.request.contextPath}/lib/echart/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:[‘销量‘]
  },
  //X轴
  xAxis : [
  {
    type : ‘category‘,
    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  }
  ],
  //Y轴
  yAxis : [
  {
    type : ‘value‘
  }],
series : [{
  "name":"销量",
  "type":"bar",
  "data":[5, 20, 40, 10, 10, 20]
}]
};

  // 为echarts对象加载数据
  myChart.setOption(option);
  }
);
</script>
</body>

时间: 2024-10-24 18:53:16

Echart的简单例子的相关文章

从一个简单例子来理解js引用类型指针的工作方式

? 1 2 3 4 5 6 7 <script> var a = {n:1};  var b = a;   a.x = a = {n:2};  console.log(a.x);// --> undefined  console.log(b.x);// --> [object Object]  </script> 上面的例子看似简单,但结果并不好了解,很容易把人们给想绕了--"a.x不是指向对象a了么?为啥log(a.x)是undefined?".&

Hadoop RPC简单例子

jdk中已经提供了一个RPC框架-RMI,但是该PRC框架过于重量级并且可控之处比较少,所以Hadoop RPC实现了自定义的PRC框架. 同其他RPC框架一样,Hadoop RPC分为四个部分: (1)序列化层:Clent与Server端通信传递的信息采用了Hadoop里提供的序列化类或自定义的Writable类型: (2)函数调用层:Hadoop RPC通过动态代理以及java反射实现函数调用: (3)网络传输层:Hadoop RPC采用了基于TCP/IP的socket机制: (4)服务器端

extern外部方法使用C#简单例子

外部方法使用C#简单例子 1.增加引用using System.Runtime.InteropServices; 2.声明和实现的连接[DllImport("kernel32", SetLastError = true)] 3.声明外部方法public static extern int GetCurrentDirectory(int a, StringBuilder b); 4.对外部方法操作  GetCurrentDirectory(300, pathstring); using

事件简单例子

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Runtime.InteropServices; 6 7 namespace EventTest 8 { 9 /// <summary> 10 /// 事件订阅者类 11 /// </summary> 12 class Program 13 { 14 static v

spring mvc(注解)上传文件的简单例子

spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationContext.xml中 <bean id=”multipartResolver” class=”org.springframework.web.multipart.commons.CommonsMultipartResolver”/> 关于文件上传的配置不能少 大家可以看具体代码如下: web.xml &

自定义隐式转换和显式转换c#简单例子

自定义隐式转换和显式转换c#简单例子 (出自朱朱家园http://blog.csdn.net/zhgl7688) 例子:对用户user中,用户名first name和last name进行转换成合成一个限定长度为10个字符新name. 自定义隐式转换: namespace transduction { public partial class transductionForm : Form { public transductionForm() { InitializeComponent();

使用fastjson转换json的简单例子

pom添加依赖: <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.1.41</version> </dependency> 代码: package JsonTest.JsonTest; import java.util.ArrayList; import java.util.Hash

最简单例子图解JVM内存分配和回收

一.简介 JVM采用分代垃圾回收.在JVM的内存空间中把堆空间分为年老代和年轻代.将大量(据说是90%以上)创建了没多久就会消亡的对象存储在年轻代,而年老代中存放生命周期长久的实例对象.年轻代中又被分为Eden区(圣经中的伊甸园).和两个Survivor区.新的对象分配是首先放在Eden区,Survivor区作为Eden区和Old区的缓冲,在Survivor区的对象经历若干次收集仍然存活的,就会被转移到年老区. 简单讲,就是生命期短的对象放在一起,将少数生命期长的对象放在一起,分别采用不同的回收

BIP_Case_以RDF为数据源以RTF为模板的简单例子

一. 汇总    1. 建立rdf报表    2. 开发rtf模板    3. 建立可执行程式    4. 建立并发程式    5. 注册data defination    6. 注册template    7. 运行程式    8. 开发程式中间,需将输出模式修改为xml,产生xml文件,以做rtf开发准备原始数据 二.分步解析1. 建立rdf报表2. 开发rtf模板3. 建立可执行程式4. 建立并发程式5. 注册data defination6. 注册template7. 运行程式8. 开