基于echarts实现折线图流光效果【支持曲线】

基于echarts实现折线图流光效果

基于echarts + vue3 封装实现echarts流光效果

实现效果

使用方法

insall

npm install flowline-echarts-vue3 --save
// 需要额外安装echarts依赖
npm install echarts --save

组件+样式引入

import { FlowLineEcharts } from "flowline-echarts-vue3";
import "flowline-echarts-vue3/style.css";

组件使用

定义echarts options内容

const optionsProps = {
    xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {},
    series: [
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            symbol: "none",
            smooth: true,
            flowLineConfig: {
                enabled: true,
                colorStep: ["#CF0B4499", "#CF0B4400"],
                radiusStep: [2, 2],
                lineLength: 100,
                dur: 4,
                animateStep: 0.01,
                delay: 100,
            }
        },
    ]
}

echarts options特殊配置说明

/** 主要在series中折线图的flowLineConfig配置流光效果, 以下为默认值即对应解释
{
    enabled: true, // 开启关闭流光效果
    colorStep: ["#CF0B4499", "#CF0B4400"], // 流光效果头尾颜色，如果一致则为纯色，如果为不同颜色，会自动生成渐变色
    radiusStep: [2, 2], // 流光头尾半径长度，设置不同长度可展示彗星效果
    delay: 100, // 两次流光动画之间循环的间隔
    //以下三个值协同控制流光长度
    lineLength: 100, // 流光是由lineLength个圆进行动画运动组成的视觉效果，此处定义圆的个数
    dur: 4, // 流光的圆沿折线图执行完一次动画所需要的时间
    animateStep: 0.01, // 上一个圆开始运动后，下一个圆开始运动的时间间隔，如果流光运动速度较快，防止出现明显锯齿，需要调小该值
}
*/

将optionProp传给组件

<flow-line-echarts :options-prop="optionsProps" ref="flowLineRef"></flow-line-echarts>

调用组件setOption方法

const flowLineRef = ref();
// 如果options是动态变更的值，则需要使用nextTick，等待组件读取options成功后调用
nextTick(() => {
    flowLineRef.value.setOptions();
});

tip: 本组件是基于echarts svg渲染模式实现的，如果您需要渲染的echarts图形存在svg模式不可用的情况，需要将svg模式不可用的部分独立出来单独渲染。