Как я могу добавить несколько графиков без повторения кода javascript? - PullRequest
Новая
       10

Как я могу добавить несколько графиков без повторения кода javascript?

2 голосов
/ 04 апреля 2020 
<HTML>
<HEAD>
<script>
function createChart(divId, data) {
  var myChart = echarts.init(document.getElementById(divId));

  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: data,
      type: 'bar'
    }]
  };

  myChart.setOption(option);
}

createChart('main1', [10,20,30,40,50,60,70]);
createChart('main2', [15,25,35,45,55,65,75]);
</script>
</HEAD>
<BODY>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js"></script>

<div id="main1" style="width:100%;height:400px;"></div>
<div id="main2" style="width:100%;height:400px;"></div>
</BODY>
</HTML>

Показывает пустые элементы! В консоли отображаются следующие ошибки: ReferenceError: echarts не определена Кодировка символов документа HTML не была объявлена. Документ будет отображаться с искаженным текстом в некоторых конфигурациях браузера, если документ содержит символы вне диапазона US-ASCII. Кодировка символов страницы должна быть объявлена ​​в документе или в протоколе передачи.

1 Ответ

2 голосов
/ 04 апреля 2020

Вы определенно можете сделать это, создав настраиваемую функцию. На данный момент я настроил два свойства div ID и данные. Вы можете сделать другие свойства настраиваемыми и передать этой общей функции.

Ниже приведен рабочий код: 

function createChart(divId, data) {
  var myChart = echarts.init(document.getElementById(divId));

  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: data,
      type: 'bar'
    }]
  };

  myChart.setOption(option);
}

createChart('main', [10,20,30,40,50,60,70]);
createChart('main-2', [15,25,35,45,55,65,75]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js"></script>

<div id="main" style="width: 600px;height:400px;"></div>

<div id="main-2" style="width: 600px;height:400px;"></div>

ОБНОВЛЕНИЕ

Это обновленный код, часть javascript должна быть в нижней части тела тег. И я изменил прописные теги на строчные в соответствии со стандартом 

<html>
<head>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js"></script>

<div id="main1" style="width:100%;height:400px;"></div>
<div id="main2" style="width:100%;height:400px;"></div>

<script>
function createChart(divId, data) {
  var myChart = echarts.init(document.getElementById(divId));

  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: data,
      type: 'bar'
    }]
  };

  myChart.setOption(option);
}

createChart('main1', [10,20,30,40,50,60,70]);
createChart('main2', [15,25,35,45,55,65,75]);
</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...