标签：光点 img data image var 动效 symbolSize 折线图 Ecarts

近期有个需求，在echarts折线图上的折线，添加一个可以随着折线路径跑动的光点。研究了好一会，然后需求取消了！

// 图表数据
var XName = ["第一季度", "第二季度", "第三季度", "第三季度"] // x轴
var YData = [1, 2, 3, 4] // y 轴
/*
* 图片
* 1、网络图片：image:// + 图片链接
* 2、base64 图片：image:// + base64
* 3、path 路径: path:// + 矢量路径
*/
var img = 'image://http://www.yathin.cn/assets/img/20201126113012111.png'
// 光点动画数据， x轴 与 y轴 对应数据的数组
var data = [{
    coords: [
        ['第一季度', 1],
        ['第二季度', 2],
        ['第三季度', 3],
        ['第四季度', 4]
    ]
}]

// 此处省略 图表其他的配置代码
series: [
     // 折线
     {
        symbolSize: [26,72],
        symbol: img,
        name: '季度数据',
        type: "line",
        data: YData,
        itemStyle: {
            normal: {
                borderWidth: 3,
                color: '#FFFECD',
            }
        }
    },
    // 光点
    {
        name: '光点',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        symbolSize: 30,
        polyline: true, // 多线段
        effect: {
            show: true,
            trailLength: 0.2, // 尾迹长度
            period: 6, // 特效动画的时间, 走完全程的时长
            symbolSize: [26,72],
            symbol: img
        },
        lineStyle: {
            normal: {
                width: 1,
                opacity: 0
            }
        },
        data: data
    }
]

Tips: 光点动画不适用平滑曲线

官方文档链接: https://echarts.apache.org/zh/option.html#series-lines

标签：光点,img,data,image,var,动效,symbolSize,折线图,Ecarts
来源： https://www.cnblogs.com/yathin/p/14041511.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。