Echarts 教程
1. ECharts 教程 2. ECharts 安装 3. ECharts 配置语法 4. ECharts 饼图 5. ECharts 样式设置 6. ECharts 异步加载数据 7. ECharts 交互组件 8. ECharts 数据的视觉映射 9. ECharts 事件处理 10. ECharts 旭日图

ECharts 安装

ECharts 安装

1、独立版本

我们可以在直接下载 echarts.min.js 并用 <script> 标签引入。

echarts.min.js(4.7.0)

另外,开发环境下可以使用源代码版本 echarts.js 并用 <script> 标签引入,源码版本包含了常见的错误提示和警告。

echarts.js(4.7.0)

我们也可以在 ECharts 的官网上直接下载更多丰富的版本,包含了不同主题跟语言,下载地址:https://www.echartsjs.com/zh/download.html

这些构建好的 echarts 提供了下面这几种定制:

  • 完全版:echarts/dist/echarts.js,体积最大,包含所有的图表和组件,所包含内容参见:echarts/echarts.all.js
  • 常用版:echarts/dist/echarts.common.js,体积适中,包含常见的图表和组件,所包含内容参见:echarts/echarts.common.js
  • 精简版:echarts/dist/echarts.simple.js,体积较小,仅包含最常用的图表和组件,所包含内容参见:echarts/echarts.simple.js

2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

Staticfile CDN(国内)

<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div>

55面试教程网 »

百度

<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div>

55面试教程网 »

cdnjs

<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div>

55面试教程网 »


3、NPM 方法

由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像

npm 版本需要大于 3.0,如果低于此版本需要升级它:


# 查看版本

$ npm -v

2.3.0



#升级 npm

cnpm install npm -g





# 升级或安装 cnpm

npm install cnpm -g

通过 cnpm 获取 echarts:


# 最新稳定版

$ cnpm install echarts --save

安装完成后 ECharts 和 zrender 会放在 node_modules 目录下,我们可以直接在项目代码中使用 require('echarts') 来使用。

实例

var echarts = require('echarts'); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });