自定义仪表盘区间段的颜色渐变和设置指定位置的分隔线

自定义仪表盘区间段的颜色渐变和设置指定位置的分隔线

new echarts.graphic.LinearGradient(0, 0, 1, 0, [  
    {
    offset: 0.2182, color: '#784FFF' }, // 渐变起始颜色  
    {
    offset: 0.7577, color: '#9046FE' }  // 渐变结束颜色  
])

new echarts.graphic.LinearGradient 构造函数中的四个参数分别表示渐变的起点和终点坐标，其含义如下：

第一个参数 (x0): 渐变起始点的 X 坐标。
第二个参数 (y0): 渐变起始点的 Y 坐标。
第三个参数 (x1): 渐变结束点的 X 坐标。
第四个参数 (y1): 渐变结束点的 Y 坐标。

起点坐标 (x0, y0):

x0 = 0: 这表示渐变的起始点在图形的最左侧（横坐标为 0）。如果图形的宽度是设定为 1，那么 0 表示图形的左边缘。
y0 = 0: 这表示渐变的起始点在图形的最上方（纵坐标为 0）。
综合这个部分的坐标 (0, 0) 表明渐变从图形的左上角开始。

结束点坐标 (x1, y1):

x1 = 1: 这表示渐变的结束点在图形的最右侧（横坐标为 1）。这意味着如果宽度是设定为 1，则表示图形的右边缘。
y1 = 0: 这留在了与起点相同的高度（纵坐标为 0），因此渐变是水平的。
综合这个部分的坐标 (1, 0) 表示渐变到达图形的右上角。

总结

在这个例子中，可视化到的效果是一个从左到右的水平渐变：
渐变从坐标(0, 0)（左上角）开始，到坐标(1, 0)（右上角）结束，即渐变仅在 X 轴方向进行变化，而在 Y 轴上保持不变。
渐变的颜色分布基于 offset 值。offset 值在 0 到 1 之间，控制颜色在渐变中的位置：
{ offset: 0.2182, color: ‘#784FFF’ }: 表示在 21.82%的位置使用颜色 #784FFF。
{ offset: 0.7577, color: ‘#9046FE’ }: 表示在 75.77%的位置使用颜色 #9046FE。

graphic 组件详解

在此配置中，graphic 用于绘制自定义的线条，取代了默认的 splitLine 分隔线。这里是 graphic 的详细结构和功能说明

graphic: [  
    {
     
      type: 'line', // 指定绘制的类型为线  
      id: 'line1', // 每个 graphic 元素的唯一 ID，用于更新或删除元素时使用  
      $action: 'replace', // 指定该元素的操作行为，这里为替换  
      shape: {
    // 定义线的形状  
        x1: 432, // 起点 X 坐标  
        y1: 168, // 起点 Y 坐标  
        x2: 449, // 终点 X 坐标  
        y2: 199 // 终点 Y 坐标  
      },  
      style: {
    // 定义线的样式  
        stroke: '#FFF', // 线条的颜色，这里是白色  
        li