欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Echarts之動態柱狀圖

程序员文章站 2022-03-21 19:28:06
動態柱狀圖以及點擊事件效果圖：<!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">&l......

動態柱狀圖以及點擊事件效果圖：

Echarts之動態柱狀圖

<!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 id="Head1">
    <title>FixtureView</title>
    <link href="/Scripts/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/Scripts/themes/metro-gray/easyui.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/locale/easyui-lang-zh_TW.js" type="text/javascript"></script>
</head>
<body>
    <table>
        <tr style="float: left;">
            <td>選擇看板類型
            </td>
            <td>
                <select id="type" onchange="test()">
                    <option>選擇看板類型</option>
                    <option>治工具異常狀況統計圖</option>
                    <option>治工具呆滯狀況統計圖</option>
                    <option>治工具上線狀況統計圖</option>
                    <option>治工具保養狀況統計圖</option>
                    <option>新治工具驗收入庫狀況統計圖</option>
                </select>
            </td>
        </tr>
        <tr id="trList2" style="display: none; float: left;">
            <td>請選擇BU
            </td>
            <td>
                <select id="selBU" onchange="test1()">                  
                </select>
            </td>
        </tr>
    </table>
    <div id="show" style="height: 400px">
    </div> 
    <table class="easyui-datagrid" id="showData" data-options=" height:300,singleSelect: true,fitColumns:true,rownumbers:true,pagination:true, loadFilter: pagerFilter,pageSize: 20 ">
    </table>
    <script src="/Scripts/echarts.js" type="text/javascript"></script>
    <script type="text/javascript">
        //  禁用只讀文本框中的退格鍵，防止按退格鍵時回退到上一個頁面；
        document.documentElement.onkeydown = function (evt) {
            var b = !!evt, oEvent = evt || window.event;
            if (oEvent.keyCode == 8) {
                var node = b ? oEvent.target : oEvent.srcElement;
                var reg = /^(input|textarea)$/i, regType = /^(text|textarea)$/i;
                if (!reg.test(node.nodeName) || !regType.test(node.type) || node.readOnly || node.disabled) {
                    if (b) {
                        oEvent.stopPropagation();
                    }
                    else {
                        oEvent.cancelBubble = true;
                        oEvent.keyCode = 0;
                        oEvent.returnValue = false;
                    }
                }
            }
        } 
        var data = [];
        var strLabel = [];
        var strLabels = [];
        var strname = [];
        var strvalue = [];
        var strvalues = [];
        var series = [];
        var objList = {};
        var strType = "";
        var strBu = "";

        $(function () {
            test();
        });
        function initMenu() {
            if (strType) {
                if (strType == "治工具異常狀況統計圖") {
                    objList.Paramms1 = "DEFECTCOUNT";
                }
                else if (strType == "治工具呆滯狀況統計圖") {
                    objList.Paramms1 = "STAYCOUNT";
                }
                else if (strType == "新治工具驗收入庫狀況統計圖") {
                    objList.Paramms1 = "STOCKINCOUNT";
                }
                else if (strType == "治工具上線狀況統計圖") {
                    objList.Paramms1 = "ONLINECOUNT";
                } else if (strType == "治工具保養狀況統計圖") {
                    objList.Paramms1 = "MAINTAIN_NEW";
                }
                dataSource();
            }
        }
        //柱狀圖
        function test() {
            if ($("#type").find("option:selected").text() != "選擇看板類型") {
                strType = $("#type").find("option:selected").text();
                $('#show').html("");
                $('#trList2').hide();
                GetBU();
                $('#trList2').show();
                initMenu();
               //清空datagrid的數據
                $("#showData").datagrid({
                    columns: [[]]
                    //rownumbers: false,
                    //pagination: false
                }).datagrid('loadData', { total: 0, rows: [] });
            } else {
                $('#show').html("");
                $('#trList2').hide();
                $('#conditions').find("option[index='0']").attr("selected", true);
            }
        }
        //獲取BU(製造處)
        function GetBU() {
            objList.Paramms1 = "GET_BU";
            GetInfo("GetFixtureBUNewT", "", "selBU");
        }
        function test1() {
            if ($('#selBU').find("option:selected").text() != "選擇看板條件") {
                strBu = $("#selBU").find("option:selected").text(); 
                objList.Paramms2 = strBu;
                initMenu();
            } else {
                $('#show').html("");
            }
        }

        function clear() {
            strLabel = [];
            strLabels = [];
            strname = [];
            strvalue = [];
            strvalues = [];
            series = [];
        }
        //加載選項--加載數據源作為條件（val和text是一樣的）
        function GetInfo(controlName, strInputId, strOptionsId) {
            $.ajax({
                type: "POST",
                url: "/TRSTENCIL/" + controlName,
                async: false,
                datatype: "json", // dataType类型：String 预期服务器返回的数据类型。
                data: objList,
                success: function (msg) {
                    if (msg.IsSuccess) {
                        var json = eval("(" + msg.Message + ")");
                        var objmfrlist = eval(json.Condition);
                        $("#" + strOptionsId).empty();
                        if (strInputId == "" || strInputId == null) {
                            $("#" + strOptionsId).append("<option value=''></option>");
                        }
                        for (var i = 0; i < objmfrlist.length; i++) {
                            $("#" + strOptionsId).append("<option value='" + objmfrlist[i].ROW + "'>" + objmfrlist[i].ROW + "</option>");
                        }
                        $("#" + strOptionsId).find("option[index='0']").attr("selected", true);
                    }
                    else {
                        $.messager.alert('Error', msg.Message, 'error');
                    }
                }
            });
        }
        //加載選項--加載數據源作為條件（val和text是不一樣的）
        function GetInfos(controlName, strInputId, strOptionsId) {
            $.ajax({
                type: "POST",
                url: "/TRSTENCIL/" + controlName,
                async: false,
                datatype: "json", // dataType类型：String 预期服务器返回的数据类型。
                data: objList,
                success: function (msg) {
                    if (msg.IsSuccess) {
                        var json = eval("(" + msg.Message + ")");
                        var objmfrlist = eval(json.Data);

                        $("#" + strOptionsId).empty();
                        $("#" + strOptionsId).append("<option value=''></option>");
                        for (var i = 0; i < objmfrlist.length; i++) {
                            $("#" + strOptionsId).append("<option value='" + objmfrlist[i].DATA1 + "'>" + objmfrlist[i].DATA2 + "</option>");
                        }
                        $("#" + strOptionsId).find("option[index='0']").attr("selected", true);
                    }
                    else {
                        $("#" + strOptionsId).empty();
                        $("#" + strOptionsId).append("<option value=''> </option>");
                    }
                }
            });
        }
        //加載數據源-----------------------------------------------
        function dataSource() {
            $.post('/TRSTENCIL/GetPieNameCount', objList, function (msg) {
                //	var msg = {
                //		"Columns": [{
                //			"name": "BU",
                //			"value": "100"
                //		}, {
                //			"name": "EDIT_TIME",
                //			"value": "100"
                //		}, {
                //			"name": "TIME",
                //			"value": "100"
                //		}]
                //	};
                //
                msg = eval("(" + msg.Message + ")");

                var dataName = [];
                $.each(msg, function (i, e) {
                    dataName.push(i);
                });
                for (var j = 0; j < dataName.length; j++) {
                    strname = [];
                    strvalue = [];
                    if (j == 0) {
                        data = eval(msg.Data0);
                    }
                    if (j == 1) {
                        data = eval(msg.Data1);
                    }
                    if (j == 2) {
                        data = eval(msg.Data2);
                    }
                    if (j == 3) {
                        data = eval(msg.Data3);
                    }
                    $.each(data, function (ii, e) {
                        strname.push(data[ii].name);
                        strvalue.push(data[ii].value);
                    });
                    strLabel = strname;
                    strLabel = $.grep(strLabel, function (value, index) {
                        return value != 'SMT' && value != 'PTH' && value != '壓合' && value != 'SI' && value != 'PACKING';
                    });
                    strname.splice(0, 1);
                    strvalue.splice(0, 1);
                    strLabels.push(strLabel);
                    strvalues.push(strvalue);
                    strLabel = [];
                }
                for (var i = 0; i < strLabels.length; i++) {
                    series.push({
                        name: strLabels[i], type: 'bar', data: strvalues[i], label: {//柱状图顶部是否显示
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }
                    });
                    strLabel.push(strLabels[i].toString());
                }
                showCharts();
                clear();
            }), 'json'
        }
        //將數據show出來-----------------------------------------------
        function showCharts() {
            var myChart = null;
            var div = document.getElementById("show");
            div.removeAttribute("_echarts_instance_");
            myChart = echarts.init(div);

            var option = {
                title: {
                    text: $("#type").find("option:selected").text(),
                    //subtext: $("#type").find("option:selected").text(),
                    x: "center"
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: { //圖例組件
                    //orient: 'vertical',
                    left: 'left',
                    //top:'top',
                    data: strLabel
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                //                grid: {
                //                    x: 75,
                //                    y: 45,
                //                    x2: 5,
                //                    y2: 20
                //                },
                grid: {
                    right: '0',
                    left: '2%',
                    top: '15%',
                    bottom: '10%'
                },
                xAxis: { //直角座標系中的x軸
                    type: 'category',
                    name: '欄位',
                    data: strname
                    //data: ['SMT', 'PTH', '壓合', 'SI', 'Pack']
                },
                yAxis: { //直角座標系中的y軸
                    //			min: 0,
                    //			max: 400,
                    //          interval: 10,
                    minInterval: 5,//設置最小刻度，保證數據皆是整數
                    name: '值',
                    type: 'value'
                },
                series: series,
                color: ['blue', 'green', 'red', 'yellow', 'blueviolet']
                //label: {//柱状图顶部是否显示
                //    show: true,
                //    position: 'top',
                //    formatter: '{b}\n{c}'
                //}
            };
            myChart.setOption(option); //參數設置方法
            myChart.hideLoading();
            getChartData();
            function getChartData() {
                //獲得圖表的options對象
                options = myChart.getOption();
            }
            //餅圖點擊事件
            myChart.on('click', function (params) {
                objList.Paramms11 = "TEST";
                objList.Paramms3 = params.seriesName;//點擊模塊
                objList.Paramms4 = params.name;//製成段 
                $.post('/TRSTENCIL/FixtureGetPicClickDataNew', objList, function (msg) {
                    //return "<a href='Show.cshtml' target='_blank' /a>"
                                        <a href="Show.cshtml#mid100"></a>
                    json = eval("(" + msg.Message + ")");
                    var columnsAll = [];
                    var ColumnsList = eval(json.Columns);
                    var data = eval(json.Data);
                    for (var i = 0; i < ColumnsList.length; i++) {
                        var col = {};
                        col['title'] = ColumnsList[i].COLUMN;
                        col['field'] = ColumnsList[i].COLUMN;
                        col['editor'] = 'text';
                        col['align'] = 'center';
                        columnsAll.push(col);
                    }
                    $("#showData").datagrid({
                        columns: [columnsAll]
                    }).datagrid('loadData', data);
                }), 'json'
            });
        }
        //數據分頁------------------------------------------------------
        function pagerFilter(data) {
            if (!data) {
                return;
            }
            if (typeof data.length == 'number' && typeof data.splice == 'function') {
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage: function (pageNum, pageSize) {
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh', {
                        pageNumber: pageNum,
                        pageSize: pageSize
                    });
                    dg.datagrid('loadData', data);
                }
            });
            if (!data.originalRows) {
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }

    </script>
</body>
</html>

JSON數據：圖

{"Data0":[{"name":"待驗收","value":"待驗收"},{"name":"SMT","value":"0"},{"name":"PTH","value":"0"},{"name":"壓合","value":"9"},{"name":"SI","value":"39"},{"name":"PACKING","value":"0"}],"Data1":[{"name":"待驗收審核","value":"待驗收審核"},{"name":"SMT","value":"0"},{"name":"PTH","value":"0"},{"name":"壓合","value":"0"},{"name":"SI","value":"0"},{"name":"PACKING","value":"0"}],"Data2":[{"name":"待入庫","value":"待入庫"},{"name":"SMT","value":"3"},{"name":"PTH","value":"1"},{"name":"壓合","value":"0"},{"name":"SI","value":"2"},{"name":"PACKING","value":"0"}]}

注意：Paramms1這是我後台寫的實體類，我是把整個類作為一個參數 

public ActionResult aa(QueryCondition query){

          return Json(new { IsSuccess = false, Message = "data" });

}

 public class QueryCondition
    {
        //public string Paramms1 { get; set; } 
        private string paramms1;
        public string Paramms1
        {
            get { return this.paramms1 == null ? "" : this.paramms1; }
            set { this.paramms1 = value; }
        }
        private string paramms2;
        public string Paramms2
        {
            get { return this.paramms2 == null ? "" : this.paramms2; }
            set { this.paramms2 = value; }
        }
        private string paramms3;
        public string Paramms3
        {
            get { return this.paramms3 == null ? "" : this.paramms3; }
            set { this.paramms3 = value; }
        }
        private string paramms4;
        public string Paramms4
        {
            get { return this.paramms4 == null ? "" : this.paramms4; }
            set { this.paramms4 = value; }
        } 
    }

 

本文地址：https://blog.csdn.net/qq_41128526/article/details/85989529

相关标签： MVC JavaScript

上一篇： C#之简易猜数字游戏

下一篇： C++删除迭代器两种方法对比(list.erase(it++)和it=list.erase(it))

推荐阅读