饼状图--只有一个指标echarts-带面积的折线图echarts柱状图圆角实现echarts中饼状图数据太多进行翻页echarts给每个柱状图配置不同的颜色echarts中x轴文字太长换行的几种方式echarts-中的事件-- demo1.on('事件类型', function (params) {}echarts控制柱状图柱条的宽度在地图上--给经纬度--展示任何一个点可以展示地名echarts 设置legend样式echarts饼状图不要中间的文字提示echasrts定义折线图legend的样式-优化echarts轮训展示某个echarts设置标题样式vue中如何使用echarts,使用axios获取数据echarts更改x和y轴的颜色echarts在左下角添加单位echarts的初始化和销毁dispose多个饼状图echarts第二次渲染不出来的原因echarts中坐标与标签刻度对齐echarts饼图中央自定义文字echarts多条折线图添加单位设置echarts线的样式echarts饼状图自定义legend的样式付费echarts去除坐标轴上的x和y轴国庆总结:echarts自定义颜色主题,保证你看的明明白白echarts饼图的配置 封装组件的注意点echarts之--柱状图-%显示ECharts 简介ECharts 安装ECharts 自定义构建ECharts 创建图表ECharts 图表组成ECharts 文本样式ECharts 区域样式ECharts 事件系统ECharts action 交互ECharts 数据异步加载ECharts 标题组件ECharts 提示框ECharts 图例组件ECharts 工具栏ECharts 数据缩放组件ECharts 极坐标系ECharts 地图坐标系ECharts 折线图ECharts 柱状图ECharts 饼图ECharts 散点图ECharts K 线图

ECharts 安装

ECharts 安装

从上一个小节学习,相信大家已经了解到了 ECharts 的作用以及它的优势。那么本小节我们就来看一下 学习 ECharts 的第一步 “安装”。ECharts 也像其他的 JavaScript 库那样,它的安装及其简单且多种多样,如果你想要及快速的使用,只需一行代码就够了!快来一起看看吧。

1. 简介

官方解释:
支持直接下载编译文件或通过 npm 安装 ECharts 包。

解释:

  1. 除官网提供的两种安装方式外,还可以选择使用各类免费的 CDN 服务,以获得更佳的 HTTP 性能。
  2. 官网提供了简洁的安装示例,但并没有详细介绍各编译版本之间的区别,本文将就此展开讨论。

2. 下载编译包

可直接到 github 下载 ECharts 编译文件,以 4.5.0 为例,下载地址:https://github.com/apache/incubator-echarts/tree/4.5.0/dist,打开页面可看到多个编译版本:

编程之家

几个主要版本分别为:

  1. echarts.js:完整版,压缩后约 744KB,包含所有图表和组件;
  2. echarts.common.js:常用版,压缩后约 471KB,只包含常用的图表和组件,包括: linebarpiescatter
  3. echarts.simple.js:精简版,压缩后约 305KB,只包含最常用的图表和组件,包括: linebarpie

剩下的文件中,名字带 en 的是对应版本的英文版;名字带 min 的是对应版本的压缩版。下载完成后,需要在页面使用 <script src="echarts.js"></script> 标签引入代码文件。

3. CDN

可以通过 CDN 引入 ECharts 文件:

<!-- bootstrap 服务 -->
<!-- bootstrap 提供的免费CDN服务,亲测非常稳定 -->
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>

<!-- 七牛云存储服务 -->
<!-- 国内速度稳定,开放性强 -->
<script src="//cdn.staticfile.org/echarts/4.5.0/echarts.common.js"></script>

<!-- jsdeliver 服务 -->
<!-- 微软的CDN服务,虽然国内访问速度比不上国内CDN,但速度不至于太慢,有国际化需求的可以试试 -->
<script src="//cdn.jsdelivr.net/npm/echarts@4.5.0/echarts.common.js"></script>

<!-- cdnjs 服务 -->
<!-- 一个非常全的CDN服务,存储了大多数主流的js、css、图片库 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/echarts/4.5.0/echarts.common.js"></script>

4. NPM or Yarn

安装命令:

npm install echarts

// 或
yarn add echarts

安装完毕后,使用如下代码引入:

// 使用commonjs:
const echarts = require('echarts');

// 支持ES6的环境也可以使用
import echarts from 'echarts';

上述语句引入 node_modules/echarts/index.js 文件,默认包含 ECharts 图表和组件。根据项目需求,可以选择引入不同版本:

// 默认引入完整版
import echarts from 'echarts';

// 引入常用版
import * as echarts from 'echarts/echarts.common.js';

// 引入精简版
import * as echarts from 'echarts/echarts.simple.js';

如果上述版本均不符合需求,可选择按需引入:

// 引入基础模块
import echarts from 'echarts/lib/echarts';

// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入标题组件
import 'echarts/lib/component/title';

支持按需引入的模块,可参考 示例

5. 个人经验

如果项目需求比较简单,建议直接下载使用编译文件。如果项目环境允许使用公共 CDN,建议使用 CDN 方式引入编译文件,可获得更好 HTTP 性能。如果开发环境已经配备 webpack、rollup 等工程化环境,则应优先使用 npm安装,并将 ECharts 与项目中使用到的其他第三方框架一起打包,减少客户端请求数。

使用时,可根据需求,在 echarts.jsecharts.common.jsecharts.simple.js 之间选择最合适的编译版本。个人经验是优先使用 echarts.common.js,但需求无法满足时再使用 echarts.js,如果运行环境比较苛刻,如 3G 网络下,则自行构建最轻量级的版本,构建方式可参阅第二节 ECharts 自定义构建

6. 小结

编程之家


本节主要介绍如何在各种环境下使用 ECharts,包括本地文件引用、CDN、npm 等方式,读者可根据实际场景参考使用。