ECharts 安装

1、独立版本

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

echarts.min.js(4.7.0)

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

echarts.js(4.7.0)

我们也可以在 ECharts 的官网上直接下载更多丰富的版本,包含了不同主题跟语言,下载地址: https://echarts.apache.org/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 >

尝试一下 »

jsDelivr

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

尝试一下 »

cdnjs

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

尝试一下 »


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 ] } ] } ) ;