如何在不重复 javascript 代码的情况下添加多个图表？答案

【问题标题】：How can I add multiple charts without repeating javascript code?如何在不重复 javascript 代码的情况下添加多个图表？
【发布时间】：2020-04-04 20:20:09
【问题描述】：

<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 范围之外的字符，则文档将在某些浏览器配置中呈现乱码。页面的字符编码必须在文档或传输协议中声明。

【问题讨论】：

您遇到什么错误？你能创建一个工作实例吗？

标签： javascript html echarts

【解决方案1】：

您绝对可以通过创建一个可配置的函数来做到这一点。现在，我已经配置了两个属性 div ID 和 data。您可以使其他属性可配置并传递给此常用函数。

请在下面找到工作代码：

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部分应该在body标签的底部。而且我已按照标准将大写标签更改为小写

<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>

【讨论】：

但是你能解释一下你为什么把脚本放在正文里吗？
问题是echart库（脚本标签）是在我们的代码之后写的。但是我们的代码需要 echart 库才能正常工作，这就是为什么会出现 echart 未定义的错误。我们需要在 body 标签底部添加 javascript 代码的另一个原因是我们希望在执行任何 JS 代码之前加载所有 HTML 代码。