echarts折线图让某一个点闪烁，echarts闪烁动画。

置顶 已于 2022-10-28 16:08:28 修改
阅读量3.8k 收藏 13
点赞数 4
分类专栏： vue 前端 echarts 文章标签： echarts 前端 javascript
于 2022-10-28 15:44:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q4717529/article/details/127572945
版权
vue 同时被 3 个专栏收录
121 篇文章 15 订阅
订阅专栏
前端
7 篇文章 0 订阅
订阅专栏
echarts
2 篇文章 0 订阅
订阅专栏

先贴效果图

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

先封装一个js

  import * as echarts from "echarts";

export const zhexiantuChart = (id, data) => {
  const { xData, yData, cart } = data;
  const color = ["#0FF9A9", "#1F82FF", "#E2AE00"];
  let series = [];
  let legend = [];
  yData.map((item, index) => {
    legend.push(item.name);
    console.log(item);
    series.push(
      {
        ...item,
        type: "line",
        smooth: true,
      },
      // 闪烁点的重点是以下配置
      {
        // 设置涟漪特效动画
        type: "effectScatter",
        // 有三种: cartesian2d(二维的直角坐标系) polar(极坐标系) geo(地理坐标系) ,此需求使用cartesian2d
        coordinateSystem: "cartesian2d",
        // 单个闪烁点 ↓
        // data: [{value:[xData[4],item.data[4]],symbolSize:8}], //2d坐标系--[x轴, y轴, 标记大小]
        data: cart, //2d坐标系--[x轴, y轴, 标记大小]

        // 多个闪烁点 ↓
        // 方法一 -- start:
        // data: [{value:['Mon',820],symbolSize:10},{value:['Tue',932],symbolSize:10}],
        // 方法一 -- end

        // 方法二 -- start:
        // data: [['Mon',820],['Tue',932]], //2d坐标系--[x轴, y轴, 标记大小]
        // symbolSize: 10,
        // 方法二 -- end

        // 何时显示特效:'render'-绘制完成后显示特效 'emphasis'-高亮（hover）的时候显示特效
        showEffectOn: "render",
        // 涟漪特效配置
        rippleEffect: {
          // 波纹的绘制方式,可选'stroke'和'fill'
          brushType: "stroke",
        },
        hoverAnimation: true,
        itemStyle: {
          normal: {
            color: "#1F82FF",
            shadowBlur: 30,
            shadowColor: "#fff",
          },
        },
        zlevel: 1,
      }
      // type: "line",
      // stack: "Total",
      // lineStyle: {
      //   normal: {
      //     width: 2,
      //   },
      // },
      // smooth: true,
      // symbolSize: 4,
      // color: color[index],
      // ...item,
    );
  });
  let chart = echarts.init(document.getElementById(id));
  chart.clear(); //画图之前，清除内容
  chart.setOption({
    legend: {
      x: "center",
      y: "bottom",
      itemWidth: 21,
      itemHeight: 7,
      textStyle: {
        fontSize: 10,
        color: "#21E4FE",
      },
      data: legend,
      selectedMode: true, //取消图例上的点击事件
    },
    grid: {
      top: "12%",
      left: "2%",
      right: "3%",
      bottom: "18%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,72,176,.9)",
      borderColor: "#1ED1EB",
      formatter: (res) => {
        let str = "";
        res.map((item) => {
          str += `<p style="font-size: 12px;line-height: 22px;color: #fff;">${item.seriesName}<span style="padding-left: 10px;">${item.value}</span></p>`;
        });
        const htmlStr = `<div class="tooltip">
                          <p style="font-size: 14px;line-height: 20px;color: #fff;">${res[0].name}</p>
                          <div style="padding-top: 5px;">${str}</div>
                        </div>`;
        return htmlStr;
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: true, // 坐标轴两边是否留白
      axisLabel: {
        interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
        textStyle: {
          color: "#21E4FE",
          fontSize: 10,
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#1C52A2",
          width: 1,
        },
      },
      axisTick: {
        show: false, //不显示刻度
      },
      data: xData,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#21E4FE",
          fontSize: 10,
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#1C52A2",
          width: 1,
        },
      },
    },
    series,
  });
};

在页面中

    <div id="zhexiantu" class="chart"></div>
    <button @click="getto">变化列表</button>
    <button @click="getlist(list[0])">选中第一个月份</button>
    <button @click="getlist(list[1])">选中第二个月份</button>
    <button @click="getlist(list[2])">选中第三个月份</button>
    <button @click="getlist(list[3])">选中第四个月份</button>
    <button @click="getlist(list[4])">选中第五个月份</button>

script

<script>
import * as echarts from "echarts";
import { zhexiantuChart } from "@/utils/zhexiantu";

export default {
  data() {
    return {
      list: [
        {
          time: "2022-06",
          num: "133",
        },
        {
          time: "2022-07",
          num: "225",
        },
        {
          time: "2022-08",
          num: "369",
        },
        {
          time: "2022-09",
          num: "53",
        },
        {
          time: "2022-10",
          num: "97",
        },
      ],
      title: [],
      nums: [],
      ble: "",
      btl: "",
    };
  },
  mounted() {
    this.list.map((item, index) => {
      this.title.push(item.time);
      this.nums.push(item.num);
    });

    zhexiantuChart("zhexiantu", {
      xData: this.title,
      yData: [
        {
          data: this.nums,
        },
      ],
      cart: [{ value: [this.list[4].time, this.list[4].num], symbolSize: 8 }],
    });
  },
  methods: {
    getlist(data) {
      console.log(data);

      zhexiantuChart("zhexiantu", {
        xData: this.title,
        yData: [
          {
            data: this.nums,
          },
        ],
        cart: [{ value: [data.time, data.num], symbolSize: 8 }],
      });
    },
    getto() {
      this.list = [];
      this.title = [];
      this.nums = [];
      this.list = [
        {
          time: "2022-07",
          num: "133",
        },
        {
          time: "2022-08",
          num: "225",
        },
        {
          time: "2022-09",
          num: "3691",
        },
        {
          time: "2022-10",
          num: "531",
        },
        {
          time: "2022-11",
          num: "971",
        },
      ];
    },
    gettos() {
      this.list = [
        {
          time: "2022-07",
          num: "133",
        },
        {
          time: "2022-08",
          num: "225",
        },
        {
          time: "2022-09",
          num: "3691",
        },
        {
          time: "2022-10",
          num: "531",
        },
        {
          time: "2022-11",
          num: "971",
        },
      ];
    },
  },
  watch: {
    list: {
      handler(val) {
        console.log(val);
        this.list.map((item, index) => {
          this.title.push(item.time);
          this.nums.push(item.num);
        });
        console.log(zhexiantuChart);
        zhexiantuChart("zhexiantu", {
          xData: this.title,
          yData: [
            {
              data: this.nums,
            },
          ],
          cart: [
            { value: [this.list[4].time, this.list[4].num], symbolSize: 8 },
          ],
        });
      },
    },
  },
};
</script>

样式 随便写的

<style scoped>
.index {
  height: 100vh;
}
#zhexiantu {
  width: 96vw;
  height: 30vh;
  border: 1px solid red;
}
</style>

vue3 小来一段

1、setup函数

总结：Vue3.0中一个新的配置向，值为一个函数，组件中所有用到的:数据、方法等等，均要配置在setup中。

setup函数的两种返回值：

若返回一个对象，则对象中的数据、方法、在模板中均可直接使用（重点）

<script setup>
    var name = "marry";
    var obj = {
        age: 18,
        gender: "女",
        class: '二'
    }
</script><template>


    <div>
        <span>{{obj.class}}班的{{name}}是一名{{obj.gender}}生,今年{{obj.age}}岁了~~~</span>
    </div>
</template>
//二班的marry是一名女生,今年18岁了~~~

若返回一个渲染函数，则可以自定义渲染内容（了解）

//页面中会显示一个h1标签,标签的内容是"vue3返回渲染函数"

<script>
import {h} from 'vue'
export default {
  setup() {
    // 返回一个渲染函数
    // h相当于document.CreateElement()
    return ()=>{return h("h1","vue3返回渲染函数")}
  }
}
</script>

注意：

虽然它可以使用Vue2.0的配置，但是不要2.0 \3.0一起混用；
Vue2.x配置（data，methods，computed…）中可以访问setup中的属性，方法，但在setup中不能访问到Vue2.x配置(data，methods，computed…)
如有重名，setup优先
setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性
setup在组件加载期间，只会运行一次。
语法糖：在script里面加入 setup ， 这个属性会让打包工具打包时，直接帮我们把setup函数内部声明的变量、函数return 然后组件就可以直接使用
setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数
执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）
setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。
从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value

2、ref函数

总结：定义一个响应式的数据

import {ref} from “vue”

语法：const xxx = ref(“value”)

创建一个包含响应式的数据的引用对象(reference对象)
js中操作数据：xxx.value
模板中读取数据不需要.value,直接
{{xxx}}
注意

接收的数据类型可以是基本数据类型也可以是引用数据类型（对象，数组等 xxx.value.属性值/[下标]）
基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的
对象类型的数据：内部“求助”了Vue3.0的一个新的函数------reactive函数

<script setup>
    import {
        ref
    } from "vue"
    var name = "marry";
    var obj = ref({
        age: 18,
        gender: "女",
        class: '二'
    })function change() {
    obj.value.age++
}

</script>

<template>
    <div>
        <span>{{obj.class}}班的{{name}}是一名{{obj.gender}}生,今年{{obj.age}}岁了~~~</span>
        <button @click="change">年龄+1</button>
    </div>
</template>

3、reactive函数

作用：定义一个对象类型的响应式数据(基本数据类型别用它，用ref函数)
引入：import {reactive} from ‘vue’
语法：const 代理一个对象 = reactive(被代理的对象) 接收一个对象（或数组），返回一个代理器对象（proxy对象）
reactive定义的响应式数据是“深层次的”
内部基于ES6的Proxy实现，通过代理对象内部的数据都是响应式的

<script setup>
    import {
        reactive
    } from "vue"
    var name = "marry";
    var obj = reactive({
        age: 18,
        gender: "女",
        class: '二'
    })function change() {
    obj.age++
}

</script>

<template>
    <div>
        <span>{{obj.class}}班的{{name}}是一名{{obj.gender}}生,今年{{obj.age}}岁了~~~</span>
        <button @click="change">年龄+1</button>
    </div>
</template>

ref \reactive 区别用法？

都是用来放响应式数据；
引入方式: ref: import {ref} from ‘vue’ / import {reactive} from ‘vue’
ref( )里面放的是基本数据，和嵌套层数不是很深的引用数据； / reactive( )基本数据不用他，里面放嵌套层数比较深的引用数据；
ref 用里面的数据时，数据方法**.value**里面， / reactive 用里面的数据时 ，直接使用。
响应式设计原理：ref： 监听了value的改变，劫持value属性的setter ,getter ,因此ref一般用在基本数据，或者嵌套不深的引用数据上； / reactive: 和ref一样，但是底层采用的是ES6的Proxy代理了整个引用数据。

4、Vue3.0中的响应式原理

vue2.0的响应式

实现原理

对象类型：通过Object.definedProperty()对属性的读取、修改进行拦截（数据劫持）

数组类型：通过重写更新数据的一系列方法来实现拦截。（对数组的方法进行了包裹）

Object.defineProperty(data,"count",{
    get(){},
    set(){}
})

存在问题:

新增属性，删除属性都不会刷新界面
直接通过下标修改数组，界面不会自动更新

        let person = {
            name:"李国栋",
            age:18
        }

    let p = {};

    Object.defineProperty(p,"name",{
        get(){
            console.log("有人读取数据时调用");
            return person.name
        },

        set(value){
            console.log("有人修改了数据,我要去更新页面");
            person.name = value
        }
    })

vue3.0的响应式

实现原理
通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性的读写，属性的添加，属性的删除等
通过Reflect(反射)：对被代理对象的属性进行操作

MDN文档中描述的Proxy与Reflect：
Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Reflect:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
        let person = {
            name:"李国栋",
            age:18
        }

    let p = new Proxy(person,{
        // 读取
        get(target,proname){
            // target表示原对象  proname表示对象名
            console.log("有人读取了person上的属性",target);
            return target[proname]
        },
        // 修改或者增加
        set(target,proname,value){
            console.log("有人修改了person上的属性，我要去更新了");
            target[proname] = value
        },
        // 删除
        deleteProperty(target,proname){
            console.log("有人删除了person上面的属性,我要去调用了");
            return delete target[proname]
        },
        
    });

## 5、组件
引入：import xxx from (“组件路径”)

引入后直接使用：

## 6、计算属性
引入：import {computed} from “vue”
使用：computed( 函数)

<script setup>
    import {
        ref,
        reactive,
        computed
    } from "vue"let arr = reactive([{
        title: '鱼香肉丝',
        price: 20,
        count: 1
    },
    {
        title: '水煮肉片',
        price: 35,
        count: 1
    },
    {
        title: '白米饭',
        price: 3,
        count: 1
    },
])
let total = computed(() => {
    console.log(66666, "计算总价")
    return arr.reduce((n1, n2) => {
        return n1 + n2.price * n2.count
    }, 0)
})
let change1 = () => {
    arr[0].count = 10
}

function add(index) {
    arr[index].count++
}

function des(index) {
    arr[index].count--
}

</script>

<template>
    <div class="box">    <div v-for="(el,index) in arr">
        <div>{{el.title}}----{{el.price}}元----
            <button @click="des(index)">-</button>
            <span>{{el.count}}</span>
            <button @click="add(index)">+</button>
        </div>
    </div>
    <button @click="change1">修改</button>
    <button>{{total}}元</button>
</div>

</template>
周亚鑫
关注
专栏目录
Echarts 折线图最后一个点发光闪烁效果
liinux-Talk is cheap,show me the code.
06-12 6245
效果如下： 实现方式： var myChart = echarts.init(document.getElementById('main')); //数据加载完之前先显示一段简单的loading动画 //myChart.showLoading(); var names = []; //横坐标数组（实际用来盛放X轴坐标值） var values = []; //纵坐标数组（实际用来盛放Y坐标值） var effectValues = []; //闪烁效果 $.ajax({ type : "post
echart 折线从左到右动画效果_echarts之自动切换折线图
weixin_39562089的博客
12-19 1334
echarts有legend控件可以控制多个折线图之间的切换legend: {data: ['财经','娱乐','社会'],selectedMode: "single", //单选模式，每次出现一条折线图y: y, //由于需要自适应，此值用变量动态改变right: 10,inactiveColor: "#ADD9FF", ...
带阴影及动态效果的折线图（基于echarts.js）
06-21
带阴影及动态效果的折线图（基于echarts.js）
echarts折线图动态光点动画
最新发布
qq_49490164的博客
08-07 263
屏幕录制 2024-08-07 162710文档锚点每次看文档打开时间久这里做一个简单示例图，方便后面复用。
echarts折线图实现某个点闪烁动画
weixin_45195355的博客
03-06 556
【代码】echarts折线图实现某个点闪烁动画。
echarts中,在折线图中对数据点实现闪烁/闪亮功能(涟漪图-effectScatter)
qq_37146616的博客
03-07 4615
最近需要实现一个, 在折线图中要对数据进行一个闪烁显示的功能. 用到的是ecahrts的effectScatter. 在ecahrts中, 关于涟漪图-effectScatter的文档在此链接可以进行查阅 实现图: let opt = { ... xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // splitLine :{ //网格线
echarts折线图的线呈现动态效果
weixin_45294459的博客
11-30 1560
【代码】echarts折线图的线呈现动态效果。
arcgis api for js +echarts 实现点闪烁
08-29
arcgis api for js +echarts 实现点闪烁，包含调用的js文件，数据格式文件、具体实现代码。
echarts使用笔记之实现让折线的拐点闪烁的效果
wang839305939的博客
12-11 5360
利用echart实现折线图点位动态高亮闪烁的效果
echart2.0实现折线图转折点闪烁效果
qq_22860357的博客
11-10 2233
option = {     title : {         text: '某楼盘销售情况',         subtext: '纯属虚构'     },     tooltip : {         trigger: 'axis'     },     legend: {         data:['意向','预购','成交']     },     toolbo
Echarts扩展百度地图实例
01-11
Echarts扩展百度地图实例是一个将流行的JavaScript数据可视化库ECharts与百度地图API相结合的应用示例。这个项目展示了如何在网页中有效地集成这两种技术，以创建交互式的、具有地理定位功能的数据可视化界面。以下...
HTML+VUE+Echarts折线图让某一个点闪烁
11-04
HTML+VUE+Echarts折线图让某一个点闪烁
Ecarts折线图光点动效
qq_39366202的博客
11-26 2891
Ecarts折线图动效 Ecarts折线图动效 近期公司来个需求，想在echarts图标的的折线图上，添加一个可以随着折线路径跑动的光点。纯粹是为了好看，研究好一会，最后这个功能还取消了。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以
echarts折线图设置从左至右缓慢动画效果
Zxiuping的博客
04-04 2663
echarts折线图官网默认就是从左缓慢滑动到右方，但是我的默认不生效，但是点击lenged就会生效，找了半天也没找出原因，我就去官网查看api，发现我在chart.setOption(option)后面又加了。如果到这你的也像我一样实现了从左缓慢向右，那就不用往下看了，如果没有继续向下。chart.resize()//这个删除这个删除。在echarts绘制之前清一下。去除resize就正常了。还有一种方法就是加属性。
echart 折线从左到右动画效果_echarts多条折线图动态分层的实现方法
weixin_35462155的博客
12-29 4746
1、关于Echarts大家可以到这个网址看一下，还是比较详细的。这个功能还是很强大的，对于喜欢做数据统计来说是美味的。2、echarts多条折线图动态分层var xData = param.xData;var data = param.yDatalet option = [];let num =param.num ? param.num : 0;let max = num ? num *100 :...
echart 折线从左到右动画效果_用Tableau实现动画数据可视化
weixin_36076701的博客
12-22 440
介绍我是动画视觉化的超级粉丝。我喜欢数据点在我屏幕上跳舞的方式。他们用线条和点来讲述他们自己的故事。设计一个动画是一种艺术。我经常用动画形象来展示板球比赛的进展，或篮球的点数，或足球传球比赛的演变(是的，我是个体育迷)。在我的工作表上，看着这些点互相交谈，并取得进展，这是十分愉快的事情。相信我，一旦你开始在Tableau中构建这些动画的可视化效果，就没有回头路了。你会像我一样上瘾，想找任何借口把图...
echarts-折线图，动态
qq_44891434的博客
03-10 1204
echarts-折线图，动态 代码 <template> <div style="width: 100%; height: 100%" id="chartsR"></div> </template> <script> import echarts from "echarts"; export default { mounted() { this.drawLine(); }, methods: { drawLin.
echarts折线图加光点流动特效
lee754922002_的博客
01-30 2687
echarts折线图加光点流动特效
echart 折线从左到右动画效果_Echarts 动态折线图
weixin_39856269的博客
12-19 3453
var myChart = echarts.init(document.getElementById('main'));functionrefresh(){var orderid = $('#orderid').val();var machineid = $('#machineid').val();var date = $('#date').val();//alert($('#orderid')....
定制jQuery echarts 折线图线条与点色教程
在本文中，我们将深入探讨如何利用jQuery插件ECharts设置折线图中的折线线条颜色和折线点颜色。ECharts是一款功能强大的JavaScript数据可视化库，常用于创建动态交互式图表。当需要自定义图形样式，而非使用默认的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

周亚鑫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值