Laravel версия: 5.3

Я использую эту демонстрацию echarts:

Вот мой исходный массив php из var_export:

$pieData = array ( 0 ={amp}gt; array ( 0 ={amp}gt; 'date', 1 ={amp}gt; '2019-12-12', 2 ={amp}gt; '2019-12-13', 3 ={amp}gt; '2019-12-14', 4 ={amp}gt; '2019-12-15', 5 ={amp}gt; '2019-12-16', 6 ={amp}gt; '2019-12-17', 7 ={amp}gt; '2019-12-18', 8 ={amp}gt; '2019-12-19', 9 ={amp}gt; '2019-12-20', 10 ={amp}gt; '2019-12-21', 11 ={amp}gt; '2019-12-23', 12 ={amp}gt; '2019-12-24', 13 ={amp}gt; '2019-12-25', ), 1 ={amp}gt; array ( 0 ={amp}gt; 'Central Region', 1 ={amp}gt; 285, 2 ={amp}gt; 365, 3 ={amp}gt; 216, 4 ={amp}gt; 129, 5 ={amp}gt; 358, 6 ={amp}gt; 339, 7 ={amp}gt; 389, 8 ={amp}gt; 1, 9 ={amp}gt; 28, 10 ={amp}gt; 0, 11 ={amp}gt; 11, 12 ={amp}gt; 1, 13 ={amp}gt; 15, ), 2 ={amp}gt; array ( 0 ={amp}gt; 'Eastern Region', 1 ={amp}gt; 160, 2 ={amp}gt; 119, 3 ={amp}gt; 106, 4 ={amp}gt; 159, 5 ={amp}gt; 141, 6 ={amp}gt; 132, 7 ={amp}gt; 107, 8 ={amp}gt; 0, 9 ={amp}gt; 0, 10 ={amp}gt; 5, 11 ={amp}gt; 17, 12 ={amp}gt; 22, 13 ={amp}gt; 0, ), 3 ={amp}gt; array ( 0 ={amp}gt; 'Western Region', 1 ={amp}gt; 147, 2 ={amp}gt; 196, 3 ={amp}gt; 181, 4 ={amp}gt; 48, 5 ={amp}gt; 183, 6 ={amp}gt; 175, 7 ={amp}gt; 247, 8 ={amp}gt; 5, 9 ={amp}gt; 4, 10 ={amp}gt; 15, 11 ={amp}gt; 21, 12 ={amp}gt; 2, 13 ={amp}gt; 0, ), 4 ={amp}gt; array ( 0 ={amp}gt; 'Northern Region', 1 ={amp}gt; 65, 2 ={amp}gt; 24, 3 ={amp}gt; 33, 4 ={amp}gt; 10, 5 ={amp}gt; 21, 6 ={amp}gt; 40, 7 ={amp}gt; 33, 8 ={amp}gt; 0, 9 ={amp}gt; 0, 10 ={amp}gt; 0, 11 ={amp}gt; 0, 12 ={amp}gt; 0, 13 ={amp}gt; 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{amp}lt;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 !!}), все еще так. Спасибо, ребята!

Формат данных в порядке. Потому что дата начала рендеринга была установлена ​​неправильно, как это

  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' } } ]