ECharts教程
-
ECharts – ECharts教程
ECharts介绍 ECharts, 一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir…… -
ECharts – ECharts简介
ECharts是什么 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。它遵循 Apache-2.0 开源协议,免费商用,且兼容当前绝大部…… -
ECharts – ECharts安装
如何获取ECharts: 获取 ECharts 的方法有以下四种,可以根据自己的情况进行选择: 1:在 ECharts 的官方网站中挑选合适版本进行下载,不同的打包下载应用于不…… -
ECharts – 第一个ECharts实例
1.新建一个.html 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> </html> 2.引入 ECharts: 在…… -
ECharts – ECharts基础概念
简要介绍下ECharts中的基础概念: 1、echarts 实例: 一个网页中可以创建多个 echarts 实例。 每个 echarts 实例中可以创建多个图表和坐标系等。 dom节点作为e…… -
ECharts – ECharts六大组件及部分选项属性概述
在讲ECharts六大组件之前不得不说一下Option。 Option概述: 图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项 ECharts的主要组件选…… -
ECharts – title组件详解
Echarts工具的6个公共组件包括title标题、tooltip提示框、toolbox工具栏、legend图例、dataZoom缩放控制、visualMap视觉映射。下面介绍第一个公共组件title标…… -
ECharts – tooltip详解(1)——概述
提示框组件tooltip详解 提示框组件可以设置在多种地方: 可以设置在全局,即 tooltip 可以设置在坐标系中,即 grid.tooltip、polar.tooltip、single.tooltip …… -
ECharts – tooltip详解(2)——trigger
本文包含echarts中自定义提示框触发方式及其对应的方法和实例。 提示框触发方式:trigge 在提示框组件tooltip详解(1)中我们说过: 提示框触发方式trigger的…… -
ECharts – tooltip详解(3)——formatter
formatter格式化方法存在的原因 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过处理让其变成我们想要的样子,便于用户更好地理解内容。 forma…… -
ECharts – tooltip详解(4)——位置设置
Echarts提示框(tooltip)浮层位置,不设置时,默认位置会跟随鼠标的位置。 提示框显示不全的问题 当提示框位置超出图表所在区域时,就可能出现提示框显示不全…… -
ECharts – legend—代码注释
legend—代码注释 *该代码可作为模板使用 legend={ show:true, //是否显示 zlevel:0, //所属图形的Canvas分层,zlevel大的Canvas会放在zlevel小的Canvas的上…… -
ECharts – legend—概述、常用属性及解析
legend详解(1)— 概述、常用属性及解析 legend:图例组件 legend用于设置图例相关属性。 图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击…… -
ECharts – legend—修改图标图例的形状及大小
前一篇教程我们讲了ECharts中的一些常用的属性,下面我们来通过设置这些属性来修改legend的样式。 默认图标图例 以我们之前写过的树懒课堂总部一周气温变化这…… -
ECharts – legend—单独设置图例及其位置
如何单独设置图例 上一个教程我们讲了修改图标图例的形状及大小那么,我们该如何单独设置图例呢? 分别对legend的样式做出定义 首先需要分别对legend的样式做…… -
ECharts – legend—使用自定义图片
echarts中自定义图片的矢量路径设置 在echarts中要使用自定义的图片有三种格式 都与图例项的 icon属性有关,三种格式如下: 一:使用ECharts 提供的标记类型 …… -
ECharts – toolbox—概述及其主要属性
toolbox—概述及其主要属性 toolbox:ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。 toolbox中的属性,不包含五…… -
ECharts – Toolbox—实例1_功能展示
概述: 工具箱(详见toolbox详解),每个图表最多有一个工具箱。 工具栏功能展示: 实例1:树懒课堂总部一周气温变化 我们以树懒课堂总部一周气温变化这个实例…… -
ECharts – toolbox—实例2_工具栏的添加及设置
实例2:第一个ECharts实例 我们以“第一个ECharts实例”这个实例来对toolbox进行简要说明: 完整代码如下: <!DOCTYPE html> <html> <head> &…… -
ECharts – toolbox—增加自定义图标和事件
toolbox—增加自定义图标和事件 echarts提供了丰富的图标 如: saveAsImage保存图片 restore 配置项还原 dataView数据视图工具 dataZoom 数据区域缩放 magicTy…… -
ECharts – toolbox代码及详解注释
toolbox代码及详解注释 *该代码可作为模板使用 toolbox={ show : true, //是否显示工具栏组件 orient:"horizontal", //工具栏 icon 的布局朝向'horizontal' …… -
ECharts – dataZoom概述、dataZoomSelect、dataZoomInside
dataZoom dataZoom 组件 用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。 ECharts现在支持这几种类型的 dataZoom …… -
ECharts – dataZoom-slider概述及其主要属性
dataZoom-slider概述及其主要属性 滑动条型数据区域缩放组件(dataZoomSlider) (参考数据区域缩放组件(dataZoom)的介绍) 所有属性 dataZoom-slider. ty…… -
ECharts – dataZoom代码实例及对应注释
dataZoom代码实例及对应注释 dataZoom=[//区域缩放 { id: 'dataZoomX', show:true,//是否显示组件。如果设置为false,不会显示,但是数据过滤的功能还存在。 …… -
ECharts – datazoom使用方法及具体使用实例
概述 前面的教程我们讲解了dattazoom的分类及部分属性,下面我们来讲一讲具体如何使用datazomm这个组件吧。 拖动 dataZoom 组件变化窗口 我们先只对单独一个横……