uni-app 请问现在还有实现折线图或者柱状图或者其他的统计常用的组件嘛

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app 请问现在还有实现折线图或者柱状图或者其他的统计常用的组件嘛

2019-03-25 12:01

同上

1 回复

在uni-app中,确实有多种方式可以实现折线图、柱状图等常用的统计图表组件。一个常见且强大的解决方案是使用ECharts,它是一个使用JavaScript实现的开源可视化图表库。uni-app可以通过集成ECharts来实现丰富的图表功能。

以下是一个在uni-app中使用ECharts实现折线图和柱状图的简单示例:

1. 安装ECharts

首先,确保你的uni-app项目中已经安装了ECharts。你可以通过npm安装:

npm install echarts --save

2. 创建图表组件

components目录下创建一个名为MyChart.vue的组件,用于封装ECharts图表。

<template>
  <view class="container">
    <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
    <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: {
        lazyLoad: true // 延迟加载
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.lineChart();
      this.barChart();
    },
    lineChart() {
      // 初始化折线图
      const chart = echarts.init(this.$mp.page.selectComponent('#mychart-dom-line').canvas, null, {
        width: '100%',
        height: '400px'
      });
      chart.setOption({
        // 折线图配置
        xAxis: {},
        yAxis: {},
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line'
        }]
      });
    },
    barChart() {
      // 初始化柱状图
      const chart = echarts.init(this.$mp.page.selectComponent('#mychart-dom-bar').canvas, null, {
        width: '100%',
        height: '400px'
      });
      chart.setOption({
        // 柱状图配置
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

3. 使用图表组件

在你的页面中使用MyChart组件:

<template>
  <view>
    <MyChart />
  </view>
</template>

<script>
import MyChart from '@/components/MyChart.vue';

export default {
  components: {
    MyChart
  }
};
</script>

这个示例展示了如何在uni-app中使用ECharts来创建折线图和柱状图。你可以根据需要进一步定制图表的配置和样式。

回到顶部