xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
							<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            body {
                background: #333;
            }
            .chart {
                height: 400px;
            }
        </style>
        <div class="chart" id="main1"></div>
        <div class="chart" id="main2"></div>


        <script>

            require([
                'echarts'
                // 'zrender/tool/color',
                // 'echarts/chart/line',
                // 'echarts/chart/parallel',
                // 'echarts/component/title',
                // 'echarts/component/grid',
                // 'echarts/component/legend',
                // 'echarts/component/tooltip',
                // 'echarts/component/toolbox',
                // 'echarts/component/visualMap'
            ], function (echarts) {
                var chart = echarts.init(document.getElementById('main1'));

                var DECIMALS = [1];
                for (var i = 1; i < 15; i++) {
                    DECIMALS.push(DECIMALS[DECIMALS.length - 1] * 10);
                }

                window.yAxisLabelFormatter = (function () {
                    var labelMap = {};

                    return function (val, index) {
                        !index && (labelMap = {});

                        if (val < 0) {
                            return '';
                        }

                        var label = val >= DECIMALS[11]
                            ? fix((val / DECIMALS[12]).toFixed(val >= DECIMALS[13] ? 0 : 1)) + 'T'
                            : val >= DECIMALS[8]
                            ? fix((val / DECIMALS[9]).toFixed(val >= DECIMALS[10] ? 0 : 1)) + 'B'
                            : val >= DECIMALS[5]
                            ? fix((val / DECIMALS[6]).toFixed(val >= DECIMALS[7] ? 0 : 1)) + 'M'
                            : val >= DECIMALS[3]
                            ? fix((val / DECIMALS[3]).toFixed(val >= DECIMALS[4] ? 0 : 1)) + 'K'
                            : val;

                        return (
                            labelMap[label]
                            ? ''
                            : (labelMap[label] = true, label)
                        ) + '\n';

                        function fix(valStr) {
                            return valStr.replace(/[.]0+$/, '');
                        }
                    };
                })();

                window.smallYAxisLabel = {
                    show: true,
                    margin: 2,
                    formatter: window.yAxisLabelFormatter,
                    inside: true,
                    textStyle: {
                        // color: '#f7e1a9',
                        color: 'rgba(255,255,255,0.3)',
                        fontSize: 9,
                        fontFamily: 'STHeiti'
                    }
                };


                option = {
                    backgroundColor: '#eee',
                    title: {
                        text: '上两个 label 显示不出来怎么办'
                    },
                    grid: {
                        backgroundColor: '#333',
                        show: true,
                        borderWidth: 0,
                        height: 156,
                        top: '15%',
                        left: 100,
                        right: 100
                    },
                    xAxis: {
                        type: 'time'
                    },

                    tooltip: {
                        trigger: 'axis'
                    },

                    yAxis: {
                        type: 'value',
                        scale: true,
                        boundaryGap: ['3%', '3%'],
                        splitNumber: 3,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#9f520e'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: window.smallYAxisLabel
                    },
                    easing: 'linear',
                    series: [{
                        name: '视频制作总数',
                        type: 'line',
                        lineStyle: {
                            normal: {
                                color: '#f9bb0b'
                            }
                        },
                        showSymbol: false,
                        data: [{"name":"980061360000","value":[980061360000,1519]},{"name":"980061420000","value":[980061420000,1526]},{"name":"980061480000","value":[980061480000,1530]},{"name":"980061540000","value":[980061540000,1531]},{"name":"980061600000","value":[980061600000,1531]},{"name":"980061660000","value":[980061660000,1532]},{"name":"980061720000","value":[980061720000,1532]},{"name":"980061780000","value":[980061780000,1533]},{"name":"980061840000","value":[980061840000,1533]},{"name":"980061900000","value":[980061900000,1537]},{"name":"980061960000","value":[980061960000,1537]},{"name":"980062020000","value":[980062020000,1539]},{"name":"980062080000","value":[980062080000,1552]},{"name":"980062140000","value":[980062140000,1552]},{"name":"980062200000","value":[980062200000,1559]},{"name":"980062260000","value":[980062260000,1561]},{"name":"980062320000","value":[980062320000,1562]},{"name":"980062380000","value":[980062380000,1562]},{"name":"980062440000","value":[980062440000,1562]},{"name":"980062500000","value":[980062500000,1563]},{"name":"980062560000","value":[980062560000,1563]},{"name":"980062620000","value":[980062620000,1565]},{"name":"980062680000","value":[980062680000,1569]},{"name":"980062740000","value":[980062740000,1575]},{"name":"980062800000","value":[980062800000,1579]},{"name":"980062860000","value":[980062860000,1579]},{"name":"980062920000","value":[980062920000,1581]},{"name":"980062980000","value":[980062980000,1582]},{"name":"980063040000","value":[980063040000,1585]},{"name":"980063100000","value":[980063100000,1589]},{"name":"980063160000","value":[980063160000,1590]},{"name":"980063220000","value":[980063220000,1590]},{"name":"980063280000","value":[980063280000,1591]},{"name":"980063340000","value":[980063340000,1591]},{"name":"980063400000","value":[980063400000,1592]},{"name":"980063460000","value":[980063460000,1592]},{"name":"980063520000","value":[980063520000,1593]},{"name":"980063580000","value":[980063580000,1605]},{"name":"980063640000","value":[980063640000,1609]},{"name":"980063700000","value":[980063700000,1612]},{"name":"980063760000","value":[980063760000,1614]},{"name":"980063820000","value":[980063820000,1614]},{"name":"980063880000","value":[980063880000,1617]},{"name":"980063940000","value":[980063940000,1617]},{"name":"980064000000","value":[980064000000,1619]},{"name":"980064060000","value":[980064060000,1622]},{"name":"980064120000","value":[980064120000,1622]},{"name":"980064180000","value":[980064180000,1624]},{"name":"980064240000","value":[980064240000,1627]},{"name":"980064300000","value":[980064300000,1640]},{"name":"980064360000","value":[980064360000,1642]},{"name":"980064420000","value":[980064420000,1642]},{"name":"980064480000","value":[980064480000,1643]},{"name":"980064540000","value":[980064540000,1644]},{"name":"980064600000","value":[980064600000,1644]},{"name":"980064660000","value":[980064660000,1647]},{"name":"980064720000","value":[980064720000,1647]},{"name":"980064780000","value":[980064780000,1648]},{"name":"980064840000","value":[980064840000,1648]},{"name":"980064900000","value":[980064900000,1648]}]
                    }]
                };

                chart.setOption(option);
            });

        </script>


        <script>

            require([
                'echarts'
            ], function (echarts) {
                var chart = echarts.init(document.getElementById('main2'));
                var rotate = 30;

                option = {
                    backgroundColor: '#eee',
                    title: {
                        text: 'grid.containLabel'
                    },
                    grid: {
                        containLabel: true,
                        left: 0
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        data: ['a', 'b', 'c', 'd', 'e']
                    },
                    yAxis: {
                        axisLabel: {
                            rotate: rotate
                        }
                    },
                    series: [{
                        type: 'line',
                        data: [
                            1111111111111,
                            2222222222222,
                            3333333333333,
                            4444444444444,
                            5555555555555,
                            6666666666666
                        ]
                    }]
                };

                chart.setOption(option);

                setInterval(function () {
                    rotate = (rotate + 1) % 360;

                    chart.setOption({
                        yAxis: {
                            axisLabel: {
                                rotate: rotate
                            }
                        }
                    });
                }, 100);
            });

        </script>


    </body>
</html>