个人博客 个人博客
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

董先亮

前端react开发
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 常用配置
  • 图表
    • line 折线/面积图
    • pie 饼图
      • 常见问题
      • 扇叶间隔
    • gauge 仪表盘
    • 创建渐变色
  • 底层分析
  • Echarts
NeverStop1024
2022-09-14
目录

图表

# 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,
      },
    },
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

待办

  • 如何画一个圆环进度条

# 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)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

参考:

  • echarts中两种渐变方式的实现 (opens new window)
编辑 (opens new window)
上次更新: 2022/09/18
常用配置
底层分析

← 常用配置 底层分析→

最近更新
01
mock使用
07-12
02
websocket即时通讯
07-12
03
前端面试题
07-09
更多文章>
Theme by Vdoing | Copyright © 2022-2023 NeverStop1024 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式