“PK creative Spring Festival, I am participating in the” Spring Festival Creative submission contest “, please see: Spring Festival Creative Submission Contest”

I used Echarts to draw a big tiger, wish everyone a happy New Year, tiger tiger.

In the New Year, I wish you all a prosperous and prosperous Year of the Tiger.

Preview tiger tiger alive

In order to correspond to the national three-child policy, originally wanted to make a neat family together, but think about everyone, or forget. (In fact, the iconfont couldn't get it all together.)Copy the code

Use the technology Echarts

  • For Echarts, to play with a variety of custom graphics to enrich the visual expression of the chart, designers often match the view with different ICONS. However, ECharts officially provides a limited number of preset icon styles that do not match the creativity of the designers.
  • So Echarts also provides you with custom methods, there are two main methods. Just look at the documentation.
  • URL

Set to image with ‘image:// URL ‘, where URL is the link to the image, or dataURI.

The URL is an image link, for example:

'image://http://xxx.xxx.xxx/a/b.png'
Copy the code

The URL is dataURI in base64 format, for example:

'image://data:image/gif; base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUh wFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'Copy the code
  • path

Set the icon to any vector path with ‘path://’, for example:

C16.8 'path: / / M30.9, 53.2, 53.2, 5.3, 41.7, 5.3, 27.6 S16.8, 2,30.9, 2 c45,,56.4 2, 13.5, 56.4, 27.6 S45, 53.2, 30Copy the code
  • For the advantages and disadvantages of these two ways, you can query.

It’s official

1. To draw a tiger, I used SVG to get the path.

  • On one’s ownAINot very good, so I’m going toiconfont, found a tiger SVG image, direct download is good, can directly download SVG code, it is really good.

  • Get path path: The SVG tag we get is this, forThe path wayWell, all it takes isD property is goodSo next, we’re going to do oneWave DOM manipulation, joining together theThe path path

  • gotThe path!.Half done
    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)
Copy the code

2. Next, it’s Echarts’ normal operation, rendering the tiger

  • Ripple flow effect: # is referenced echarts-liquidfillThere are lots of examples, and you can try them out for yourself

Configuration codeCopy the code
  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
          },
Copy the code
  • Gradient color effect: inechartS is used when drawing diagrams if necessarygradient, the built-in gradient generator of Echarts should be usedecharts.graphic.LinearGradient
    • For gradient color Settings, please refer to the official documentation
// The first four parameters of the color gradient function represent four positions respectively
// Right bottom left top
         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"}]),Copy the code
    • Based on the various gradients, we can make any gradients we want.

  • EffectScatter is used for the ripple effect in the lower right corner, which can also be found in the Echarts documentation.

  • series[i]-effectScatter.type
Set Type of ECharts to effectScatter to control scatter with ripple effects. ` - series[i]-effectScatter.**name**Copy the code

This series name is used to display tooltip, filter legend, and specify the corresponding series when setOption updates data and configuration items.

  • Configuration code
    {
          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]},Copy the code

So far, that’s about it

Inspiration source, everyone can play as big as the crowd

The complete codeseesee!