周末在家学习echarts

╰+哭是因爲堅強的太久メ 2022-10-12 12:17 212阅读 0赞

周末在家没事，做了两个数据可视化的echarts图表，学到了很多有关echarts的知识点。现在总结一下，供各位同学一起学习，成长。

虽然工作中很少遇到那么炫酷的图表效果，但我们作为一名前端还是要不断地开阔视野，夯实基础

### 需求 ###

图表的练习  
![在这里插入图片描述][20210707192135657.png]g.append(‘g’).call(yAxis)

图1-1

![以上为土1-2][1-2]  
以上为图1-2

### 效果图 ###

![图2-1][2-1]  
以上为 图2-1

![图2-2][2-2]  
图2-2

### 思路 ###

#### 分析需求图1-1 ####

首先是需求图1-1. 是一个典型的双y轴，柱形图加折线图。可以使用这个案例来改造。  
[折柱混合][Link 1]  
双y轴的话 主要是使用下面代码配置

yAxis: [
        { 
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: { 
                formatter: '{value} ml'
            }
        },
        { 
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: { 
                formatter: '{value} °C'
            }
        }
    ],

对于图表中一些自定义的元素，如，右上角的二个元素，如下图3-1  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]  
这两个元素可以使用 echarts中的 `graphic` 的 `elements` 属性。  
如下图 3-2时对 `graphic` 属性的简短解释。可以使用这个属性将一些图片，文本，圆，线，多面图，矩形，线，元素群组，添加到图表的指定位置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]  
此外由于该图表有二个产品，一个全部。所以使用的是dataset的数据源来存储图表的数据。

如下是`全部产品`的数据

const dataseSource = [
          ['product', '已交付', '累计百分比'],
          ['批次1', 850, 21],
          ['批次2', 1500, 36],
          ['批次3', 1800, 43],
          ['批次4', 2700, 65],
          ['批次5', 2600, 72],
          ['批次6', 2700, 85],
          ['下一批次', 3220, 80],
        ]

点击产品D，或产品E ，只要修改数据源，重新设置图表options就可以了。

此外还有一点，就是折线图的label属性是个动态值，大于50，字体变红，并增加一个警告图标。  
此方案是这样实现的,主要是用 label中的`rich` 属性与 `formatter`属性.  
rich 用于设置样式，就像为css中的class增加样式。  
而 formatter 则可为不同的折线点，设置不用的样式。使用这种写法 `{b| value}` b为样式的名称，value为要显示的文本，或值。

{ 
      name: '累计百分比',
      type: 'line',
      label: { 
          show: true,
          distance: 5,
          rich:{ 
              red:{ color:'red',fontSize:14},
              b: { 
                  backgroundColor: { 
                    image: 'https://img-blog.csdnimg.cn/2021070312161116.png'
                  },
                  height: 30,
                },
          },
          formatter: function(params) { 
              const {  data } = params;
              const value = data[2]
            if (value > 50) { 
              return "{red|" + value + "%}{b| }"
            }
            return value+"%"
          }
      },
      yAxisIndex: 1,
    }

#### 分析需求图1-2 ####

需求图1-2 难点是在贴图的处理上。  
由于是一个类目累加的柱状图，又称堆叠柱状图。因此可以基于该图例改造实现。  
[堆叠柱状图][Link 2]  
堆叠柱状体 主要是在 `series` 中设置该属`stack: 'total',` 及可将同样设置`stack: 'total'` 的series 。堆积起来。  
此外，该图例需要开始 贴图。不开启，设置了贴图是不会显示的。

aria: { 
        enabled: true,
        decal: { 
            show: true,
        }
    }

设置蓝色的 已用产能 贴图。

itemStyle:{ 
        decal:{ 
            symbol: 'rect',
            symbolSize: 1,
            maxTileWidth:512,
            maxTileHeight:512,
            symbolKeepAspect: true,
            dashArrayX: [1,0],
            dashArrayY: [2,2],
            color: '#5470c6',
            // rotation: 0.5235987755982988
        }
    }

有关 属性`decal` 的更多解释 请看。  
[decal详细解释][decal]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 2]

### 代码 ###

#### 图1-1的核心代码 ####

#### 图1-2的核心代码 ####

option = { 
        // color: ['#5470c6', '#fac858'],
        color: ['#fff', '#fff'],
        legend: { 
            data: ['已用产能', '剩余产能']
        },
        xAxis: { 
            type: 'category',
            data: ["制芯","组芯","熔炼","浇注","冷却","落砂","切割","抛丸","打磨","检测"]
        },
        yAxis: { 
            type: 'value',
            axisLabel:{ 
              formatter: '{value}%'
            }
        },
        series: [
            { 
                name: '已用产能',
                type: 'bar',
                stack: 'total',
                label: { 
                    show: true,
                    formatter:'{c}%'
                },
                emphasis: { 
                    focus: 'series'
                },
                data: [76,54,62,59,67,81,84,92,96,83],
                itemStyle:{ 
                    ....
                }
            },
            { 
                name: '剩余产能',
                type: 'bar',
                stack: 'total',
                label: { 
                    show: true,
                    formatter:'{c}%'
                },
                emphasis: { 
                    focus: 'series'
                },
                data: [24,46,38,41,33,19,16,8,4,17],
                itemStyle:{ 
                    decal:{ 
                       ....
                    }
                }
            },
        ],
        aria: { 
            enabled: true,
            decal: { 
                show: true,
            }
        }
    };

将代码复制到 echarts的编辑器里就可以实时预览效果了。  
https://echarts.apache.org/examples/zh/editor.html?c=line-simple

后续的我会给大家详细讲解echarts中的贴花。 这是一个非常具有表现力，并且可以玩出花的特性。  
大家敬请期待。

[20210707192135657.png]: /images/20221005/d964251424264b2bb58955b980cc8eb0.png
[1-2]: /images/20221005/22bbe83de06b4e2d90220da7326a08f4.png
[2-1]: /images/20221005/c762372c3ebc4128be48091aad13b685.png
[2-2]: /images/20221005/efff3d5a85014176b898bd6c2861e607.png
[Link 1]: https://echarts.apache.org/examples/zh/editor.html?c=mix-line-bar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221005/1514fd36f4eb4664b8b570063b88bb91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]: /images/20221005/98a74a5d21ea452793a04804b606d2ad.png
[Link 2]: https://echarts.apache.org/examples/zh/editor.html?c=bar-stack
[decal]: https://echarts.apache.org/zh/option.html#series-line.itemStyle.decal
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 2]: /images/20221005/a705898fb61243a49fbdbc2b2d41273c.png