Echarts

echarts

官网: http://echarts.baidu.com
git: https://github.com/apache/incubator-echarts

echarts 特性

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）。

• 丰富的可视化类型
• 多种数据格式无需转换直接使用
• 千万数据的前端展现
• 移动端优化
• 多渲染方案，跨平台使用！
• 深度的交互式数据探索
• 多维数据的支持以及丰富的视觉编码手段
• 动态数据
• 绚丽的特效
• 通过 GL 实现更多更强大绚丽的三维可视化
• 无障碍访问（4.0+）

echarts 教程

• 获取Echarts
  App:
  npm install echarts --save
"native-echarts": "^0.4.0", npm install 或 yarn
  Web:
  npm install echarts --save
npm install --save echarts-for-react

• 使用Echarts
  App:
  import Echarts from 'native-echarts'
<Echarts backgroundColor={'white'} option={option} height={Device.scale(272)} width={Device.scale(400)}/>
  web:
  方式一：echarts-for-react
  import ReactEcharts from 'echarts-for-react'
<ReactEcharts option={option} notMerge lazyUpdate style={{ width: chartWidth, height: chartHeight }} />
  * option
  图表的配置项和数据，具体见配置项手册。
  * notMerge
  可选，是否不跟之前设置的option进行合并，默认为false，即合并。
  * lazyUpdate
  可选，在设置完option后是否不立即更新图表，默认为false，即立即更新。
  * silent
  可选，阻止调用 setOption 时抛出事件，默认为false，即抛出事件。
  方式二：在 webpack 中使用 ECharts

    import React, { Component } from 'react';
    // 引入 ECharts 主模块
    import echarts from 'echarts/lib/echarts';
    // 引入柱状图
    import  'echarts/lib/chart/bar';
    // 引入提示框和标题组件
    import 'echarts/lib/component/tooltip';
    import 'echarts/lib/component/title';
    
    class EchartsTest extends Component {
        componentDidMount() {
            // 基于准备好的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]
                }]
            });
        }
        render() {
            return (
                <div id="main" style={{ width: 400, height: 400 }}></div>
            );
        }
    }
    
    export default EchartsTest;  
  

  web:
  在微信小程序中使用 ECharts

• ECharts 中的样式

  • 颜色主题（Theme）
  • 调色盘
  • 直接样式设置（itemStyle、lineStyle、areaStyle、label、…）
  • 视觉映射（visualMap）

• 使用 dataset 管理数据
  数据可以单独管理，被多个组件复用

    option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '2012', '2013', '2014', '2015'],
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
                ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
            ]
        },
        xAxis: [
            {type: 'category', gridIndex: 0},
            {type: 'category', gridIndex: 1}
        ],
        yAxis: [
            {gridIndex: 0},
            {gridIndex: 1}
        ],
        grid: [
            {bottom: '55%'},
            {top: '55%'}
        ],
        series: [
            // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            {type: 'bar', seriesLayoutBy: 'row'},
            // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
            {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
        ]
    }  
  

• 图表中的交互组件
  图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline 等

• 移动端自适应
  Charts 内部组件随着容器尺寸变化而变化
  ECharts组件的定位和布局:
  left/right/top/bottom/width/height 六种定位方式

  绝对值 单位是浏览器像素（px），用 number 形式书写（不写单位）。例如 {left: 23, height: 400}。
  百分比 表示占 DOM 容器高宽的百分之多少，用 string 形式书写。例如 {right: ‘30%’, bottom: ‘40%’}。
  位置描述 可以设置 left: ‘center’，表示水平居中。可以设置 top: ‘middle’，表示垂直居中。

  Media Query:
  Media Query 提供了『随着容器尺寸改变而改变』的能力。

• 数据的视觉映射
  数据可视化是数据到视觉元素的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。ECharts 提供了通用的视觉映射组件 visualMap。visualMap 组件中可以使用的视觉元素有：
  图形类别（symbol）、图形大小（symbolSize）
  颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、
  颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue）

• ECharts 中的事件和行为
  在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。

• 富文本标签
  在许多地方（如图、轴的标签等）都可以使用富文本标签。
  文本样式相关的配置项

• 使用 Canvas 或者 SVG 渲染
  Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉特效。

  SVG 它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。

    // 使用 Canvas 渲染器（默认）
    var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
    // 等价于：
    var chart = echarts.init(containerDom);
    
    // 使用 SVG 渲染器
    var chart = echarts.init(containerDom, null, {renderer: 'svg'});  
  

• 在图表中支持无障碍访问

• 使用 ECharts GL 实现基础的三维可视化

echarts API

echarts
echartsInstance
action
events

echarts 配置项（重点）

setOption

title 标题组件，包含主标题和副标题。
legend 图例组件展现了不同系列的标记(symbol)，颜色和名字。
grid 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
xAxis 直角坐标系 grid 中的 x 轴。
yAxis 直角坐标系 grid 中的 y 轴。
polar 极坐标系，可以用于散点图和折线图。
radiusAxis 极坐标系的径向轴。
angleAxis 极坐标系的角度轴。
radar 雷达图坐标系组件，只适用于雷达图。
dataZoom dataZoom 组件 用于区域缩放。
visualMap visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
tooltip 提示框组件。
axisPointer 这是坐标轴指示器（axisPointer）的全局公用设置。
toolbox 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
brush brush 是区域选择组件，用户可以选择图中一部分数据，从而便于向用户展示被选中数据，或者他们的一些统计计算结果。
geo 地理坐标系组件。
parallel 平行坐标系（Parallel Coordinates） 是一种常用的可视化高维数据的图表。
parallelAxis 这个组件是平行坐标系中的坐标轴。
singleAxis 单轴。可以被应用到散点图中展现一维数据。
timeline timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。
graphic graphic 是原生图形元素组件。
calendar 日历坐标系组件。
dataset ECharts 4 开始支持了 数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用。
aria ECharts 4 支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容。
series 系列列表。每个系列通过 type 决定自己的图表类型。
color 调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
backgroundColor 背景色，默认无背景。
textStyle 全局的字体样式。
animation 是否开启动画。
animationThreshold 是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
animationDuration 初始动画的时长。
animationEasing 初始动画的缓动效果。
animationDelay 初始动画的延迟。
animationDurationUpdate 数据更新动画的时长。
animationEasingUpdate 数据更新动画的缓动效果。
animationDelayUpdate 数据更新动画的延迟。
blendMode 图形的混合模式。
hoverLayerThreshold 图形数量阈值，决定是否开启单独的 hover 层，在整个图表的图形数量大于该阈值时开启单独的 hover 层。
useUTC 是否使用 UTC 时间。

echarts GL

setOption

globe 地球组件。
geo3D 三维的地理坐标系组件。
mapbox3D 基于 mapbox-gl-js 的地理组件。
grid3D 三维笛卡尔坐标系组件。
xAxis3D 三维笛卡尔坐标系中的 x 轴。
yAxis3D 三维笛卡尔坐标系中的 y 轴。
zAxis3D 三维笛卡尔坐标系中的 z 轴。
series 系列列表。每个系列通过 type 决定自己的图表类型。

echarts 实例

echarts 社区GALLERY