<?php $this->beginPage() ?>
    <?php $this->head() ?>
    <?php $this->beginBody() ?>
    <div class="site-about" >
        <h1><?= Html::encode($this->title) ?></h1>

        <p>This is the About page. You may modify the following file to customize its content:<?php echo json_decode('data')?></p>
        <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
        <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
        <div id="main" style="width: 600px;height:400px;">
        </div>
    </div>
    <?php $this->endBody() ?>
        <script type="text/javascript">
            // 基於準備好的dom，初始化echarts例項
            var myChart = echarts.init(document.getElementById('main'));

            // 指定圖表的配置項和資料
            var option = {
                title: {
                    text: 'ECharts 入門示例'
                },
                tooltip: {},
                legend: {
                    data:['銷量']
                },
                xAxis: {
                    data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                },
                yAxis: {},
                series: [{
                    name: '銷量',
                    type: 'bar',
                    data: document.getElementById('data')
                }]
            };

            // 使用剛指定的配置項和資料顯示圖表。
            myChart.setOption(option);
        </script>

<?php $this->endPage() ?>