xmnk
/
wkshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
							<!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>
		<script src="ut/lib/canteen.js"></script>
        <script src="lib/testHelper.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                height: 60px;
                background: #146402;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
            }
            .chart {
                height: 500px;
            }
        </style>


        <div class="chart" id="main"></div>

		<textarea id="info" style="height: 600px; width: 1000px"></textarea>


        <script>

            var echarts;
            var chart;
            var myChart;
            var groupCategories = [];
            var groupColors = [];

            require([
                'echarts'
                // 'echarts/chart/line',
                // 'echarts/chart/bar',
                // 'echarts/chart/pie',
                // 'echarts/chart/scatter',
                // 'echarts/chart/map',
                // 'echarts/chart/parallel',
                // 'echarts/chart/radar',
                // 'echarts/component/grid',
                // 'echarts/component/polar',
                // 'echarts/component/geo',
                // 'echarts/component/singleAxis',
                // 'echarts/component/legend',
                // 'echarts/component/tooltip',
                // 'echarts/component/toolbox',
                // 'echarts/component/visualMap',
                // 'echarts/component/dataZoom'
            ], function (ec) {
                echarts = ec;

				var y1Max = 100;
				var y2Max = 100;
				var myxAxisData = ['05-11','05-12','05-13','05-14','05-15','05-16','05-17'];
				var myData1 = [28,25,27,26,33,33,33];
				var myData2 = [82,71,79,84,99,89,89];

				option = {
					title: {
						text: '最近一周趋势',
						textStyle: {
							fontWeight: 'bold',
							fontSize: 12
						},
						padding: [15, 0, 0, 0]
					},
					legend: {
						data: ['数量', '比例'],
						right: 0,
						padding: [15, 0, 0, 0]
					},
					xAxis: {
						data: myxAxisData,
						axisLabel: {
							textStyle: {
								color: '#000'
							}
						},
						axisTick: {
							show: true
						},
						axisLine: {
							show: true
						},
						z: 10
					},
					yAxis: [{
						type: 'value',
						name: '数量',
						min: 0,
						max: y1Max,
						position: 'left',
						splitLine: {
							show: false
						}
					}, {
						type: 'value',
						name: '比例',
						min: 0,
						max: y2Max,
						position: 'right',
						axisLabel: {
							formatter: '{value}%'
						},
						offset: -6,
						splitLine: {
							show: false
						}
					}],
					series: [{
						name: '数量',
						type: 'bar',
						barWidth: 18,
						yAxisIndex: 0,
						label: {
							normal: {
								color: '#73cafd',
								show: true,
								position: 'top'
							}
						},
						itemStyle: {
							normal: {
								color: '#73cafd'
							}
						},
						data: myData1
					}, {
						name: '比例',
						type: 'line',
						yAxisIndex: 1,
						label: {
							normal: {
								textStyle: {
									color: '#999',
								},
								show: true,
								position: 'top',
								formatter: '{c}%'
							}
						},
						lineStyle: {
							normal: {
								color: '#999',
								width: 3,
								shadowColor: 'rgba(0,0,0,0.4)',
								shadowBlur: 10,
								shadowOffsetY: 10
							}
						},
						data: myData2
					}]
				}

				// var canvas = document.createElement('canvas');
				// canvas.width = 600;
				// canvas.height = 400;
                // chart = myChart = echarts.init(canvas);
                chart = myChart = echarts.init(document.getElementById('main'));
                chart.setOption(option);

				// var ctx = canvas.getContext('2d');
				// console.log(JSON.stringify(ctx.stack()));
            });

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