<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="barMain" style="height:400px"></div>
<div id="lineMain" 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',
　　　　　　　　'echarts/chart/line'
　　　　　　],
　　　　　　drawEcharts
);

function drawEcharts(ec){
　　drawBar(ec);
　　drawLine(ec);
}
function drawBar(ec){
　　var myBarChart = ec.init(document.getElementById('barMain'));
　　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]
　　　　}
　　]
};
myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并
}

function drawLine(ec){
　　var myLineChart = ec.init(document.getElementById('lineMain'));
　　var option2 = {
　　　　title : {
　　　　text: '未来一周气温变化',
　　　　subtext: '纯属虚构'
　　},
　　tooltip : {
　　　　trigger: 'axis'
　　},
　　legend: {
　　　　data:['最高气温','最低气温']
　　},
　　toolbox: {
　　　　show : true,
　　　　feature : {
　　　　　　mark : {show: true},
　　　　　　dataView : {show: true, readOnly: false},
　　　　　　magicType : {show: true, type: ['line', 'bar']},
　　　　　　restore : {show: true},
　　　　　　saveAsImage : {show: true}
　　　　}
　　},
　　calculable : true,
　　xAxis : [
　　　　{
　　　　　　type : 'category',
　　　　　　boundaryGap : false,
　　　　　　data : ['周一','周二','周三','周四','周五','周六','周日']
　　　　}
　　],
　　yAxis : [
　　　　{
　　　　　　type : 'value',
　　　　　　axisLabel : {
　　　　　　　　formatter: '{value} °C'
　　　　　　}
　　　　}
　　],
　　series : [
　　　　{
　　　　　　name:'最高气温',
　　　　　　type:'line',
　　　　　　data:[11, 11, 15, 13, 12, 13, 10],
　　　　　　markPoint : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'max', name: '最大值'},
　　　　　　　　　　{type : 'min', name: '最小值'}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'average', name: '平均值'}
　　　　　　　　]
　　　　　　}
　　　　},
　　　　{
　　　　　　name:'最低气温',
　　　　　　type:'line',
　　　　　　data:[1, -2, 2, 5, 3, 2, 0],
　　　　　　markPoint : {
　　　　　　　　data : [
　　　　　　　　　　{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'average', name : '平均值'}
　　　　　　　　]
　　　　　　}
　　　　}
　　]
};
myLineChart.setOption(option2,true);
}
</script>
</body>

补充：给图表绑定事件（以上面柱状图为例，绑定click事件）

　/* 给柱状图绑定click事件 */
　　var ecConfig = require('echarts/config');
　　function eConsole(param) {
　　　　alert(param.value); 　　 // 弹出当前柱子的数值
　　}
　　myBarChart.on(ecConfig.EVENT.CLICK, eConsole);

这段代码加在 myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并，这行代码上面。

-----------------------------------------------------------------------------------------------------------------------------------------------

如下：

　　

　

ECharts 在同一个页面添加多个图表 并 给图表绑定事件的更多相关文章

  1. 系统管理模块_岗位管理_改进_使用ModelDroven方案_套用美工写好的页面效果_添加功能与修改功能使用同一个页面

    改进_使用ModelDroven方案 @Controller @Scope("prototype") public class RoleAction extends ActionS ...

  2. jQuery对 动态添加 的元素 绑定事件（on()的用法）

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  3. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  4. jQuery动态添加li标签并添加属性和绑定事件

    代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...

  5. echarts一个页面动态加载两张不同图表数据

    参考 http://www.stepday.com/topic/?877 http://blog.csdn.net/for_china2012/article/details/45167161 // ...

  6. 在同一个页面使用多个不同的jQuery版本，让它们并存而不冲突

    - jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,现已经达到了1.6.4版本,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3 ...

  7. vue引入echarts、找不到的图表引入方法、图表中的点击事件

    1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...

  8. vue通过ID（参数）修改URL复用同一个页面（组件）不重新加载的问题

    项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也 ...

  9. 如何在MVC_WebAPI项目中的APIController帮助页面添加Web测试工具测试

    本文转载自:http://www.cnblogs.com/pmars/p/3673811.html 先看效果图: 以下是原文: 如何在帮助页面添加测试工具 上一篇我在ASP.NET里面添加了一个Hel ...

随机推荐

  1. mongodb 3.0 版本分片部署步骤

    # linux 网络优化 1. 文件中/etc/sysctl.conf, 加入 net.core.somaxconn = 2048 fs.file-max = 2000000 fs.nr_open = ...

  2. Web 在线文件管理器学习笔记与总结（13）重命名文件夹（14）复制文件夹

    (13)重命名文件夹 ① 重命名文件夹通过 rename($oldname,$newname) 实现 ② 检测文件夹名是否符合规范 ③ 检测当前目录中是否存在同名文件夹名称,如果不存在则重命名成功 i ...

  3. 表单序列化 js

    function serliaze(form) { //序列化表单 var obj = {}; $.each(form.serializeArray(), function (index) { if ...

  4. Greedy_algorithm

    https://en.wikipedia.org/wiki/Greedy_algorithm

  5. EFDC主控文件efdc.inp文件的xml格式化处理——转载http://blog.sina.com.cn/s/articlelist_1584892573_0_1.html

    在对EFDC模型进行系统集成时,虽然可以通过一行一行读来进行解析处理,但那将是一个繁琐的工作.我们经过xml格式化处理后,再经xsd转成Dataset类对象,那么整个主控文件就是一个数据库表集合,对其 ...

  6. java动态联编

    JAVA中联编有两种,一种是动态联编,一种是静态联编. 动态联编:也叫多态联编或者是迟后联编,因为到底要调用哪一个函数,在编译时不能确定,而要推迟到运行中确定.也就是说,要等到程序运行时,确定了指针所 ...

  7. [教程] 以本论坛为例，手把手教你使用按键精灵POST登陆网页

    本帖最后由 isaacc 于 2012-2-26 11:08 编辑 整个操作,很无脑.只要你够勤快,你学不会,你来咬我.懒人和伸手党就直接复制代码去玩吧,但我不是叫你拿去干坏事. 准备工具:WPE和I ...

  8. Qt from Linux to Windows target

    45down voteaccepted Just use M cross environment (MXE). It takes the pain out of the whole process: ...

  9. C#中String 和string 的区别

    C#中同时存在String与string MSDN中对string的说明: string is an alias for String in the .NET Framework.string是Str ...

  10. Eclipse 常用整理

    1.编译 eclipse默认是修改程序后自动编译的,如果不能自动编译,你可以查看project->build automatically选项是否被选中. 手动编译整个工程,可以使用Project ...