SampleChart/ColumnWaterfall.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
<!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="Scripts/echarts/echarts.js"></script>
    <script src="Scripts/SampleChart.js"></script>
    <script>
        $(function () {
            getChart();
        });

        function getChart() {
            var data = '{"colnames":["费用类别","费用金额"],"rows":[{"col0":"总费用","col1":"1000"},{"col0":"房租","col1":"500"},{"col0":"水电费","col1":"50"},{"col0":"交通费","col1":"100"},{"col0":"伙食费","col1":"300"},{"col0":"日用品","col1":"50"}]}';
            data = eval("(" + data + ")");
            bindChart("Chart", {
                DataSource: data,
                IsAutoLimits: true,
                ChartType: "ColumnWaterfall",
                IsShowValue: true,
                PaddingTop: 40,
                Theme: "lightblue"//修改主题，图例的颜色在主题中设置，主题文件在“javascript\JSControl\SampleChart\Scripts\echarts\theme”下
                //Toolbox: {
                //    show: true
                //},
                //isSaveImg: true,//是否保存成图片
                //ImgPath: "~/Temp/ChartImg/",//指定将图标保存成图片的路径，未指定的话后台自动生成
                //ImgName: "aa.png",
                //callback: {
                //    complete: function (myChart, options) {
                //        alert("图片路径：" + options.ImgPath + "\n\n图片名称：" + options.ImgName);
                //    }
                //}
            });
        }

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

            $("#" + div).SampleChart(opts);
        }
    </script>
</head>
<body>
    <div class="captionWithoutIcon">
        瀑布图
    </div>
    <div id="Chart" style="height: 450px;"></div>
</body>
</html>