uni-app 插件图表丰富 7种图表漂亮

在uni-app中，使用插件来实现丰富的图表展示是一个高效且便捷的方法。这里，我将为你展示如何使用一个流行的图表插件——ECharts，在uni-app中集成并绘制7种常见的图表类型。假设你已经有一个uni-app项目，并且已经安装了ECharts插件。

首先，确保你的项目中已经安装了ECharts相关依赖。如果还没有，可以通过以下命令安装（假设你使用的是npm）：

npm install echarts --save

接下来，在你的uni-app项目中创建一个新的页面或组件来展示图表。以下是一个示例，展示如何在一个页面中集成ECharts并绘制7种图表：

<template>
  <view class="container">
    <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ecLine }}"></ec-canvas>
    <!-- 其他图表类似，使用不同的canvas-id和ec对象 -->
    <!-- ... (省略其他6种图表的ec-canvas标签) -->
  </view>
</template>

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

export default {
  data() {
    return {
      ecLine: {
        onInit: this.initChartLine
      },
      // 其他图表的初始化数据对象
      // ... (省略其他6种图表的初始化数据对象)
    };
  },
  methods: {
    initChartLine(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 新增
      });
      canvas.setChart(chart);

      const option = {
        // 配置项，这里以折线图为例
        title: {
          text: '折线图'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line'
        }]
      };
      chart.setOption(option);
      return chart;
    },
    // 其他图表的初始化方法
    // ... (省略其他6种图表的初始化方法)
  }
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
ec-canvas {
  width: 100%;
  height: 300rpx; /* 根据需要调整高度 */
  margin: 10rpx;
}
</style>

在这个示例中，我展示了如何为一个折线图配置ec-canvas组件和初始化方法。对于其他6种图表（如柱状图、饼图、散点图、雷达图、K线图、漏斗图），你需要创建相应的ec-canvas标签，并在data中定义对应的初始化数据对象和方法。每个图表的初始化方法中将包含不同的option配置，以适应不同类型的图表展示需求。