line 折线/面积图

• name (opens new window)
• symbolSize (opens new window) 拐点大小
• symbol (opens new window) 拐点样式（圆形、长方形、三角形等，同时支持自定义图标）
  • symbol:'circle' 配上这个，否则是空心圆
• itemStyle (opens new window) 拐点样式配置
• lineStyle (opens new window) 折线样式配置
  • width (opens new window) 线宽
  • type (opens new window) 线类型（实线、虚线）
• areaStyle (opens new window) 面积图样式配置

pie (opens new window) 饼图

• radius (opens new window) 内外半径，可得到圆环
• legendHoverLink (opens new window) 指到图例，是否跟图标联动发亮
• clockwise (opens new window) 是否顺时针
• label (opens new window) 文本标签
• labelLine (opens new window) 文本标签引导线
• emphasis (opens new window) 高亮状态配置
  • disabled (opens new window) 鼠标移动上，是否关闭高亮状态
• hoverAnimation (opens new window) hover状态是否有放大动画

常见问题

扇叶间隔

// borderWidth来决定间隔大小，同时要调整radius，否则间隔会覆盖扇叶，让扇叶越来越小
option = {
  series: [
    {
      type: 'pie',
      radius: ['60%', '80%'],
      data: [
        { value: 1048, name: '国家级' },
        { value: 735, name: '市级' },
        { value: 580, name: '区级' },
        { value: 484, name: '街镇级' },
        { value: 300, name: '居委' },
      ],
      itemStyle: {
        borderColor: 'blue',
        borderWidth: 30,
      },
    },
  ],
};

待办

• 如何画一个圆环进度条

gauge (opens new window) 仪表盘

• center (opens new window) 仪表盘中心点（仪表盘偏移量）
• radius (opens new window) 仪表盘半径（仪表盘大小）
• startAngle (opens new window) 仪表盘开始角度
• endAngle (opens new window) 仪表盘结束角度（要半圆、全圆、其他角度的仪表盘就靠这俩属性）
• clockwise (opens new window) 是否顺时针（如果要倒着的仪表盘，把这个属性改为false）
• data (opens new window) 配置多根针（多类别仪表盘）
  • title (opens new window) 仪表盘标题
    • show (opens new window) 是否显示标题
    • offsetCenter (opens new window) 标题相对中心的偏移量
    • rich (opens new window) 可以将标题设置成富文本
      • <style_name> (opens new window) 富文本样式配置项
    • 标题其他配置 (opens new window) 其他属性与其他标题配置项相同
  • detail (opens new window) 仪表盘详情配置
    • formatter (opens new window) 字符串格式化
    • 其他配置 (opens new window) 其他配置与标题配置相同
  • name (opens new window) 数据项名称
  • value (opens new window) 数据值（仪表盘的值）
  • itemStyle (opens new window) 指针样式
    • color (opens new window) 指针颜色
    • 指针边框 (opens new window) 指针边框相关配置
    • 指针阴影 (opens new window) 指针阴影相关配置
    • opacity (opens new window) 指针透明度
    • decal (opens new window) 指针贴图（自定义指针图标）
      • symbol (opens new window) 自定义图标路径
      • symbolSize、symbolKeepAspect、color、backgroundColor (opens new window) 大小、长宽比、颜色、背景
      • dashArrayX、dashArrayY (opens new window) 贴图模式（类似与css background图片的排列模式，可以实现复杂贴图效果）
      • rotation (opens new window) 图案整体旋转角度
      • maxTileWidth、maxTileHeight (opens new window) 贴图重复渲染前的最大宽度、高度
• min、max (opens new window) 仪表盘刻度最小、最大值
• splitNumber (opens new window) 仪表盘分割段数
• axisLine (opens new window) 仪表盘轴线
  • show (opens new window) 是否显示仪表盘轴线
  • roundCap (opens new window) 仪表盘两端是否形成圆形
  • lineStyle (opens new window) 仪表盘轴线样式（颜色、宽度、阴影、透明度）
  • progress (opens new window) 当前进度样式配置
    • show (opens new window) 是否展示当前进度
    • itemStyle (opens new window) 当前进度样式配置
    • 其他配置 (opens new window)
      • 多个进度条是否重叠、宽度、两端是否形成圆形、是否裁掉超出部分
• splitLine (opens new window) 分隔线配置（大刻度）
• axisTick (opens new window) 刻度配置（小刻度）
  • splitNumber (opens new window) 分隔线之间的刻度数（浓密程度）
  • length (opens new window) 刻度线长度
  • distance (opens new window) 刻度线与轴线的距离
  • lineStyle (opens new window) 刻度样式
• axisLabel (opens new window) 刻度标签配置
  • distance (opens new window) 刻度标签与刻度距离
  • formatter (opens new window) 标签内容展示格式化
  • 其他样式配置 (opens new window) 常规文字配置、富文本等
• pointer (opens new window) 仪表盘指针
  • show (opens new window) 是否显示指针
  • icon (opens new window) 指针贴图
  • 其他配置 (opens new window) 偏移、长度、宽度、常规样式配置
• anchor (opens new window) 指针上的固定点（圆心）配置
• itemStyle (opens new window) 仪表盘指针样式配置
• emphasis (opens new window) 高亮状态下指针配置
  • itemStyle (opens new window) 高亮状态指针样式
• title (opens new window) 仪表盘标题配置
• detail (opens new window) 仪表盘详情配置
• animation (opens new window) 动画相关配置
• tooltip (opens new window) 提示

创建渐变色

线性渐变 zrender.LinearGradient(x, y, x2, y2, colorStops, globalCoord) (opens new window)

• x, y, x2, y2 包围框中的百分比，数值范围 0-1
  • (x,y) 渐变起始坐标, 也就是offset: 1
  • (x2,y2) 渐变结束坐标，也就是offset: 0
  • 起点坐标与终点坐标连成的线，也就是线性渐变了。
• offset，类似颜色线性梯度，数值范围 0-1；
• boolean，默认false，若最后参数为true，前四个参数将使用像素位置。

 areaStyle: {
    normal: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
                offset: 0,
                color: 'rgba(50, 216, 205, 1)'
            },
            {
                offset: 1,
                color: 'rgba(255, 255, 255, 0.2)'
            }
        ], false)
    }
}

另一种渐变色方案 (opens new window)

参考：

• echarts中两种渐变方式的实现 (opens new window)