Jquery + echarts 使用
常规用法，就不细说了，按照官网一步步来。
本文主要解决问题（已参考网上其他文章）：
1、把echarts给扩展到JQuery上，做到更方便调用。
2、多图共存
3、常见的X轴格式化，钻取时传业务实体ID的问题
先上图：页面加载时，（第一个图不可以钻取，第二个可以钻取）
2、我们先点击第二个图，进行钻取，如下
3、点击左上角按钮，动态为第一个图添加点击钻取事件，然后点击第一个图进行钻取
1、html页面如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="动态添加事件到Company图表" onclick="return Button1_onclick()" /><br />
当前显示：<div id="message">
</div>
</div>
<div id="bar_company" style="height: 250px; width: 800px; background-color: Lime;">
</div>
<div id="bar_labors" style="height: 250px; width: 800px; background-color: Gray;">
</div>
</form>
<script src="Component/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Component/esl.js" type="text/javascript"></script>
<script src="Component/echartsadapter.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#bar_company').echarts({ query: { cmd: "company", company: 1 }, settings: { chartType: "line"} });
$('#bar_labors').echarts({ query: { cmd: "labors", labor: 1 }, settings: { chartType: "bar", onclick: labor_Click} });
});
function company_Click(param) {
var options = $('#bar_company').echarts('options');
showClickInfo(param, options);
}
function labor_Click(param) {
var options = $('#bar_labors').echarts('options');
showClickInfo(param, options);
}
function showClickInfo(param, option) {
var message = "您点击了：" + option.title.text + "<br/>"
+ "点击位置：seriesIndex：【" + param.seriesIndex + "】DataIndex：【" + param.dataIndex + "】,<br/>"
+ "当前点击Series:【" + param.seriesName + "】节点:【" + param.name + "】数据【" + param.data + "】";
$('#message').html(message);
}
function formatCompany(cid) {//格式化X轴显示
var labels = $('#bar_company').echarts('labels');
if (labels) return labels[cid];
return cid;
}
function Button1_onclick() {
$('#bar_company').echarts({ settings: { onclick: company_Click} }); //echarts绘制出来后，手动添加事件
}
function test() {
//使用方法：
//1、获取查询的业务参数：$('#mydivid').echarts('query');
//2、获取设置参数信息$('#mydivid').echarts('settings')
//2、获取echarts的option:$('#mydivid').echarts('options')
//3、获取echarts的echart相关对象:$('#mydivid').echarts('echarts') //获取到的对象格式 { echarts: ec, chart: null, config: null };
//4、获取echarts的X轴的labels:$('#mydivid').echarts('labels') //获取到的对象格式{1001:'first data',1002:'second data'}
}
</script>
</body>
</html>
2、echartsAdapter.js
//$("").echarts({ query: { id: 1, name: 'zxh' }, settings: { onclick: function () { } } });
//data 中会有:query,settings,echarts,labels,options
(function ($) {
$.fn.echarts = function (arg) {
var $this = $(this);
var method = arguments[0];
if (typeof (method) == 'string') {
return $this.data(method);
} else if (typeof arg == 'object') {
var init = !$this.data('query');
if (arg.query)
$this.data('query', arg.query);
var settings = $.extend({}, $.fn.echarts.defaults, arg.settings);
$this.data('settings', settings);
if (init) {//chart初始化
echartsInit.apply(this); //不应用设置
return $this;
}
if (!init && arg.query) {//重新请求data数据
echartsReload.apply(this);
return $this;
}
if (arg.settings) {
echartsApply.apply(this);
}
}
return $this;
};
function echartsApply() {
var $this = $(this);
var echarts = $this.data('echarts');
if (echarts && echarts.chart && echarts.config) {
if ($this.data('settings').onclick)
echarts.chart.on(echarts.config.EVENT.CLICK, $this.data('settings').onclick);
window.onresize = echarts.chart.resize;
}
}
function echartsInit() {
var $this = $(this);
var settings = $this.data('settings');
require.config({
packages: [{
name: 'echarts',
location: settings.echarts_path,
main: 'echarts'
}, {
name: 'zrender',
location: settings.zrender_path,
main: 'zrender'
}]
});
var chartOptions = _getOption.apply(this);
//$this.data('options', chartOptions);
require(
['echarts', 'echarts/chart/' + settings.chartType],
function (ec) {
var echarts = { echarts: ec, chart: null, config: null };
echarts.chart = ec.init($this[0]);
echarts.chart.setOption(chartOptions);
echarts.config = require('echarts/config');
$this.data('echarts', echarts);
echartsApply.apply($this);
});
return $this;
}
function _getOption() {
var $this = $(this);
var option = {};
var parameters = $.extend({}, $this.data('query'), { chartType: $this.data('settings').chartType });
$.ajax({
type: "post",
dataType: "text",
data: parameters,
async: false,
url: $this.data('settings').service,
success: function (data) {
if (data) {
option = eval('(' + datajs + ')');
if (option.labels)
$this.data('labels', option.labels);
option = option.options;
$this.data('options', option);
}
}
});
return option;
};
function echartsReload() {
var $this = $(this);
var chartOptions = _getOption.apply(this);
var echarts = $this.data('echarts');
if (echarts) {
if (echarts.chart && echarts.chart.dispose) {
echarts.chart.dispose();
echarts.chart = echarts.echarts.init($this[0]);
echarts.chart.setOption(chartOptions);
echartsApply.apply($this);
}
}
}
//arguments
$.fn.echarts.defaults = {
service: 'MobileService.ashx',
echarts_path: 'Component/echarts-2.1.9/src',
zrender_path: 'Component/zrender-master/src',
chartType: 'bar'
};
})(jQuery);
3、
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Justin.FrameWork.Web.Extensions; namespace GLM.Mobile.Web
{
/// <summary>
/// Summary description for Handler1
/// </summary>
public class MobileService : IHttpHandler
{
string chartType;
string cmd;
public void ProcessRequest(HttpContext context)
{
HttpRequest Request = context.Request;
context.Response.ContentType = "text/plain"; cmd = Request.GetValue<String>("cmd");
chartType = Request.GetValue<String>("chartType");
switch (cmd)
{
case "company":
GetCompany(context);//按照月份统计数据
break;
case "labors":
Getlabors(context);//按照月份统计数据
break;
default:
break;
}
}
private void GetCompany(HttpContext context)
{
string returnvalue = @"
{
options:{
title: { text: '分公司现场人数', x: 'center', y: 'top' },
tooltip: { trigger: 'axis' },
calculable: true,
yAxis: [{ type: 'value'
, boundaryGap: [0, 0.01]
}],
xAxis: [{
type: 'category',
data: ['1001', '1002', '1003', '1004', '1005', '1006', '1007']
,axisLabel:{
show: true,
formatter: formatCompany,
textStyle: {
color: 'auto'
}}
}],
series: [{
name: '2012.7.8',
type: '" + chartType + @"',
data: [58, 32, 15, 6, 24, 19, 36]
}]
}
,labels:{1001:'第一分公司',1002:'第二分公司', 1003:'第三分公司',1004: '第四分公司', 1005:'第五分公司',1006: '第六分公司',1007: '第七分公司'}
}
";
context.Response.Write(returnvalue);
context.Response.End(); }
private void Getlabors(HttpContext context)
{
string returnvalue = @"
{
options:{
title: { text: '劳务公司现场人数', x: 'center', y: 'top' },
tooltip: {trigger: 'axis'},
calculable: true,
yAxis: [{ type: 'value', boundaryGap: [0, 0.01]}],
xAxis: [{
type: 'category',
data: ['第一劳务公司', '第二劳务公司', '第三劳务公司', '第四劳务公司', '第五劳务公司', '第六劳务公司', '第七劳务公司']
}],
series: [{
name: '2012.7.8',
type: '" + chartType + @"',
data: [58, 32, 15, 6, 24, 19, 36]
}]
}
}
";
context.Response.Write(returnvalue);
context.Response.End(); } public bool IsReusable
{
get
{
return false;
}
}
}
}
最后，js水平有限，错误难免，欢迎板砖。
Jquery + echarts 使用的更多相关文章
- [Web][高中同学毕业分布去向网站+服务器上挂载]二、敲定思路与方向(HTML5+JS(JQuery+ECharts))
高中同学毕业分布网站:敲定思路 一.背景 第一集:http://www.cnblogs.com/Twobox/p/8368121.html 中大体确定了自己的 大体目标.大体思路. 但是 . 在今天的 ...
- H5+JS+JQuery+ECharts实现异步加载
这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...
- 利用c#+jquery+echarts生成统计报表（附源代码）
背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考 http://echarts.baidu.com/ 虽然echarts功能强 ...
- zTree Jquery eCharts
(function(){ var setting = { view:{ dblClickExpand:false, expandSpeed:300 }, data: { simpleData: { e ...
- jquery echarts 饼状图
var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...
- layui模块化加载Echarts图表v4.2.1
layui.use(['jquery','echarts'], function () { var $ = layui.$; //记得这是dom对象不是JQ对象,需要转换 echarts = layu ...
- C#曲线分析平台的制作（二，echarts前后台数据显示）
在上一篇博客中,学习了使用javascript和jquery两种方法来进行前后台交互.本篇博客着重利用jquery+echarts来实现从后台取数,从前端echarts中展示. 1.html页面编写: ...
- 2014年6月份第2周51Aspx源码发布详情
AMX高效自定义分页控件(WinForm)源码 2014-6-9 [VS2008]2014.6.9更新内容: 1. 更改用户自定义分页控件功能布局.大大精简了调用分页自定义控件的代码,和使用系统 ...
- fis-plus 学习笔记
学习了一些fls-plus前端集成的东西:学的很皮毛,很多都是对官网的解释希望与大家分享,并能得到大家的指正. 参考文档:http://oak.baidu.com/fis-plus/document. ...
随机推荐
- 转载：Cocos2D-x 游戏接入 Windows 设备所需做的六件事
原文地址:http://msopentech.com/zh-hans/blog/2014/05/09/cocos2d-x-%E6%B8%B8%E6%88%8F%E6%8E%A5%E5%85%A5-wi ...
- android 图片叠加效果——两种方法
效果图: 第一种: 第二种: 第一种是通过canvas画出来的效果: public void first(View v) { // 防止出现Immutable bitmap passed to Can ...
- telnet登录路由器启动服务的shell脚本
因为在测试中经常要telnet登录到路由器中去配置环境启动路由器,每次都输入一遍命令太麻烦了,想着写一个shell脚本实现自动登录.配置环境.启动服务的过程. 脚本实现是使用expect来实现的,所以 ...
- python写的battle ship小游戏 - 1.0
最近学python,这是今天写的一个小游戏. from random import randint class Board(object): board = [] def __init__(self, ...
- Object-oriented features
Python is an object-oriented programing language, which means that it provides features that support ...
- Swift学习（三）类型推导&基本运算&分支&循环
一.Swift中类型推导&基本运算 Swift中类型推导 如果一个标识符在定义时有直接赋值,那么可以根据后面赋值的类型,来推导出前面标识符的类型,这样前面标识符的(:类型)可以省略 查看标识符 ...
- HTML DOM（学习笔记二）
嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...
- SQL 1：常用SQL语句
导读:最近写代码,几乎是天天泡在SQL语句里,各种代码各种写.但一直缺少总结,要不就是觉得简单,要不就是觉得大家都知道.想来,我还是没能明白总结的价值在哪里.现在也就写写最近都常写的一些语句. 一,i ...
- VC 宏与预处理使用方法总结
目录(?) C/C++ 预定义宏^ C/C++ 预定义宏用途:诊断与调试输出^ CRT 和 C 标准库中的宏^ NULL 空指针^ limits.h 整数类型常量^ float.h 浮点类型常量^ m ...
- 2.3搭建Android应用程序开发环境
1.安装Android SDK (1)首选下载Android SDK: (2)下载完成之后,在Ubuntu系统下进行解压: (3)解压完成之后,配置环境变量: ①用vim打开/etc/profile文 ...