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

虎年100%祝福

爆竹声中一岁除，春风送暖入屠苏
千门万户瞳瞳日，总把新桃换旧符

• 这是宋代诗人王安石所描写的对过年氛围的诗句，相信大家都耳熟如详。

来自于Echarts Make A pie

• 预览棒棒糖形

Echarts的自定义图形

• 此图形主要分为X，Y轴
• X轴的实现，正常写法即可，多是祝福而已

      xAxis: [{
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fccd0e',
              fontSize: 18
            }
          },
          offset: 5,
          data: ['步步高升', '余钱多多', '心想事成', '万事如意', '恭喜发财', '自强不息', '桃开连理', '一帆风顺', '身体健康']
        },

• Y轴实现

• 自定义图形的实现（在于对custom series的定义）

引自W3c 由于图表的类型多种多样，要让 ECharts 内置支持所有类型的图表是很难的，有很多小众的需求 ECharts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方式要尽可能得简单，例如图形元素创建和释放、过渡动画、tooltip、数据区域缩放（dataZoom）、视觉映射（visualMap）等功能，尽量在 ECharts 中内置得处理，使开发者不必纠结于这些细节。综上考虑形成了 自定义系列（custom series）。

• eg:

        {
          name: '外框',
          type: 'bar',
          xAxisIndex: 2,
          barGap: '-100%',
          data: [23, 63, 23, 63, 23, 63, 23, 63, 23],
          barWidth: 4,
          itemStyle: {
            normal: {
              color: function (params) {
                return colors[params.dataIndex];
              },
              barBorderRadius: 50,
            },
          },
          z: 0,
        },

• 动态流动效果，引用的是 echarts-liquidfill

        {
          type: 'liquidFill',
          radius: '25%',
          center: ['10%', '55%'],
          data: [1], // data个数代表波浪数
          color: ['#5470c6'],
          outline: { // 轮廓设置
            show: true,
            borderDistance: 8, // 边框与球中间间距
            itemStyle: {
              borderWidth: 5,
              borderColor: '#5470c6',
              shadowBlur: 10,
              shadowColor: '#cf6102'
            }
          },
          backgroundStyle: {
            shadowColor: 'rgba(0, 0, 0, 0)',
            opacity: 0,
          },

          label: {
            textStyle: {
              color: '#fccd0e',
              fontSize: 28
            }
          }
        }

• 以上两种效果汇聚一起，就形成了最简单明了的祝福。 灵感来源,大家可以尽情发挥大佬云集
• 可惜了， 大神云集的社区即将失去了，所以尽可能的学习各种特效，分享给大家，顺便分享新年祝福。 完整代码seesee!