echarts实现炫酷科技感的流光效果

妍崽崽@

于 2024-04-01 14:41:30 发布

阅读量547

点赞数 8

分类专栏： echarts 文章标签： vue.js 前端 echarts

本文链接：https://blog.csdn.net/weixin_44727080/article/details/137232263

版权

echarts 专栏收录该内容

14 篇文章 10 订阅

订阅专栏

前言：

echarts实现炫酷科技感的流光效果

效果图：

实现步骤：

1、引入echarts,直接安装或者cdn引入

npm i echarts

https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js

2、封装 option方法，第一个数据是折线数据，第二个是流动的点

commonOption(name,xData,yData){
          let dtList = []
          xData.forEach((item,i)=>{
            let arr = []
            arr.push(item)
            arr.push(yData[i])
            dtList[i] = arr
          })
          return {
            title: {
              text: name,
              textStyle: {
                color: "#fff",
                fontSize: 16,
                fontWeight: "500",
              }
            },
            "grid": {
              "containLabel": true,
              "bottom": "20",
              "top": "40",
              "left": "20",
              "right": "20"
            },
            "xAxis": {
              "triggerEvent": true,
              "axisLabel": {
                "show": true,
                "fontSize": 12,
                "color": "#fff",
                "align": "center",
                "verticalAlign": "top"
              },
              "axisLine": {
                "show": false
              },
              "axisTick": {
                "show": true,
                "lineStyle": {
                  "show": true,
                  "color": "#0B3561",
                  "width": 2
                }
              },
              "data": xData
            },
            "yAxis": [{
              "axisLabel": {
                "interval": 0,
                "show": true,
                "fontSize": 14,
                "color": "#fff"
              },
              "axisLine": {
                "show": false
              },
              "axisTick": {
                "show": false
              },
              "splitLine": {
                "lineStyle": {
                  "type": "dashed",
                  "color": "rgba(255,255,255,0.15)"
                }
              }
            }],
            "series": [{
              "name": "demo1",
              "type": "line",
              "smooth": false,
              "symbol": "circle",
              "symbolSize": 3,
              "showSymbol": false,
              "lineStyle": {
                "normal": {
                  "width": 2,
                  "shadowColor": "#159AFF",
                  "shadowBlur": 8
                }
              },
              "itemStyle": {
                "normal": {
                  "color": "#159AFF"
                }
              },
              "data": yData
            },{
              "name": "demo1",
              "type": "lines",
              "polyline": true,
              "showSymbol": false,
              "coordinateSystem": "cartesian2d",
              "effect": {
                "trailLength": 0.3,
                "show": true,
                "period": 6,
                "symbolSize": 4,
                "loop": true
              },
              "lineStyle": {
                "color": "#fff",
                "width": 0,
                "opacity": 0,
                "curveness": 0,
                "type": "dashed"
              },
              "data": [{
                "coords": dtList // 动态的图
              }]
            }]
          }
        },

3、然后方法中使用

let myChart = echarts.init(dom);

let arr1 = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
let arr = [11, 12, 10, 11, 10, 10, 11]
let option = this.commonOption('学员一队',arr1,arr)

myChart.setOption(option);