fastAdmin Echarts图形

最新推荐文章于 2024-12-10 18:28:24 发布

原创最新推荐文章于 2024-12-10 18:28:24 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

fastAdmin 专栏收录该内容

9 篇文章

订阅专栏

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;
});