VUE3 ECharts5 实现动态柱状图(附源码和效果)

javascript 复制代码
<template>
  <div id="main" class="echart-style">
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
let myChart = ref()
let option = ref({})
let data = ref<any>([])
for (let i = 0; i < 5; ++i) {
    data.value.push(Math.round(Math.random() * 200));
  }
onMounted(() => {
  init()
})
const init = () => { 
  // 基于准备好的dom,初始化echarts实例
  myChart.value = echarts.init(document.getElementById('main'));
  // 绘制图表
  option.value = {
    xAxis: {
      max: 'dataMax'
    },
    yAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E'],
      inverse: true,
      animationDuration: 300,
      animationDurationUpdate: 300,
      max:5// only the largest 3 bars will be displayed
    },
    series: [
      {
        realtimeSort: true,
        name: 'X',
        type: 'bar',
        data: data.value,
        label: {
          show: true,
          position: 'right',
          valueAnimation: true
        }
      }
    ],
    legend: {
      show: true
    },
    animationDuration: 3000,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'

  };
  myChart.value.setOption(option.value)
};
function update() {
 data.value = option.value.series[0].data;
  for (var i = 0; i < data.value.length; ++i) {
    if (Math.random() > 0.9) {
      data.value[i] += Math.round(Math.random() * 2000);
    } else {
      data.value[i] += Math.round(Math.random() * 200);
    }
  }
  init()
}
setInterval(function () {
  update();
}, 3000);
</script>
<style scoped>
.echart-style {
  width: 1000px;
  height: 900px;
  background: skyblue;
}
</style>

相关推荐
炫饭第一名5 分钟前
🌍🌍🌍字节一面场景题:异步任务调度器
前端·javascript·面试
烛阴6 分钟前
Lua字符串的利刃:模式匹配的艺术与实践
前端·lua
奇舞精选7 分钟前
一文了解 Server-Sent Events (SSE):构建高效的服务器推送应用
前端
Yeats_Liao13 分钟前
Go Web 编程快速入门 11 - WebSocket实时通信:实时消息推送和双向通信
前端·后端·websocket·golang
纯爱掌门人19 分钟前
鸿蒙状态管理V2实战:从零构建MVVM架构的应用
前端·harmonyos
丘耳23 分钟前
vis-network 知识点笔记
前端·javascript
有点笨的蛋24 分钟前
重新理解 Flexbox:让布局回归“弹性”的本质
前端·css
小着25 分钟前
微信小程序组件中二维码生成问题解决方案
前端·微信小程序
潜心编码31 分钟前
基于Django的医疗电子仪器系统
前端·数据库·1024程序员节
摘星编程36 分钟前
深入 Actix-web 源码:解密 Rust Web 框架的高性能内核
开发语言·前端·rust·actixweb