Echarts实现自定义标注与动画

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情 >

---

最终效果图:

本文介绍如何通过echarts实现上述效果:

step 1 下载安装echarts并引入

我是在vue项目中使用的,使用npm安装,在所需的组件地方import

import * as echarts from 'echarts'

step 2 绘制圆环

实质上圆环是Pie只是redius的占比不是100%;

step 3 圆环中心部分的字体设置

因为中心部分的样式比较复杂所以我采用的是formatter与rich结合实现,其中根据参数设置了三种表现形式

formatter: ()=>{
    // 当传入图标时,设置中心文本为空 效果如图一
    // 图标部分的实现在下一步动画的实现中说明
    if(this.centerIcon){
        return ``
    }
    // 当传入单位时,设置双行文本样式 效果如图二
    else if (this.centerUnit) {
    // \n可以实现换行
        return `{tit|${ this.centerTit }}\n{unit|${this.centerUnit}}`;
    }
    // 当只有标题时,单行文本,效果如图三
    else {
        return `{tit|${ this.centerTit }}`;
    }
},
rich: {
// 自定义的样式部分
    tit: {
        fontSize: 16,
        color: '#fff',
        fontFamily: 'DS-DIGI-1',
        lineHeight: 22,
    },
    unit: {
        color: '#fff',
        fontSize: 10,
        display: 'inline-block',
        lineHeight: 25,
        textAlign: 'center',
    },
},

图一(图标款)

图二(双行文本款)

图三(单行文本款)

step 4 实现中心运动的圆环

中心的动画图片是通过graphic插入一个image,再为image添加旋转的动画效果; 通过keyframeAnimation我们可以实现旋转,平移,缩放等一系列的动画;

graphic: {
    elements: [
        {
            type: 'image',
            z: 3,
            // 设置图片的样式
            style: {
                image: img,
                width: 80,
                height: 80,
            },
            left: 'center',
            top: 'center',
            // 旋转动画
            keyframeAnimation: [{
                // 动画时长，单位 ms
                duration: 6000,
                // 设置旋转动画是否循环
                loop: true,
                // 动画的关键帧
                keyframes: [{
                // percent为关键帧的位置,0为第一个,1为最后一个
                    percent: 0,
                    easing: 'linear',
                    rotation:0,
                    transition:['rotation']
                }, {
                    percent: 1,
                    easing: 'linear',
                    // 旋转角度采用弧度值
                    rotation: Math.PI * 2,
                    transition:['rotation']
                }],
            }],
            // 旋转的中心点
            origin:[40,40]
        },
        // 单一的图片  设置中心图标
        {
            type: 'image',
            z: 4,
            style: {
                image: this.centerIcon,
                width: 30,
                height: 30,
            },
            left: 'center',
            top: 'center',
        },
    ],
},

step 5 圆环的间隔

我的圆环间隔是通过在每条数据中间插入一条空数据实现的,因为我也不采用原有的图例,所以没有太大的影响,因为原有的通过border实现的间隔无法采用透明,暂时没有想到更好的解决办法

// 遍历数据更改数据结构与颜色array
this.requestData.forEach((item, index)=>{
    if (item.value !== 0) {
        data1.push(item, {
            name: '',
            value: sum / 70,
            labelLine: {
                show: false,
                lineStyle: {
                    color: 'transparent',
                },
            },
            itemStyle: {
                color: 'transparent',
            },
        });
        if(this.colors[index]){
            resetColor.push(this.colors[index],'transparent')
        }else{
            resetColor.push(this.getRandomColor(),'transparent')

        }
    }

});

step 6 自定义实现图例

因为我们设计给的图例有很多小设计,通过echarts复原的话比较难以实现,所以我通过css与dom自己写的样式,只是跟echarts采用了同样的数据结构与颜色,其中颜色的图标通过伪类定位与currentColor实现,currentColor的色值始终与字体颜色保持一致;

step 7 将自定义的图例绑定

为了使我自定义的图例看起来更像是echarts内部的图例,我是为图例绑定了鼠标滑过的高亮实现,通过dispatchAction实现

// 其中myChart为我实例化的echarts
// 添加高亮
myChart.dispatchAction({
    type: "highlight",
    name
});

// 高亮消失
myChart.dispatchAction({
     type: "downplay",
     name
 });

如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧