ECharts 使用教程 (图文教程--版本4.6.0)

武汉加油----冲鸭，雄起！！！

成都兄弟挺你！

文中项目参考： 项目GitHub地址

Python 实现 2019 新型冠状病毒疫情地图可视化 (basemap + matplotlib)

1. ECharts概述

1.1 ECharts介绍

• ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，

• 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），

• 底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

• 丰富的可视化类型

  • ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，
  • 用于地理数据可视化的地图、热力图、线图，
  • 用于关系数据可视化的关系图、treemap、旭日图，
  • 多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

• 除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，

• 就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

• 你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，

• 也可以在在线构建中选择需要的图表类型后自定义构建。

1.2 安装使用

• 直接从 GitHub 下载整个项目文件，然后从echarts-4.6.0/dist
  文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 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。
• 也可以使用在线引入地址,进入网址选择要引用的版本即可：http://www.bootcdn.cn/echarts/

1.3 ECharts语法

• ECharts语法和原生JS保持一致
• 所有键的值除了尺寸大小，值都要使用引号，键不用
• 键的名称都是原生JS一样的匈牙利命名风格，第一个单词小写，后面单词的首字母大写，比如
  • myChart、setOption、itemStyle
• 多个系列，先写一个列表，然后不同系列就是一个字典，所有字典放在列表中
• 参考下面图片
  

1.4 option配置组件设置 + 快速查询地址

• 术语速查手册,快速了解功能名称，帮助定位到配置项手册

• 配置项手册

• GL配置项手册

• API文档-常用内置方法接口

• 详细option配置快速查看寻找方法：

  • 第一步：打开ECharts术语速查手册
  • 第二步：图表上面选择需要查询的组件，然后点击右边，查看配置项手册，就会跳转到option下组件详细配置页面
    
  • 第三步：进入配置详情页面，左边格式就是option标准写法，字典里面以键值的形式，值需要使用引号
    比如，title里面的text: ‘我是标题’,空的’'就是我们自己填的值，有值的就是还有其它值可以选择，title下面键的值还可以是字典
    比如，title下面的textStyle，用于设置文字颜色字体风格等
    
  • 第四步：option配置下面很多组件都是通用组件，如果要设置其它图形类型，需要进入series里面设置，里面有各种type类型，
    进入各种type里面可以详细设置每种图形的参数，比如折线图，绘制点的标记形状等
    
    

1.5 主题配置

• ECharts可以选择不同的主题，ECharts完整项目文件中有一个theme文件夹，里面有大量内置主题
• 但是默认只有dark和light可以直接在初始化实例时候使用
• 其它主题使用需要现引入主题的js文件，然后才能使用
• 参考案例010案例
• 也可以进入定制主题页面，自己定制调整后，然后下载js文件下来使用
• 在线主题下载及定制页面

// 主题使用代码示例
<script src="echarts.js"></script>

<!-- 引入 vintage 主题 -->
<script src="theme/vintage.js"></script>