echarts饼图不能在laravel刀片上渲染？

Question

Laravel 版本：5.3

我正在使用这个 echarts演示：

这是我来自 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传递给刀片模板，但是饼图无法渲染，这是我的代码：

 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'

            },

页面加载后的效果：

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

但是如果我将鼠标移到折线图上，就会显示上面的饼图。我希望在页面加载后显示饼图。我怀疑这是数据格式的问题，但我使用 JSON.parse({!! $pieData !!})，仍然如此。谢谢各位！

Answer 1

数据格式没问题。是因为我开始渲染的日期设置不正确，像这样&nbsp;series: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'pie',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 'pie',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; radius: '30%',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; center: ['50%', '25%'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;formatter: '{b}: {@2019-12-12} ({d}%)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; encode: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemName: 'date',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: '2019-12-12',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tooltip: '2019-12-12'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]