ECharts（笔记）

CaiJin6a

已于 2024-04-12 19:55:11 修改

阅读量311

点赞数 7

文章标签： echarts html5

于 2024-03-11 15:05:08 首次发布

本文链接：https://blog.csdn.net/CaiJin6a/article/details/136624304

版权

一、echarts的使用

要使用 HTML 制作折线图并能够切换多个数据源，你可以使用 ECharts，这是一个强大的开源 JavaScript 可视化库。以下是创建折线图并切换数据源的基本步骤：

1. **引入 ECharts 库**：
在你的 HTML 文件中，你需要引入 ECharts 的 JavaScript 文件。你可以从 ECharts 官网下载或者使用 CDN 链接。

   <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

2. **准备一个容器**：
在 HTML 中，你需要一个用于放置图表的容器元素。

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

3. **初始化 ECharts 实例**：
使用 JavaScript 初始化 ECharts 实例，并将其与你的容器元素关联。

   var myChart = echarts.init(document.getElementById('main'));

4. **定义图表配置**：
创建一个配置对象，定义图表的类型、数据轴、图例、提示框等。

var option = {
     title: {
       text: '折线图示例'
     },
     tooltip: {
       trigger: 'axis'
     },
     legend: {
       data: ['数据源1', '数据源2']
     },
     xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
     yAxis: {
       type: 'value'
     },
     series: [
       {
         name: '数据源1',
         type: 'line',
         data: [820, 932, 901, 934, 1290, 1330, 1320]
       },
       {
         name: '数据源2',
         type: 'line',
         data: [800, 930, 900, 1100, 1200, 1100, 1000]
       }
     ]
   };

5. **设置图表选项**：
使用 `setOption` 方法将配置应用到 ECharts 实例上。

   myChart.setOption(option);

6. **切换数据源**：
你可以通过按钮或其他事件来切换数据源。以下是一个简单的按钮切换示例。

   <button onclick="switchDataSource(0)">数据源1</button>
   <button onclick="switchDataSource(1)">数据源2</button>

   function switchDataSource(index) {
     var series = myChart.getOption().series;
     series[0].data = index === 0 ? [820, 932, 901, 934, 1290, 1330, 1320] : [800, 930, 900, 1100, 1200, 1100, 1000];
     myChart.setOption({
       series: series
     });
   }

在这个例子中，我们定义了两个数据源，并在图表配置中创建了两个系列。通过按钮点击事件，我们可以通过修改系列数据并重新设置选项来切换数据源。

请确保在页面加载完成后执行 JavaScript 代码，通常可以将 JavaScript 代码放在 `<script>` 标签中，并将其放在 HTML 结构的底部。如果你使用的是外部 JavaScript 文件，请确保在引入 ECharts 库之后引入你的脚本文件。

二、我的常见问题

问题：我在index.html里面引用script标签引入echarts，但是在js文件里面没有引入，js文件报错未定义echarts，怎么解决这个问题。同时我在js文件定义了数据源option，使用script标签引入到index.html中，但是依旧报错未定义option为什么，怎么解决

解决：当你在 `index.html` 中通过 `<script>` 标签引入 ECharts 库，但在 `.js` 文件中没有再次引入时，`ECharts` 对象应该已经在你的全局作用域中可用。如果你在 `.js` 文件中遇到 `未定义 echarts` 的错误，可能是因为以下几个原因：

1. **确保 ECharts 库在 `.js` 文件之前加载**：确保你的 `<script>` 标签正确地引入了 ECharts 库，并且这个标签位于你的 `.js` 文件之前。这样，当你的 `.js` 文件执行时，`ECharts` 已经定义在全局作用域中。

   <!-- 引入 ECharts -->
   <script src="path/to/echarts.min.js"></script>

   <!-- 引入你的 JS 文件 -->
   <script src="path/to/your-script.js"></script>

2. **确保没有命名冲突**：如果你的 `.js` 文件中有一个变量或函数命名为 `echarts`，它可能会覆盖全局的 `ECharts` 对象。确保你的代码中没有命名冲突。

3. **检查 ECharts 库的路径**：确保你提供的 ECharts 库路径是正确的，并且文件确实存在于该路径。

对于 `option` 变量未定义的问题，这通常意味着你的 `.js` 文件中的代码没有正确执行，或者 `option` 变量没有在全局作用域中定义。要解决这个问题，请确保：

1. **全局变量**：如果你希望在 `.js` 文件中定义的 `option` 变量在全局作用域中可用，确保你没有在函数或代码块内部定义它。

 // 正确：在全局作用域定义 option
   var option = {
     // ... 你的配置 ...
   };

   // 错误：在局部作用域定义 option
   function setupChart() {
     var option = {
       // ... 你的配置 ...
     };
   }

2. **确保脚本加载完成**：如果你在 `index.html` 中通过 `<script>` 标签引入了包含 `option` 变量定义的 `.js` 文件，确保这个 `<script>` 标签在页面加载时被执行。通常，将 `<script>` 标签放在 `<body>` 标签的底部是一个好习惯。

3. **检查文件路径**：确保你的 `.js` 文件路径正确，并且文件确实存在于该路径。

4. **使用模块化**：如果你的项目结构允许，考虑使用模块化的方式来组织你的代码。这样，你可以避免全局变量的冲突，并且可以更容易地管理和维护你的代码。

如果以上步骤仍然无法解决问题，你可能需要检查浏览器的开发者工具中的控制台，查看具体的错误信息，以便进一步调试。