Echarts源码的使用

最新推荐文章于 2025-05-28 16:43:03 发布

原创最新推荐文章于 2025-05-28 16:43:03 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

9 篇文章

订阅专栏

Echarts是一个使用 JavaScript 实现的开源可视化库，它提供了许多直观，交互丰富，可高度个性化定制的数据可视化图表。但同时好多高度定制化的图表没有提供，这时候就需要我们自己修改源码来实现自己想要的功能。
1、首先我们需要到GitHub上下载自己需要的版本。
下载地址：https://github.com/apache/incubator-echarts
运行 npm install 安装依赖
2、找到源码位置：src/charts
3、修改好源码，运行 node build/build.js ，生成可直接引用的文件，生成文件路径为：dist/echarts.js。我这里生成的是全部，构建相应文件，在dist中生成相应的可直接引用文件。

完全版：dist/echarts.js，体积最大，包含所有的图表和组件。
常用版：dist/echarts.common.js，体积适中，包含常见的图表和组件。
精简版：dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件。

4、引用echarts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>myProject</title>
    <script src="dist/echarts.js"></script>   //src填入具体路径，我这里直接在源码根目录下
</head>
<body>
<div id="main" style="width: 1500px;height:1000px;"></div>  //需指定宽高
</div>
<script>
 let myEcharts=echarts.init(document.getElementById('main')); //指定图表的配置项和数据
 myEcharts.setOption({
 ...
 })
 </script>
</body>
</html>