gogsadmin
/
OTS


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780
							<!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">
        $("#main").height($(window).height() - 100);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
        //数据
        var json;
        $(function () {
            var st = '{"TopName":"MgO","LeftName":"CaO","RightName":"AL₂O₃","ListPartSize":["20 ~ 30","134 ~ Max","50 ~ 134","15 ~ 20","40 ~ 50","30 ~ 40"],"ListPoint":[[[39,7],[42,12],[96,1],[45,33],[39,5],[49,83],[0,2],[100,1],[44,24],[100,2],[100,2],[40,5],[43,15],[37,5],[38,2],[100,2],[100,2],[37,6],[45,32],[100,2],[100,3],[39,5],[41,12],[100,2],[100,2],[40,8],[40,9],[43,19],[36,6],[39,11],[100,1],[39,6],[100,1],[44,23],[100,2],[37,7],[36,3],[38,10],[41,4],[100,2],[42,18],[38,4],[37,7],[40,5],[100,3],[38,4],[40,5],[39,5],[43,21],[1,2],[1,2],[100,1],[1,2]],[[0,1],[97,1],[41,5],[41,3],[100,2]],[[100,2],[96,1],[87,17],[1,2],[1,1],[1,2],[40,3],[100,2],[100,2],[40,5],[100,1],[100,1],[100,2],[39,3],[100,1],[100,1],[41,3],[100,2],[100,1],[37,4],[100,1],[100,1],[100,2],[100,2],[100,1]],[[0,3],[100,2],[40,11],[36,3],[42,18],[98,1],[40,12],[46,28],[100,2],[38,4],[100,3],[40,12],[41,15],[42,18],[42,21],[37,6],[42,22],[41,14],[42,20],[94,5]],[[0,2],[100,2],[0,1],[100,2],[100,2],[39,3],[100,2],[100,2],[100,2],[39,3],[38,3],[0,2]],[[100,1],[39,3],[100,2],[100,1],[100,1],[40,4],[44,25],[43,25],[39,4],[100,1],[100,1],[100,1],[100,2],[39,13],[38,3],[37,4],[100,3],[100,2],[37,4],[100,3],[38,4],[41,13],[100,2]]]}';
            //字符串数据转换
            json = JSON.parse(st);
            //图形加载
            show('triangle');
        });
        //后台调用，数据加载
        function showchart(str, ty) {
           
            //字符串数据转换
            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') {
               
                settri();
                $(".dowebok").hide();
            }
            //以下为导出图表为图片，延时执行的作用是确保图表数据渲染已经完成     
            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 option = {
                title: {
                    text: json.Title,
                    //subtext: '副标题',
                    x: 'center',
                    textStyle: {
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: json.ListName,
                },
                series: [
                    {
                        name: json.YName,
                        type: 'pie',
                        radius: '85%',
                        selectedMode: 'single',
                        selectedOffset: 10,
                        center: ['40%', '50%'],
                        data: json.ListData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
        //环饼图
        function setradius() {
            var option = {
                title: {
                    text: json.Title,
                    //subtext: '副标题',
                    x: 'center',
                    textStyle: {
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: json.ListName,
                },
                series: [
                    {
                        name: json.YName,
                        type: 'pie',
                        radius: '85%',
                        selectedMode: 'single',
                        selectedOffset: 10,
                        radius: [70, 110],
                        center: ['40%', '50%'],
                        data: json.ListData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option);
        }
        var colorListr = [
            '#0f4471',
            '#00adb5',
            '#ff5722',
            '#5628b4',
            '#20BF55',
            '#f23557',
            '#118df0',
            '#11cbd7',
            '#d3327b',
            '#ae318a',
            '#993090',
            '#6f3071'
        ];
        //柱形图
        function setbar() {
           
            var ser = [];
            for (var i = 0; i < json.ListData.length; i++) {
                var data = [];
                for (var j = 0; j < json.ListData.length; j++) {
                    if (i == j) {
                        data.push(json.ListData[i]);
                    }
                    else {
                        data.push(0);
                    }
                }
                var item = {
                    name: json.ListName[i],
                    type: 'bar',
                    barGap: '-100%',
                    itemStyle: {
                        normal: {
                            color: colorListr[i]
                        }
                    },
                    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: {
                    top: 45,
                    right: '5%',
                    data: json.ListName
                },
                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 option = {
                title: {
                    text: json.Title,
                    left: 'center',
                    textStyle: {
                        fontSize: 16
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    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: 40
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#707070'
                        }
                    },
                    data: json.ListName,
                }],
                yAxis: {
                    type: 'value',
                    name: json.YName,
                    nameTextStyle: {
                        fontSize: 10,
                        color: '#4D4D4D'
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 12,
                            color: '#4D4D4D'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#707070'
                        }
                    }
                },
                series: [{
                    name: '颗粒',
                    type: 'line',
                    barWidth: '60%',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [
                                    '#7711AF', '#CF77FF', '#AE004F', '#F35872', '#FA7729',
                                    '#FFC526', '#F8E71C', '#34ADAE', '#3DDFD2', '#A0FFFF'
                                ];
                                var colorListr = [
                                    '#0f4471',
                                    '#00adb5',
                                    '#ff5722',
                                    '#5628b4',
                                    '#20BF55',
                                    '#f23557',
                                    '#118df0',
                                    '#11cbd7',
                                    '#d3327b',
                                    '#ae318a',
                                    '#993090',
                                    '#6f3071'
                                ];
                                return colorListr[params.dataIndex]
                            },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}'
                            },
                            shadowBlur: 20,
                            shadowColor: 'rgba(40, 40, 40, 0.5)',
                        }
                    },
                    data: json.ListData
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        //堆叠图
        function setstack() {
            var _max = 0;
            var ser = [];
            for (var i = 0; i < json.ListData.length; i++) {

                _max = _max + parseInt(json.ListData[i].value);

            }
            var fomatter_fn = function (v) {
                return (v.value / _max * 100).toFixed(0)
            }
            var _label = {
                normal: {
                    show: false,
                    position: 'inside',

                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    }
                }
            };


            for (var i = 0; i < json.ListData.length; i++) {
                var item = {
                    type: 'bar',
                    name: json.ListData[i].name,
                    stack: '2',
                    label: _label,
                    legendHoverLink: false,
                    barWidth: 40,
                    data: [json.ListData[i].value]
                }


                ser.push(item);
            }


            var option = {
                title: {
                    text: json.Title,
                    //subtext: '副标题',
                    x: 'center',
                    textStyle: {
                        fontSize: 16
                    }
                },
                tooltip: {
                    show: true,
                    backgroundColor: '#fff',
                    borderColor: '#ddd',
                    borderWidth: 1,
                    textStyle: {
                        color: '#3c3c3c',
                        fontSize: 16
                    },
                    formatter: function (p) {
                        console.log(p);
                        var _arr = p.seriesName.split('/'),
                            idx = p.seriesIndex;//1，2，3
                        return '名称：' + p.seriesName + '<br>' + '数量：' + p.value + '<br>' + '占比：' + (p.value / _max * 100).toFixed(0) + '%';
                    },
                    extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
                },

                legend: {

                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: json.ListName,
                },
                xAxis: {
                    splitNumber: 5,
                    interval: _max / 5,
                    max: _max,
                    axisLabel: {
                        show: false

                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }

                },
                yAxis: [{
                    data: ['颗粒'],
                    axisLabel: {
                        fontSize: 16,
                        color: '#000'

                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                }, {
                    show: false,
                    data: ['颗粒'],
                    axisLine: {
                        show: false
                    }
                }],
                series: ser
            };

            myChart.setOption(option);
          
        }
        function settri() {

            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]],
                markPoint: {
                    label: {
                        normal:
                        {
                            show: true,
                            formatter: json.LeftName
                        }
                    },
                    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.TopName;
            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.RightName;
            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,
                        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,
                        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,
                        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',
                    data: json.ListPoint[i]

                };
                list.push(d1);
            }


            option = {
                title: {
                    text: '三元相图',
                },
                grid: {
                    left: '1%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
            

                legend: {
                    data: json.ListPartSize,
                    left: 'right'
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    formatter: function (params) {
                        
                            return params.seriesName + ' :<br/>'
                                + params.value[0] + ','
                                + params.value[1];
                        
                       
                    }
                },
                xAxis: [
                    {
                        show: false,
                    }
                ],
                yAxis: [
                    {
                        show: false,
                        min: 'dataMin' // 最小值
                    }
                ],
                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: 12,
                        height: '100%',
                        handleSize: 8,
                        showDataShadow: true,
                        left: '95%',
                        start: 0,
                        end: 100
                    }
                ],
                series: list
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        //窗体改变大小，图形重新加载
        window.onresize = function () {
            $("#main").height($(window).height() - 100);
            myChart.resize();
           
        }
        //所有单选绑定单击事件
        $(function () {
            $(':input').labelauty().on('click', function () {
                var typ = $(':radio:checked').val();
              
                show(typ);
            });
        });
    </script>
</body>
</html>