uni-app 柱状图柱子动态变化

在uni-app中实现柱状图柱子的动态变化，可以使用ECharts，这是一个强大的开源可视化图表库。以下是一个简单的示例，展示如何集成ECharts并在uni-app中实现柱状图柱子的动态变化。

1. 安装ECharts

首先，确保你的uni-app项目已经安装了ECharts。你可以使用npm进行安装：

npm install echarts --save

2. 创建页面并引入ECharts

在你的uni-app项目中，创建一个新的页面（例如pages/barChart/barChart.vue），并引入ECharts：

<template>
  <view>
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      ec: {
        onInit: this.initChart
      },
      chart: null,
      data: [120, 200, 150, 80, 70, 110, 130] // 初始数据
    };
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素适配
      });
      canvas.setChart(chart);
      this.chart = chart;
      this.setOption();
      this.startDynamicChange();
    },
    setOption() {
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.data,
          type: 'bar'
        }]
      };
      this.chart.setOption(option);
    },
    startDynamicChange() {
      setInterval(() => {
        this.data = this.data.map(value => value + Math.floor(Math.random() * 10 - 5)); // 随机增减数据
        this.chart.setOption({
          series: [{
            data: this.data
          }]
        });
      }, 1000); // 每秒更新一次
    }
  }
};
</script>

<style scoped>
/* 添加必要的样式 */
</style>

3. 注意事项

• 确保你的pages.json文件中已经正确配置了新页面的路径。
• ec-canvas组件是ECharts在uni-app中的封装，用于渲染图表。
• 使用setInterval函数来模拟数据的动态变化，你可以根据需要调整更新频率和数据变化逻辑。

这个示例展示了如何在uni-app中使用ECharts创建一个柱状图，并通过setInterval函数实现柱子的动态变化。你可以根据实际需求进一步自定义图表配置和动画效果。