javascript - Echarts饼图无法在laravel blade上渲染？

Question

Laravel 版本:5.3

我正在使用这个echarts demo :

这是我来自 var_export 的源 php 数组:

$pieData = 
    array (
        0 => array ( 0 => 'date', 1 => '2019-12-12', 2 => '2019-12-13', 3 => '2019-12-14', 4 => '2019-12-15', 5 => '2019-12-16', 6 => '2019-12-17', 7 => '2019-12-18', 8 => '2019-12-19', 9 => '2019-12-20', 10 => '2019-12-21', 11 => '2019-12-23', 12 => '2019-12-24', 13 => '2019-12-25', ),
        1 => array ( 0 => 'Central Region', 1 => 285, 2 => 365, 3 => 216, 4 => 129, 5 => 358, 6 => 339, 7 => 389, 8 => 1, 9 => 28, 10 => 0, 11 => 11, 12 => 1, 13 => 15, ),
        2 => array ( 0 => 'Eastern Region', 1 => 160, 2 => 119, 3 => 106, 4 => 159, 5 => 141, 6 => 132, 7 => 107, 8 => 0, 9 => 0, 10 => 5, 11 => 17, 12 => 22, 13 => 0, ),
        3 => array ( 0 => 'Western Region', 1 => 147, 2 => 196, 3 => 181, 4 => 48, 5 => 183, 6 => 175, 7 => 247, 8 => 5, 9 => 4, 10 => 15, 11 => 21, 12 => 2, 13 => 0, ),
        4 => array ( 0 => 'Northern Region', 1 => 65, 2 => 24, 3 => 33, 4 => 10, 5 => 21, 6 => 40, 7 => 33, 8 => 0, 9 => 0, 10 => 0, 11 => 0, 12 => 0, 13 => 0, ), );

我把上面的数组json_encode传给了blade模板，但是饼图无法渲染，这是我的代码:

 setTimeout(function () {
    var dom = document.getElementById("submitOrderPie");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;

    option = {
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: true
        },
        dataset: {
            source: {!! $pieData !!},
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
                @for($i=1;$i<count(json_decode($pieData));$i++)
            {
                type: 'line', smooth: true, seriesLayoutBy: 'row'
            },
                @endfor
            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                label: {
                    formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                    itemName: 'date',
                    value: '2012',
                    tooltip: '2012'
                }
            }
        ]
    };

    myChart.on('updateAxisPointer', function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });

    myChart.setOption(option);

页面加载后的效果:

鼠标悬停在折线图上的效果:

但是如果我将鼠标移到折线图上，就会显示上面的饼图。我希望​​饼图在页面加载后显示。我怀疑是数据格式的问题，但是我用了JSON.parse({!! $pieData !!})，还是这样。谢谢大家!

Answer 1

数据格式没问题，是因为我开始渲染的日期设置错了，像这样

 series: [

            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                label: {
                     formatter: '{b}: {@2019-12-12} ({d}%)'
                },
                encode: {
                    itemName: 'date',
                    value: '2019-12-12',
                    tooltip: '2019-12-12'
                }
            }
        ]