привязать файл JSON к Echarts (JQuery get)

Question

Я хочу импортировать мой JSON файл в Echarts, чтобы создать линейный график, но не получилось, страница результатов полностью пуста. Я ищу его в Google, но не могу найти правильный ответ.

Это JSON:

[
  { "category": "A", "value": 1 },
  { "category": "B", "value": 2 },
  { "category": "C", "value": 3 },
  { "category": "D", "value": 7 }
]

var dataArr = [];
var myChart = echarts.init(document.getElementById('demo'));

$.get('data.json', {}, function(response) {
  dataArr = JSON.parse(response);
  initEchart();
});

function initEchart() {
  // specify chart configuration item and data
  var option = {
    title: {
      text: 'entry example'
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: dataArr.category
    },
    yAxis: {},
    series: [{
      type: 'line',
      data: dataArr.value
    }]
  };

  myChart.setOption(option);
}

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js" integrity="sha256-eKrx6Ly6b0Rscx/PSm52rJsvK76RJyv18Toswq+OLSs=" crossorigin="anonymous"></script>
<div id="demo" style="width: 600px;height:400px;"></div>

Спасибо за помощь в решении этой проблемы.

Answer 1

Я исправил вашу версию. Вы пытались передать на график пустые данные, потому что ключ dataArr.category не существует. Вы получили массив, поэтому нужно собрать данные с l oop: dataArr.map(row => row['category']) и все будет в порядке.

var dataArr = [];
var myChart = echarts.init(document.getElementById('demo'));

$.get('https://gist.githubusercontent.com/creadone/d15105b0c7e33848ef9559c28a9912c2/raw/64a17c5ac38b375cd6ab858d51a66836d9259ed0/data.json', {}, function(response) {
  dataArr = JSON.parse(response);
	console.log(dataArr);
  initEchart();
});

function initEchart() {
  // specify chart configuration item and data
  var option = {
    title: {
      text: 'entry example'
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: dataArr.map(row => row['category'])
    },
    yAxis: {},
    series: [{
      type: 'line',
      data: dataArr.map(row => row['value'])
    }]
  };

  myChart.setOption(option);
}

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js" integrity="sha256-eKrx6Ly6b0Rscx/PSm52rJsvK76RJyv18Toswq+OLSs=" crossorigin="anonymous"></script>
<div id="demo" style="width: 600px;height:400px;"></div>