辞旧迎新 2022 我用Echarts画了个大老虎，祝大家新春快乐，虎虎生威啊。2022！虎虎生威呀我用Echar

“PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛”

辞旧迎新 2022 虎虎生威呀我用Echarts画了个大老虎，祝大家新春快乐，虎虎生威啊。

新春佳节，祝大家虎年大吉大利，大显身手，虎气冲天。

GIF 2022-1-12 9-23-38.gif

为了响应国家三胎政策，本来想搞个整整齐齐一家人在一起，但是想想大家，还是算了。（其实是iconfont里凑不到整整齐齐啊）

使用技术 Echarts

对于Echarts来说，想玩转于各种自定义图形，丰富图表的视觉表达，设计师们常常会为视图搭配上不同的图标。但ECharts官方所提供的预置图标样式却是有限的，无法匹配设计师们的创造性。
所以Echarts也为大家提供了自定义的方法，主要有以下两种。查看文档即可。
URL

通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

URL 为图片链接，例如：

'image://http://xxx.xxx.xxx/a/b.png'

URL 为 dataURI ，一般为base64格式，例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

path

通过 'path://' 将图标设置为任意的矢量路径，例如：

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30

对于这两种方式的优缺点，大家可自行去查询。

正式虎虎生威咯

1、画老虎，我采用的是引入svg，得到path路径的方式。

由于自己的AI 水平不高，所以我是去iconfont，找了个老虎的svg图片，直接下载就好，可以直接下载svg代码，真是太好了。

获取path路径：我们得到的svg标签是这种，对于path路径来说，只需要的是d属性就好了，所以接下来，我们要进行一波dom的操作，拼接出path路径

得到了path咯，大功告成了（一半）

    const pathDom = document.getElementsByTagName('path');
    let pathList = '';
    for (let i = 0; i < pathDom.length; i++) {
      pathList += pathDom[i].getAttribute('d')
    }
    console.log("🚀 ~ file: test.html ~ line 70 ~ pathList", pathList)

2、接下来，就是Echarts常规操作，渲染虎虎生威

波纹流动效果：引用的是# echarts-liquidfill 有很多例子，大家可以自己试试

GIF 2022-1-12 9-38-36.gif

配置代码

  type: 'liquidFill',
          data: [0.7, 0.8, 0.75, 0.21, 0.2, 0.13, 0.1, ],
          radius: '90%',
          waveLength: '90%',
          waveHeight: '10',
          amplitude: 10,
          z: 2,
          outline: {
            show: false
          },

渐变颜色效果：在echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient
- 对于渐变颜色设置,大家可自行参考官方文档

// 颜色渐变函数 前四个参数分别表示四个位置依次为
// 右下左上
         color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                offset: 0,
                color: "#fcaa03"
              },
              {
                offset: 0.3,
                color: "#ffb41a"
              },
              {
                offset: 0.6,
                color: "#fd4932"
              },
              {
                offset: 1,
                color: "#ffd20e"
              }
            ]),

- 基于各种渐变效果，我们就能随心所欲的去制作我们想要的渐变咯。
对于右下角的虎虎生威涟漪效果，使用的是effectScatter动效去实现，也可在Echarts官方文档找到。

GIF 2022-1-12 9-36-36.gif

series[i]-effectScatter.type

`将 ECharts 系列的 type 设置为 effectScatter 以控制带有涟漪特效的散点图。`

 - series[i]-effectScatter.**name**

该系列名称，用于 tooltip 的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。

配置代码

    {
          name: '',
          type: "effectScatter",
          rippleEffect: {
            period: 10,
            scale: 12,
            brushType: 'stroke',
            color: new echarts.graphic.LinearGradient(1, 0, .3, 1, [{
              offset: 0,
              color: '#f8e111',
            }, {
              offset: 0.3,
              color: '#fca700',
            }, {
              offset: 0.5,
              color: '#ef6301',
            }, {
              offset: 1,
              color: '#f9f205',
            }]),
          },
          z: 0,
          symbolPosition: 'end',
          symbol: path,
          "symbolSize": [80, 100],
          "symbolOffset": [0, -9],
          itemStyle: {
            normal: {
              color: 'rgba(0, 0, 0, 0)',
            }
          },
          data: [0]
        },

至此，虎虎生威差不多就是这样咯

灵感来源,大家可以尽情发挥大佬云集

完整代码seesee!

辞旧迎新 2022 我用Echarts画了个大老虎，祝大家新春快乐，虎虎生威啊。

辞旧迎新 2022 虎虎生威呀 我用Echarts画了个大老虎，祝大家新春快乐，虎虎生威啊。

新春佳节， 祝大家虎年大吉大利，大显身手，虎气冲天。