gogsadmin
/
OTS


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ECharts</title>
    <link rel="stylesheet" href="css/jquery-labelauty.css">
    <style>
        ul {
            list-style-type: none;
        }

        li {
            display: inline-block;
        }

        li {
            margin: 10px 0;
        }

        input.labelauty + label {
            font: 10px "Microsoft Yahei";
        }
    </style>
    <script src="JS/echarts.js"></script>
    <script src="JS/jquery-3.4.1.js"></script>
    <script src="JS/jquery-labelauty.js"></script>
</head>
<body>
    <ul class="dowebok">
        <li><input type="radio" name="radio" value="pie" data-labelauty="饼图"></li>
        <li><input type="radio" name="radio" value="radius" data-labelauty="环图"></li>
        <li><input type="radio" name="radio" value="bar" data-labelauty="柱形图"></li>
        <li><input type="radio" name="radio" value="line" data-labelauty="折线图"></li>
        <li><input type="radio" name="radio" value="stack" data-labelauty="堆叠图"></li>

    </ul>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:100%;height:350px;"></div>
    <script type="text/javascript">
        
        // 基于准备好的dom，初始化echarts实例
        var myChart;
        
        //数据
        var json;
        //类型
        var re=0;
        //后台调用，数据加载
        function showchart(str, ty) {
            $("#main").height($(window).height() - 100);
            //if(ty == 'triangle') {
            //    $("#main").width($(window).height());
            //}
            myChart = echarts.init(document.getElementById('main'));
            //字符串数据转换
            json = JSON.parse(str);
            //图形加载
            show(ty);
            //单选框初始状态
            $(':radio[value="' + ty+'"]').eq(0).attr("checked", true);
        }
        //图形加载
        function show(type) {
            //图形清空
            myChart.clear();
            //判断图形类型
            if (type == 'pie') {
                setpie();
            }
            if (type == 'radius') {
                setradius();
            }
            if (type == 'bar') {
                setbar();
            }
            if (type == 'line') {
                setline();
            }
            if (type == 'stack') {
                setstack();
            }
           
            if (type == 'triangle') {
                re = 1;
                $(".dowebok").hide();
                settri();
               
            }
            //以下为导出图表为图片，延时执行的作用是确保图表数据渲染已经完成     
            setTimeout(function () {
                var img = new Image();
                img.src = myChart.getDataURL({
                    type: "png", pixelRatio: 2, //放大2倍             
                    backgroundColor: '#fff'
                });
                img.onload = function () {
                    var canvas = document.createElement("canvas");
                    canvas.width = img.width;
                    canvas.height = img.height;
                    var ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0);
                    var dataURL = canvas.toDataURL('image/png');
                    jsObj.MessageText = dataURL;
                };
            }, 1000)
        }
        //饼图
        function setpie() {
            var title = [];
            var ser = [];
            var d = parseInt(100 / json.ListData.length);
            var r = parseInt(d / 2);
            var radius = parseInt(80 / json.ListData.length);
            for (var i = 0; i < json.ListData.length; i++) {
                var cen = i * d + r;
                var obj = {
                    name: json.YName,
                    type: 'pie',
                    radius: radius+'%',
                    selectedMode: 'single',
                    selectedOffset: 10,
                    center: [cen+'%', '50%'],
                    data: json.ListData[i],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 20,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(40, 40, 40, 0.5)',
                        },
                        normal: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0,0,0,0.8)',
                            shadowOffsetY: '10'

                        }
                    }
                };
                ser.push(obj);
                var tit = {
                    text: json.SoursName[i],
                    top: '10%',
                    left: cen + '%'
                };
                title.push(tit);
            }
           
           var option = {
                title: {
                    text: json.Title,
                    //subtext: '副标题',
                    x: 'center',
                    textStyle: {
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
               },
               title: title,
               legend: {
                   type: 'scroll',
                  
                   left: 50,
                   
                    bottom: 20,
                    data: json.ListName,
                },
               series: ser
            };
            myChart.setOption(option);
        }
        //环饼图
        function setradius() {
            var title = [];
            var ser = [];
            var d = parseInt(100 / json.ListData.length);
            var r = parseInt(d / 2);
            var radius = parseInt(80 / json.ListData.length);
            for (var i = 0; i < json.ListData.length; i++) {
                var cen = i * d + r;
                var obj = {
                    name: json.YName,
                    type: 'pie',
                    selectedMode: 'single',
                    selectedOffset: 10,
                    radius: ['15%', radius + '%'],
                    center: [cen + '%', '50%'],
                    data: json.ListData[i],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                };
                ser.push(obj);
                var tit = {
                    text: json.SoursName[i],
                    top: '10%',
                    left: cen + '%'
                };
                title.push(tit);
            }
            var option = {
                title: {
                    text: json.Title,
                    //subtext: '副标题',
                    x: 'center',
                    textStyle: {
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                title: title,
                legend: {
                    type: 'scroll',
                    left: 50,
                    bottom: 20,
                    data: json.ListName,
                },
                series: ser
            };

            myChart.setOption(option);
        }
        //柱形图
        function setbar() {
           
            var ser = [];
            for (var k = 0; k < json.SoursName.length; k++) {
                var data = [];
                for (var j = 0; j < json.ListName.length; j++) {

                    var val = 0;
                    for (var i = 0; i < json.ListData[k].length; i++) {
                        if (json.ListName[j] == json.ListData[k][i].name) {
                            val = json.ListData[k][i].value;
                            break;
                        }
                    }
                    data.push(val);

                }
                var item = {
                    name: json.SoursName[k],
                    type: 'bar',
                   
                    itemStyle: {
                        normal: {

                            shadowBlur: 20,
                            shadowColor: 'rgba(40, 40, 40, 0.5)',
                        }
                    },
                    data: data
                };
                ser.push(item);
            }
            var rotate = 0;
            for (var i = 0; i < json.ListName.length; i++) {
                if (json.ListName[i].length > 5) {
                    rotate = 40;
                    break;
                }
            }
            var option = {
                title: {
                    text: json.Title,
                    top: 5,
                    left: 'center',
                    textStyle: {
                        fontSize: 16
                    }
                },
                legend: {
                    type: 'scroll',
                    top: 45,
                    right: '5%',
                    data: json.SoursName
                },
                tooltip: {
                   
                },
                grid: {
                    top: 95,
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false,
                        color: '#707070'
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 10,
                            color: '#4D4D4D'
                        },
                        interval: 0,

                        rotate: rotate
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#707070'
                        }
                    },
                    data: json.ListName,
                }],
                yAxis: {
                    type: 'value',
                    name: json.YName,
                    nameTextStyle: {
                        fontSize: 10,
                        color: '#4D4D4D'
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 10,
                            color: '#4D4D4D'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#707070'
                        }
                    }
                },
                series: ser
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        //折线图
        function setline() {
           
            var ser = [];
            for (var k = 0; k < json.SoursName.length; k++) {
                var data = [];
                for (var j = 0; j < json.ListName.length; j++) {

                    var val = 0;
                    for (var i = 0; i < json.ListData[k].length; i++) {
                        if (json.ListName[j] == json.ListData[k][i].name) {
                            val = json.ListData[k][i].value;
                            break;
                        }
                    }
                    data.push(val);

                }
                var item = {
                    name: json.SoursName[k],
                    type: 'line',

                    itemStyle: {
                        normal: {

                            shadowBlur: 20,
                            shadowColor: 'rgba(40, 40, 40, 0.5)',
                        }
                    },
                    data: data
                };
                ser.push(item);
            }
            var rotate = 0;
            for (var i = 0; i < json.ListName.length; i++) {
                if (json.ListName[i].length > 5) {
                    rotate = 40;
                    break;
                }
            }
            var option = {
                title: {
                    text: json.Title,
                    top: 5,
                    left: 'center',
                    textStyle: {
                        fontSize: 16
                    }
                },
                legend: {
                    type: 'scroll',
                    top: 45,
                    right: '5%',
                    data: json.SoursName
                },
                tooltip: {

                },
                grid: {
                    top: 95,
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false,
                        color: '#707070'
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 10,
                            color: '#4D4D4D'
                        },
                        interval: 0,

                        rotate: rotate
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#707070'
                        }
                    },
                    data: json.ListName,
                }],
                yAxis: {
                    type: 'value',
                    name: json.YName,
                    nameTextStyle: {
                        fontSize: 10,
                        color: '#4D4D4D'
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 10,
                            color: '#4D4D4D'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#707070'
                        }
                    }
                },
                series: ser
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        //堆叠图
        function setstack() {
            var ser = [];
            var total=[];
            for (var k = 0; k < json.SoursName.length; k++) {
                var t=0;
                for (var i = 0; i < json.ListData[k].length; i++) {
                    t = t + parseFloat(json.ListData[k][i].value);
                }
                
                total.push(t);
            }
          
            for (var j = 0; j < json.ListName.length; j++) {
                var data = [];
                for (var k = 0; k < json.SoursName.length; k++) {
                    var val = 0;
                    for (var i = 0; i < json.ListData[k].length; i++) {
                        if (json.ListName[j] == json.ListData[k][i].name) {
                            var v = parseFloat(json.ListData[k][i].value).toFixed(2);
                            val = (parseFloat(v / total[k] * 100)).toFixed(2);
                            break;
                        }
                    }
                    data.push(val);
                }
                var item = {
                    name: json.ListName[j],
                    type: 'bar',
                    stack: '颗粒',
                    data: data
                };
                ser.push(item);
            }
           
       
           var option = {
                tooltip: {
                    show: true,
                    backgroundColor: '#fff',
                    borderColor: '#ddd',
                    borderWidth: 1,
                    textStyle: {
                        color: '#3c3c3c',
                        fontSize: 16
                    },
                    formatter: function (p) {
                        console.log(p);
                       
                        return '名称：' + p.seriesName + '<br>' + '占比：' + p.value  + '%';
                    },
                    extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
                },
               legend: {
                   type: 'scroll',
                    data: json.ListName
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'value',
                        max: 100
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        splitArea: { show: true },
                        data: json.SoursName
                    }
                ],
               series: ser
            };

            myChart.setOption(option);
          
        }
        //三元相图
        function getline(ind, json) {

            var _lineStyle = { symbol: 'emptyCircle', symbolSize: 4, lineStyle: { normal: { width: 1, type: 'dashed' } }, itemStyle: { normal: { borderWidth: 1 } } };

            var list = [];

            var item = {
                name: '三角边',
                type: 'line',
                itemStyle: { normal: { color: '#B5C334', barBorderRadius: 5 } },
                data: [[0, 0], [50, 50 * 1.732]],
                xAxisIndex: ind,
                yAxisIndex: ind,
                markPoint: {
                    label: {
                        normal:
                        {
                            show: true,
                            formatter: json.TopName
                        }
                    },
                    data: [{
                        coord: [50, 50 * 1.732]
                    }]
                }
            };
            var newObj1 = JSON.parse(JSON.stringify(item));//左边
            list.push(newObj1);

            var newObj2 = JSON.parse(JSON.stringify(item));// 右边
            newObj2.data = [[50, 50 * 1.732], [100, 0]];
            newObj2.markPoint.label.normal.formatter = json.RightName;
            newObj2.markPoint.data = [{ coord: [100, 0] }];
            list.push(newObj2);

            var newObj3 = JSON.parse(JSON.stringify(item));//底边
            newObj3.data = [[0, 0], [100, 0]];
            newObj3.markPoint.label.normal.formatter = json.LeftName;
            newObj3.markPoint.data = [{ coord: [0, 0] }];
            list.push(newObj3);

            //左‘\’线
            for (var i = 1; i < 10; i++) {
                for (var j = 0; j < 10; j++) {
                    var x1 = 5 * i + 5 * j;
                    var x2 = x1 + 5;
                    var y1 = 5 * i * 1.732 - 5 * j * 1.732;
                    var y2 = y1 - 5 * 1.732;
                    if (y2 < -1) {
                        break;
                    }
                    var line = {
                        name: '虚线',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#B5C334',
                                barBorderRadius: 5,
                            }
                        }, symbol: _lineStyle.symbol,
                        symbolSize: _lineStyle.symbolSize,
                        lineStyle: _lineStyle.lineStyle,
                        itemStyle: _lineStyle.itemStyle,
                        xAxisIndex: ind,
                        yAxisIndex: ind,
                        data: [[x1, y1], [x2, y2]]

                    };
                    list.push(line);
                }
            }
            //右‘/’线
            for (var i = 9; i > 0; i--) {
                for (var j = 0; j < 10; j++) {
                    var x1 = 100 - (5 * (10 - i) + 5 * j);
                    var x2 = x1 - 5;
                    var y1 = 5 * (10 - i) * 1.732 - 5 * j * 1.732;
                    var y2 = y1 - 5 * 1.732;
                    if (y2 < -1) {
                        break;
                    }
                    var line = {
                        name: '虚线',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#B5C334',
                                barBorderRadius: 5,
                            }
                        }, symbol: _lineStyle.symbol,
                        symbolSize: _lineStyle.symbolSize,
                        lineStyle: _lineStyle.lineStyle,
                        itemStyle: _lineStyle.itemStyle,
                        xAxisIndex: ind,
                        yAxisIndex: ind,
                        data: [[x1, y1], [x2, y2]]

                    };
                    list.push(line);
                }
            }
            //底‘_’线
            for (var i = 1; i < 10; i++) {
                for (var j = 0; j < 10; j++) {
                    var x1 = 5 * i + 5 * j;
                    var x2 = x1 + 10;
                    var y1 = 5 * i * 1.732 - 5 * j * 1.732;
                    var y2 = y1;
                    if (y2 == 0) {
                        break;
                    }
                    var line = {
                        name: '虚线',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#B5C334',
                                barBorderRadius: 5,
                            }
                        }, symbol: _lineStyle.symbol,
                        symbolSize: _lineStyle.symbolSize,
                        lineStyle: _lineStyle.lineStyle,
                        itemStyle: _lineStyle.itemStyle,
                        xAxisIndex: ind,
                        yAxisIndex: ind,
                        data: [[x1, y1], [x2, y2]]

                    };
                    list.push(line);
                }

            }


            for (var i = 0; i < json.ListPartSize.length; i++) {

                var d1 = {
                    name: json.ListPartSize[i],
                    type: 'scatter',
                    xAxisIndex: ind,
                    yAxisIndex: ind,
                    data: json.ListPoint[i]

                };
                list.push(d1);
            }

            return list;
        }
        function settri() {

            var ser = [];
            for (var i = 0; i < json.length; i++) {
                var obj = getline(i, json[i]);
                for (var j = 0; j < obj.length; j++) {
                    ser.push(obj[j]);
                }
            }


            var title = [];
            var cen = parseInt(95 / json.length);
            for (var i = 0; i < json.length; i++) {
                var ti = {
                    text: json[i].Samplename,
                    left: (i * cen + 18) + '%',
                    top: 40,
                    textAlign: 'center'
                };
                title.push(ti);
            }
            var grid = [];
            var w = parseInt(($("#main").width() - 20) / json.length);
           
            for (var i = 0; i < json.length; i++) {
                var width = cen + '%';
                var ti = {
                    show: false,
                    left: (i * cen) + '%',
                    top: 70,
                   bottom:10,
                    containLabel: true,
                    width: width
                };
                grid.push(ti);
            }
            var xAxis = [];
            var yAxis = [];
            for (var i = 0; i < json.length; i++) {
                var ti = {
                    gridIndex: i,
                    show: false
                };
                var ty = {
                    gridIndex: i,
                    show: false,
                    min: 'dataMin' // 最小值
                };
                xAxis.push(ti);
                yAxis.push(ty);
            }
            var dataZoom = [{
                type: 'slider',
                show: false,
                start: 0,
                end: 100,
                handleSize: 8
            },
            {
                type: 'inside',
                start: 0,
                end: 100
            },
            {
                type: 'inside',
                show: true,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 1,
                height: '70%',
                handleSize: 8,
                showDataShadow: true,
                left: '93%',
                start: 0,
                end: 100
            }];
            for (var i = 0; i < json.length; i++) {
                var ti = {
                    type: 'inside',
                    show: true,
                    yAxisIndex: i,
                    filterMode: 'empty',
                    width: 1,
                    height: '70%',
                    handleSize: 8,
                    showDataShadow: true,
                    left: '93%',
                    start: 0,
                    end: 100
                };
                dataZoom.push(ti);

            }
            option = {
                title: title,
                grid: grid,
                legend: {
                    data: json[0].ListPartSize,
                    left: 'right',
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    formatter: function (params) {
                            return params.seriesName + ' :<br/>'
                                + params.value[0] + ','
                                + params.value[1];
                    }
                },
                xAxis: xAxis,
                yAxis: yAxis,
                dataZoom: dataZoom,
                series: ser
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        //窗体改变大小，图形重新加载
        window.onresize = function () {
            $("#main").height($(window).height() - 100);
            //if (re == 1) {
            //    $("#main").width($(window).height());
            //}
            myChart.resize();
           
        }
        //所有单选绑定单击事件
        $(function () {
            $(':input').labelauty().on('click', function () {
                var typ = $(':radio:checked').val();
              
                show(typ);
            });
        });
    </script>
</body>
</html>