SampleChart/HighLight.html at master · zhagqn/SampleChart · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../../../themes/lightblue/p.css" rel="stylesheet" />
    <link href="../../../themes/lightblue/jqgrid/ui.jqgrid.css" rel="stylesheet" />
    <link href="../../../themes/lightblue/jqueryui/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />

    <script src="../../core/jquery-1.9.1.min.js"></script>
    <script src="../../core/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="../../common/tools.js"></script>
    <script src="Scripts/echarts/echarts.js"></script>
    <script src="Scripts/SampleChart.js"></script>
    <script>
        $(function () {
            getChart();
            getLine();

            setInterval(function () {
                getLine();
            }, 3000);
        });

        function getChart() {
            var data = '{"colnames":["年份","指标1","指标2"],"rows":[{"col0":"2010年","col1":"50","col2":"60"},{"col0":"2011年","col1":"30","col2":"80"},{"col0":"2012年","col1":"40","col2":"50"},{"col0":"2013年","col1":"10","col2":"50"},{"col0":"2014年","col1":"80","col2":"30"},{"col0":"2015年","col1":"70","col2":"50"}]}';
            //var data = '{"colnames":["性别","身高","体重"],"rows":[]}';
            //var data = '{"colnames":["维护人员","包机权重","网络质量得分"],"rows":[{"col0":"艾亚琪","col1":"2986","col2":"50"},{"col0":"白建波","col1":"2061","col2":"68.45"},{"col0":"蔡方良","col1":"2329","col2":"71.77"},{"col0":"曹国峰","col1":"2033","col2":"68.66"},{"col0":"曹明","col1":"2326","col2":"69.8"},{"col0":"巢翼","col1":"1987","col2":"69.23"},{"col0":"陈昌生","col1":"2159","col2":"65.23"},{"col0":"陈良贤","col1":"1966","col2":"68.82"},{"col0":"陈亮","col1":"2220","col2":"50"},{"col0":"陈龙","col1":"2055","col2":"68.53"},{"col0":"陈龙斌","col1":"2276","col2":"72.38"},{"col0":"陈业代","col1":"2190","col2":"63.04"},{"col0":"陈玮","col1":"2137","col2":"66.26"},{"col0":"邓若君","col1":"2168","col2":"70.13"},{"col0":"邓涛","col1":"2122","col2":"71.55"},{"col0":"邓志辉","col1":"2251","col2":"72.73"},{"col0":"冯呈峰","col1":"2814","col2":"50"},{"col0":"付学新","col1":"2272","col2":"69.58"},{"col0":"高丰明","col1":"2054","col2":"64.17"},{"col0":"龚沪光","col1":"2066","col2":"69"},{"col0":"龚凯","col1":"2989","col2":"50"},{"col0":"郭伟","col1":"2280","col2":"67.02"},{"col0":"过建勇","col1":"1838","col2":"70.31"},{"col0":"何居森","col1":"2021","col2":"70.67"},{"col0":"何寅","col1":"2777","col2":"72.29"},{"col0":"贺立志","col1":"2120","col2":"68.92"},{"col0":"胡宁","col1":"2063","col2":"66.61"},{"col0":"胡忠洪","col1":"2316","col2":"69.43"},{"col0":"黄坚_上饶","col1":"2130","col2":"67.5"},{"col0":"黄威","col1":"1959","col2":"72.58"},{"col0":"黄文峰","col1":"2361","col2":"50"},{"col0":"黄有金","col1":"1959","col2":"70.59"},{"col0":"江亲龙","col1":"2200","col2":"67.4"},{"col0":"江舟","col1":"3045","col2":"50"},{"col0":"江韬","col1":"2334","col2":"73.39"},{"col0":"蒋国荣","col1":"2333","col2":"72.35"},{"col0":"金见","col1":"2111","col2":"71.67"},{"col0":"黎坚","col1":"2945","col2":"50"},{"col0":"李超龙","col1":"2211","col2":"69.73"},{"col0":"李军","col1":"2159","col2":"68.94"},{"col0":"李清","col1":"2229","col2":"70.75"},{"col0":"李振","col1":"1967","col2":"68.85"},{"col0":"梁程","col1":"2163","col2":"66.46"},{"col0":"刘聪","col1":"2202","col2":"50"},{"col0":"刘定福","col1":"2052","col2":"71.52"},{"col0":"刘刚_南昌","col1":"2127","col2":"50"},{"col0":"刘江","col1":"1993","col2":"64.46"},{"col0":"刘军","col1":"1895","col2":"65.54"},{"col0":"刘礼萍","col1":"2324","col2":"50"},{"col0":"刘历君","col1":"2090","col2":"67.84"},{"col0":"刘凌飞","col1":"2755","col2":"50"},{"col0":"刘庆","col1":"2313","col2":"68.21"},{"col0":"刘上宾","col1":"2179","col2":"67.59"},{"col0":"刘小仁","col1":"2522","col2":"70.35"},{"col0":"刘园峰","col1":"2223","col2":"68.54"},{"col0":"龙文军","col1":"2334","col2":"69.22"},{"col0":"罗龙根","col1":"2415","col2":"50"},{"col0":"罗鑫","col1":"2232","col2":"74.17"},{"col0":"倪辉","col1":"2482","col2":"71.31"},{"col0":"宁茂辉","col1":"2141","col2":"73.28"},{"col0":"欧阳枫","col1":"2315","col2":"50"},{"col0":"欧阳天宝","col1":"2293","col2":"66.5"},{"col0":"彭斌","col1":"2207","col2":"69.21"},{"col0":"齐泽宏","col1":"2773","col2":"50"},{"col0":"钱军伟","col1":"2197","col2":"67.82"},{"col0":"沈祥军","col1":"2257","col2":"50"},{"col0":"谭育军","col1":"2892","col2":"50"},{"col0":"汤文丰","col1":"2771","col2":"74.94"},{"col0":"唐朝政","col1":"2550","col2":"70.12"},{"col0":"涂文辉","col1":"3030","col2":"69.29"},{"col0":"涂源平","col1":"2317","col2":"50"},{"col0":"王海涛","col1":"2231","col2":"69.76"},{"col0":"王伟","col1":"2107","col2":"73.89"},{"col0":"吴绍平","col1":"2126","col2":"70.51"},{"col0":"肖天斌","col1":"2232","col2":"74.56"},{"col0":"熊聪宇","col1":"2217","col2":"73.11"},{"col0":"熊俊","col1":"2278","col2":"68.68"},{"col0":"熊炜","col1":"2205","col2":"73.22"},{"col0":"徐春林","col1":"2275","col2":"66.03"},{"col0":"徐鲁斌","col1":"2484","col2":"50"},{"col0":"徐智琳","col1":"2279","col2":"69.44"},{"col0":"杨良","col1":"2228","col2":"66.5"},{"col0":"易金勇","col1":"2223","col2":"64.07"},{"col0":"尹天平","col1":"2135","col2":"70.74"},{"col0":"应飞","col1":"1873","col2":"67.68"},{"col0":"张永平","col1":"2222","col2":"69.35"},{"col0":"张占根","col1":"2051","col2":"65.48"},{"col0":"周琦","col1":"2794","col2":"50"},{"col0":"朱乐坤","col1":"2962","col2":"50"},{"col0":"朱小勇","col1":"2084","col2":"68.13"},{"col0":"邹金良","col1":"2239","col2":"70.88"}]}';
            data = eval("(" + data + ")");
            $("#Chart").data("getDatasource", data);

            bindChart("Chart", {
                IsAutoLimits: true,
                ChartType: "Combi1Y",
                YDataColIndex: "1",
                Y2DataColIndex: "2",
                HighLight: [{ colindex: 1, highvales: "2011年", color: "#ff00ff" }, { colindex: 2, highvales: "2013年", color: "#ffff00" }],
                FontSize: 18,
                Event: {
                    LegendSelected: legendClick
                },
                LegendNotSelected: "2",
                Theme: "dark"//修改主题，图例的颜色在主题中设置，主题文件在“javascript\JSControl\SampleChart\Scripts\echarts\theme”下
            });
        }

        function getLine() {
            var data = '{"colnames":["分钟","指标1"],"rows":[]}';
            data = eval("(" + data + ")");

            for (var j = 0; j < 24; j++) {
                for (var i = 0; i < 12; i++) {
                    data.rows.push({ "col0": j.toString() + ":" + (i * 5).toString(), "col1": Math.random() * 100 });
                }
            }

            $("#Line").data("getDatasource", data);

            bindChart("Line", {
                IsAutoLimits: true,
                ChartType: "Line",
                YDataColIndex: "1",
                //XLabelStep: 10,
                IsScroll: true,
                ScrollStart: 80,
                ScrollEnd: 100,
                XLabelStyle: "Rotate",
                PaddingBottom: 80,
                Theme: "dark",
                Color: ["#2ec7c9"],
                LegendPosition: "TOP"
            });
        }

        function bindChart(div, option) {
            var opts = $.extend(true, {
                DataSource: $("#" + div).data("getDatasource"),
                YFormatType: "1000",
                YDecimals: '2',
                //BorderColor: '#7D7DFF',
                ClickEvent: []
            }, option);

            //dss.samplechart(div, opts);
            $("#" + div).SampleChart(opts);
        }

        function legendClick(a, b, c, d, e, f) {
            var ee = "当前点击指标索引：" + a + "\n" + "当前点击指标名称：" + b + "\n" + "选中的指标索引：" + c + "\n" + "选中的指标名称：" + d + "\n" + "未选中的指标索引：" + e + "\n" + "未选中的指标名称：" + f;
            alert(ee);
        }
    </script>
</head>
<body>
    <div class="captionWithoutIcon">
        高亮显示多个柱子
    </div>
    <div id="Chart" style="background-color: black;"></div>
    <div class="captionWithoutIcon">
        X轴值较多时的处理
    </div>
    <div id="Line" style="background-color: black; width: 100%; height: 250px;"></div>
</body>
</html>