fastAdmin Echarts图形

html部分

<div id="echart" style="height:400px;width:100%;"></div>
<div id="echart1" style="height:400px;width:100%;"></div>
<script>
//$shop格式  PHP语法
//$shop = json_encode(['店铺1','店铺2','店铺3']);
//$amount = json_encode(100,120,150);
    var achievment = {
        shop: {$shop},
        amount:{$amount},
    };
</script>

JS部分

define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {

    var Controller = {
        index: function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = Echarts.init(document.getElementById('echart'));
            // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '门店当月业绩统计'
                    },
                    tooltip: {},
                    legend: {
                        data:['业绩']
                    },
                    xAxis: {
                        data: achievment.shop
                    },
                    yAxis: {},
                    series: [{
                        name: '业绩',
                        type: 'bar',
                        data: achievment.amount
                    }]
                };
            myChart.setOption(option);


            var myChart1 = Echarts.init(document.getElementById('echart1'));
            // 指定图表的配置项和数据
                var option1 = {
                    title: {
                        text: '门店总业绩统计'
                    },
                    tooltip: {},
                    legend: {
                        data:['业绩']
                    },
                    xAxis: {
                        data: achievment.shop
                    },
                    yAxis: {},
                    series: [{
                        name: '业绩',
                        type: 'bar',
                        data: achievment.amount
                    }]
                };
            myChart1.setOption(option1);
        }
    };

    return Controller;
});

查看更多