百度echart的几种动画写法

已于 2022-09-15 19:05:51 修改
阅读量531 收藏 1
点赞数
文章标签： echarts javascript vue.js
于 2022-09-15 19:02:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duancsdn/article/details/126877589
版权

1.柱形图表

<template>
  <div class="gwtj-echart">
    <div class="eachert-box" id="street-hdcs-echart"
    @mouseout="mouseout"
    @mouseover="mouseover"
    
    ></div>
  </div>
</template>

<script>
import { getActivitiesSummary } from "@/api/module/lqdjScreen";
import * as echarts from "echarts";
export default {
  name: "gwtjEchart",
  data() {
    return {
      chartDom: null,
      timgerId: null,
      nowIndex: 0,
      rowNameArr: [],
      rowValueArr: [],
      rowValueArr1:[]
    };
  },
  props: {
    unid: String,
    communityName:String
  },
  mounted() {
    this.getData();
  },
  methods: {
    random(min, max) {
 
     return Math.floor(Math.random() * (max - min)) + min;
 
    },
    getData() {
     
      getActivitiesSummary({
        communityName: this.communityName,
      }).then((res) => {
        if (res.code == 200) {
          let tampArr = res.result.everyMonthActices || [];
          this.rowNameArr = [];
          this.rowValueArr = [];
          tampArr.forEach((item) => {
            // this.weekArr.push(item.counts);
          
             this.rowNameArr.push(item.month);
             this.rowValueArr.push(item.total);
            //  this.rowValueArr.push(this.random(1, 100));
          });
         
          // this.init(this.rowNameArr, this.rowValueArr);
          this.startAnimation();
        }
      });
    },
    init(nameArr, valueArr) {
      this.chartDom = echarts.init(document.getElementById("street-hdcs-echart"));
      const option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["活动次数"],
          top: "5%",
          right: "5%",
          orient: "horizontal",
          textStyle: {
            fontSize: 12,
            fontWeight: 400,
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          // boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
           splitLine: {
              show: false,
          },
        },
        yAxis: {
          type: "category",
          data: nameArr,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
              show: false,
          }
        },
        series: [
          {
            name: "组织活动次数",
            type: "bar",
            data: valueArr,
            // color: "#0263FF",
            itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                        {offset: 0, color: '#df2c1e'},                   //柱图渐变色
                        {offset: 0.5, color: '#e9713d'},                 //柱图渐变色
                        {offset: 1, color: '#f7cc66'},                   //柱图渐变色
                    ]
                )
             }
            }
            
          }
        ],
      };
      this.chartDom.setOption(option);

      window.addEventListener("resize", () => {
        this.chartDom.resize();
      });
       this.chartDom.on("click", (params) => {
        console.log(params);
        this.$router.push({
          path: "/bigScreen/communityBig",
          query: {
            communityName: params.name,
            isFull:this.isFull
          },
        });
      });
    },
     mouseover() {
  
      clearInterval(this.timgerId);
    },
    mouseout() {
      this.startAnimation();
    },
    startAnimation() {
      //初始化图表
      // this.nowIndex = 8;
      var that=this;
      let tampNameArr = [];
      let tampValueArr = [];
      this.rowNameArr.forEach((item, index) => {
       
          tampNameArr.push(item);
          tampValueArr.push(this.rowValueArr[index]);
        
      });

      this.init(tampNameArr, tampValueArr);

      //开启定时任务
      clearInterval(this.timgerId);
      that.timgerId = setInterval(() => {
        tampNameArr.shift();
        tampValueArr.shift();
        tampNameArr.push(that.rowNameArr[this.nowIndex]);
        tampValueArr.push(that.rowValueArr[this.nowIndex]);

        that.nowIndex++;
        if (that.nowIndex >= that.rowNameArr.length) {
          that.nowIndex = 0;
        }
        that.chartDom.setOption({
          yAxis: [
            {
              data: tampNameArr,
            },
          ],
          series: [
            {
              data: tampValueArr,
            },
          ],
        });
      }, 2000);
    },
  },
};
</script>

<style lang="less" scoped>
.gwtj-echart {
  width: 100%;
  height: 100%;
  position: relative;
  .eachert-box {
    position: absolute;
    width: 90%;
    height: 90%;
    top: 0;
    left: 0;
  }
}
</style>

```javascript
在这里插入代码片

2.线型图表

<template>
  <div class="gwtj-echart">
    <div class="eachert-box" id="gwtj-echart"></div>
  </div>
</template>

<script>
import { getybdyNum } from "@/api/module/lqdjScreen";
import * as echarts from "echarts";
export default {
  name: "gwtjEchart",
  data() {
    return {
      chartDom: null,
      timgerId: null,
      nowIndex: 2,
      rowNameArr: [],
      rowValueArr: [],
    };
  },
  props: {
    unid: String,
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getybdyNum({
        areaUnid: this.unid,
      }).then((res) => {
        if (res.code == 200) {
          let tampArr = res.result || [];
          this.rowNameArr = [];
          this.rowValueArr = [];
          tampArr.forEach((item) => {
            this.rowNameArr.push(item.title);
            this.rowValueArr.push(item.value.number);
          });
          // this.init(this.nameArr, this.valueArr);
          this.startAnimation();
        }
      });
    },
    init(nameArr, valueArr) {
      this.chartDom = echarts.init(document.getElementById("gwtj-echart"));
      const option = {
        color: ["#ef7100", "#64c06c", "#f4cd49", "#e05667", "#8c5fe8"],
        tooltip: {
          backgroundColor: "#033b77",
          borderColor: "#ef7100",
          textStyle: {
            color: "#fff",
            fontSize: 13,
          },
          trigger: "item",
          formatter: "{b0}：{c0}人",
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: nameArr,
            axisLabel: {
              overflow: "break",
              width: 80,
              show: true,
              interval: 0,
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            color: "#fff",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "line",
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(229,56,0 , 0.4)",
                  },
                  {
                    offset: 1,
                    color: "rgba(248,152,5, 0.4)",
                  },
                ]),
              },
            },
            barGap: 0,
            // label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: valueArr,
          },
        ],
      };
      this.chartDom.setOption(option);
      window.addEventListener("resize", () => {
        this.chartDom.resize();
      });
    },
    startAnimation() {
      //初始化图表
      this.nowIndex = 3;
      let tampNameArr = [];
      let tampValueArr = [];
      this.rowNameArr.forEach((item, index) => {
        if (index < this.nowIndex) {
          tampNameArr.push(item);
          tampValueArr.push(this.rowValueArr[index]);
        }
      });

      this.init(tampNameArr, tampValueArr);

      //开启定时任务
      clearInterval(this.timgerId);
      this.timgerId = setInterval(() => {
        tampNameArr.shift();
        tampValueArr.shift();
        tampNameArr.push(this.rowNameArr[this.nowIndex]);
        tampValueArr.push(this.rowValueArr[this.nowIndex]);

        this.nowIndex++;
        if (this.nowIndex >= this.rowNameArr.length) {
          this.nowIndex = 0;
        }
        this.chartDom.setOption({
          xAxis: [
            {
              data: tampNameArr,
            },
          ],
          series: [
            {
              data: tampValueArr,
            },
          ],
        });
      }, 2000);
    },
  },
  beforeDestroy() {
    clearInterval(this.timgerId);
  },
};
</script>

<style lang="less" scoped>
.gwtj-echart {
  width: 100%;
  height: 100%;
  position: relative;
  .eachert-box {
    position: absolute;
    width: 100%;
    height: 110%;
    top: 0;
    left: 0;
  }
}
</style>

3.饼状图表

<template>
  <div class="kq-echart">
    <div
      class="eachert-box"
      id="kq-echart"
      @mouseout="mouseout"
      @mouseover="mouseover"
    ></div>
  </div>
</template>

<script>
import moment from "moment";
import { getDyStatus } from "@/api/module/lqdjScreen";
import * as echarts from "echarts";
export default {
  name: "kqEchart",
  data() {
    return {
      nowIndex: 0,
      timer: null,
      chartDom: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getDyStatus({
        dkrq: moment().format("YYYY-MM-DD"),
      }).then((res) => {
        if (res.code == 200) {
          let tampArr = res.result || [];
          let data = [];
          tampArr.forEach((item) => {
            data.push({
              value: item.value.number,
              name: item.title,
            });
          });
          this.init(data);
        }
      });
    },
    init(data) {
      this.chartDom = echarts.init(document.getElementById("kq-echart"));
      const option = {
        color: [
          "#fc7b04",
          "#FF7D00",
          "#8781D7",
          "#FFC83B",
          "#FFA800",
          "#c11200",
          "#1304D3",
          "#c11200",
        ],
        tooltip: {
          backgroundColor: "#033b77",
          borderColor: "#21f2c4",
          textStyle: {
            color: "#fff",
            fontSize: 13,
          },
          trigger: "item",
          formatter: "{b0}：{d}%",
        },
        legend: {
          top: "center",
          left: "10%",
          orient: "vertical",
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "考勤",
            type: "pie",
            top: "20",
            left: "30%",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              itemStyle: {
                shadowColor: "rgba(255, 255, 255, 0.9)",
                shadowBlur: 20,
              },
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
                color: "#fff",
                formatter: "{b}\n{c}人",
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      this.chartDom.setOption(option);

      this.chartDom.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: this.nowIndex,
      });

      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.chartDom.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: [0, 1, 2, 3],
        });
        this.nowIndex++;
        if (this.nowIndex > 3) {
          this.nowIndex = 0;
        }
        this.chartDom.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: this.nowIndex,
        });
      }, 3000);

      window.addEventListener("resize", () => {
        this.chartDom.resize();
      });
    },
    mouseover() {
      this.chartDom.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: [0, 1, 2, 3],
      });
      clearInterval(this.timer);
    },
    mouseout() {
      this.chartDom.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: this.nowIndex,
      });
      this.timer = setInterval(() => {
        this.chartDom.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: [0, 1, 2, 3],
        });
        this.nowIndex++;
        if (this.nowIndex > 3) {
          this.nowIndex = 0;
        }
        this.chartDom.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: this.nowIndex,
        });
      }, 3000);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.kq-echart {
  width: 100%;
  height: 100%;
  position: relative;
  .eachert-box {
    width: 100%;
    height: 100%;
  }
}
</style>
听风者一号
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据
HepBen的博客
08-16 1846
这几天接触的一个项目需要使用到百度的echart，所以简单查找并实验了几款比较简单且适用性较广的例子，做了几个简单的Demo，一来是对echart有所了解，二来也是记录一下，方便以后进一步的优化。 首先，是echart的js文件，一般情况下，这一个文件基本就可以了，但是由于本文还需要涉及到地图类型的处理，所以还需要一个地图包，，这个echart官网已经下架了，说是因为部分矢量数据不正确，建议用百...
echart自定义动画_echarts动画效果
weixin_39648539的博客
12-22 3357
最近工作中碰到一个需求，要求动态展示柱状图，大概效果如下：图片是我用操作宽度模拟的效果，但是echarts以前没接触过，今天看了下文档，梯形也没做出来，想请教下大家echarts能否完成图中效果？如何实现？看来图片是误导大家了，当时为了上传方便，只截了一部分。实际需求是展示一个柱状图，数据是静态的，不需要从后台获取。是要在柱图中实现类似图中的效果。进度条的话，应该是非常常见的需求，实现的方法也比较...
Echarts图表的动画是如何实现的？一文为你解密，有图有代码
最新发布
贝格前端工场的博客
06-28 1440
Echarts图表是可视化大屏中最常用组件，我们经常看到各种炫酷的图表动画效果，但是你知道这些动画效果叫什么，是如何实现的吗？今天贝格前端工场为大家分享一下。
Echarts动画
xiaoyuqwer的博客
04-01 780
定时器 用定时器来动态改变数据，需求是：每页展示五条销量数据，每隔几秒切换当前页数据，整页数据的切换 首先，定义当前页和总页数的数据 写更新图表方法 在更新图表方法中，根据currentPage定义数据展示起始和结束的下标，用数组的splice方法对数据进行截取，截取出当前页要展示的数据，setOption更新图表 写定时器方法 在定时器方法中，每隔一定的时间，currentPage自加1，然后再调用更新图表的updateChart方法，更新图表 获取到数据后，先对数据进行排序，然.
echarts动画加载增加用户体验
测试
12-09 431
myChart.showLoading();$.get('data.json').done(function (data) { myChart.hideLoading(); myChart.setOption(...);});
echart 饼图动画（饼图自动高亮展示）
zhumizhumi的博客
03-07 7952
可以直接粘贴使用 一：饼图动画效果 二：动画效果要求 （1）鼠标不移动上去得时候，饼图自动按照顺序高亮 （2）鼠标移入的时候，取消自动高亮展示，只高亮鼠标选中的那一块 （3）鼠标移出的时候，恢复自动高亮的代码 三：代码 var _this = this var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 var charPie3cur...
Java for循环几种写法整理
08-31
以下是对Java for循环几种写法的详细说明： 1. 传统for循环： 传统for循环是最基础的形式，通常用于遍历数组。例如： ```java int[] integers = {1, 2, 3, 4}; for (int j = 0; j ; j++) { int i = integers[j...
javascript的几种写法总结
10-21
本文将总结几种常见的JavaScript写法，帮助读者更好地理解这门语言的多样性和表达能力。 首先，我们来探讨JavaScript变量的定义和使用。在JavaScript中，变量定义通常采用关键字var来声明。例如： ```javascript ...
今天是星期几的4种JS代码写法
10-26
第一种写法采用JavaScript的`if-elseif`条件判断结构来判断今天是星期几。通过调用`new Date().getDay()`方法，我们能获取一个0到6之间的数字，其中0代表星期日，1代表星期一，以此类推。然后，我们通过一系列的条件...
JavaScript中for循环的几种写法与效率总结
10-20
每个接触JS的开发人员都不可避免的与for循环打交道，毕竟这是遍历必不可少的工具之一。...下面这篇文章就主要介绍了JavaScript中几种for循环的写法与效率,需要的朋友可以参考借鉴，下面来一起看看吧。
SQL常用分页的几种写法
10-27
SQL常用分页的几种写法
echarts HTML5地图分布动画DEMO演示
09-20
echarts HTML5地图分布动画DEMO演示案例
百度echart_hunan.js
05-24
湖南 百度 echart 的js 文件 有需要的 拿去
动画的使用(ECharts)
我的博客
09-21 1530
目录 1.加载动画 ECharts已经内置好了加载数据的动画，我们只需要在合适的时机显示或隐藏即可 显示加载动画：mCharts.showLoading() 隐藏加载动画：mCharts.hideLoading() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
百度echart
02-08 301
在ECharts中主要通过on方法添加事件处理函数，ECharts中的事件主要分为两种，1）鼠标事件，在鼠标click or hove 时触发鼠标事件； 2）另外一种是在ECharts在做图形交互时触发的事件，即调用dispatchAction 后触发的事件。 鼠标事件：'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，...
echarts 动画图表
hsyldw2000的博客
04-01 648
1.渐变颜色：使用echarts图表中color属性，type是图表类型，x,y,x2,y2表示渐变的方向，例如x，y为1，就是从左到右的渐变，大家使用的时候可以试试，左上左下都可以实现。offset表示开始时的颜色，一般写0，0.5，1这三种即可，分别表示开始，一半，结束的位置。具体操作请看完整代码。在饼状图上我没找到解决办法，但是我给饼状图加了个底座，底座是好多种状态在一起的图，先把图片加进去，设置不重复，起始位置为左上角。在添加旋转动画，持续时间为1秒，无限循环，步数为35，结束状态为最终状态。
ECharts动画使用
qq_44808710的博客
05-22 733
动画使用加载动画增量动画动画的配置 加载动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>散点图</title> <!-- <script src="https://unpkg.com/vue@next"></script> --> <script src="js/lib/echarts.min.j
百度Echart注解
transition164的博客
05-08 1922
定义变量/*chart 是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等 axis 直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴 xAxis 直角坐标系中的横轴，通常并默认为类目轴 yAxis 直角坐标系中的纵轴，通常并默认为数值轴 grid 直角坐标系中除...
case when有几种写法
07-13
在HANA中，CASE WHEN语句可以有几种不同的写法，具体取决于需求和个人偏好。以下是常见的几种写法： 1. 简单CASE WHEN语句： ```sql SELECT column_name, CASE column_name WHEN value1 THEN result1 WHEN value2 THEN result2 ELSE result3 END AS result FROM your_table; ``` 在这种写法中，根据column_name的值进行匹配，并返回对应的结果。 2. 搜索CASE WHEN语句： ```sql SELECT column_name, CASE WHEN condition1 THEN result1 WHEN condition2 THEN result2 ELSE result3 END AS result FROM your_table; ``` 在这种写法中，根据条件进行匹配，并返回对应的结果。可以使用任意逻辑表达式作为条件。 3. 使用CASE WHEN语句进行聚合： ```sql SELECT SUM(CASE WHEN condition THEN column_name ELSE 0 END) AS sum_result FROM your_table; ``` 在这种写法中，根据条件进行聚合计算。当条件满足时，将对应的列值加入计算；否则，将0加入计算。 这些是常见的几种CASE WHEN语句的写法，可以根据具体的需求选择合适的方式进行编写。注意，在HANA中，还可以在CASE WHEN语句中嵌套其他表达式或函数来实现更复杂的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值