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. ...

随机推荐

POJ 1088 滑雪记忆化DP
滑雪 Time Limit: 1000MS Memory Limit: 65536K Description Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度 ...
初探接口测试框架--python系列4
点击标题下「蓝色微信名」可快速关注坚持的是分享,搬运的是知识,图的是大家的进步,没有收费的培训,没有虚度的吹水,喜欢就关注.转发(免费帮助更多伙伴)等来交流,想了解的知识请留言,给你带来更多价值,是 ...
maven的安装与配置
1.下载相应版本的maven安装包(压缩文件) http://maven.apache.org/download.cgi 2.环境变量配置将下载的压缩包解压. 计算机===>属性=====&g ...
conpot_usage简要说明
conpot是一个ICS(工业控制系统)蜜罐, 旨在收集攻击者针对工业控制系统的攻击方法和动机. 这篇文章主要用来说明conpot的用户定制相关的一些配置. (英文原文详见: https://gith ...
opencv学习——兴趣区选取
在OpenCV中,普遍支持ROI和widthStep,函数的操作被限制于感兴趣的区域,要设置或者取消ROI,就要使用cvSetImageROI()和cvResetImage()函数.如过想设置ROI, ...
CI 自动提交表单
//coontrol $this->load->view ( '/' . $this->index_lang ['FOLDER'] . '/eprepag_form.php', $p ...
Android 操作系统的内存回收机制
参考 http://www.ibm.com/developerworks/cn/opensource/os-cn-android-mmry-rcycl/index.html
使用ngin的静态文件下载
1,主配置文件nginx.xml #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error. ...
SVN与TortoiseSVN实战：从入门到精通
SVN,版本控制程序,是支撑项目开发的基础工具. 在团队开发中,不管是程序员还是美工.测试等人员,都会用到SVN,通常会把SVN视为源代码管理工具,但对于SVN更准确的理解是: “帮助参与项目人员的管 ...
ios开发之OC基础-类和对象
本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...

Jquery + echarts 使用

Jquery + echarts 使用的更多相关文章

随机推荐

热门专题