使用echarts绘制图表

留家里哦哦哦

已于 2023-01-11 17:21:57 修改

阅读量587

点赞数 1

分类专栏：前端学习路径文章标签： echarts

于 2021-09-23 15:31:06 首次发布

本文链接：https://blog.csdn.net/qq_46304554/article/details/120435657

版权

这篇博客适合初学者，详细介绍了如何使用 Echarts 来绘制图表。首先，从官方源获取 echarts.js 和 echarts.min.js 文件，然后创建 HTML 文件引入这些文件。接着，作者探讨了在 Echarts 中设置图表数据的两种方法：在系列中设置数据和在数据集中设置数据，并给出了相应的代码示例。

摘要由CSDN通过智能技术生成

使用echarts绘制图表

- 初学者步骤：
- Step2探讨

初学者步骤：

1.在 https://www.jsdelivr.com/package/npm/echarts，选择 dist/echarts.js以及echarts.min.js点击并分别保存为 echarts.js 和echarts.min.js 文件。
2.在刚才保存 echarts.min.js 的目录新建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px;height:500px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
   
        title: {
   
          text: '第一个ECharts 入门示例'
        },
        tooltip: {
   },
<!--(地图或书中图表的)图例; 说明-->
        legend: {
   
          data: ['销量']
        },
        xAxis: {
   
          data: ['C语言', 'JAVA程序', '数据库原理'

最低0.47元/天解锁文章

留家里哦哦哦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用echarts绘制图表

初学者步骤：1.在 https://www.jsdelivr.com/package/npm/echarts，选择 dist/echarts.js以及echarts.min.js点击并分别保存为 echarts.js 和echarts.min.js 文件。2.在刚才保存 echarts.min.js 的目录新建一个 index.html 文件，内容如下：<!DOCTYPE html><html> <head> <meta charset="utf
复制链接

扫一扫

专栏目录