echart在微信小程序的使用简单示例-前端开发

下面给您详细讲解“echart在微信小程序的使用简单示例”的完整攻略。

下面给您详细讲解“echart在微信小程序的使用简单示例”的完整攻略。

介绍

Echart是一款基于JavaScript的开源可视化图表库。它提供了各种图表类型，包括折线图、柱状图、饼图等等，可以用于业务报表、数据分析、数据监控等多种场景。

本文将介绍如何在微信小程序中使用Echart。

步骤

1. 引入Echart库

首先，我们需要在小程序中引入Echart库。将Echart库的压缩文件下载下来，然后放置在小程序根目录下的lib文件夹中。

2. 引入Echart官方的微信小程序扩展包

在小程序的开发者工具中，选择菜单栏的“工具” > “构建npm”，构建成功后，我们需要在小程序的app.json文件中设置usingComponents字段，以引入Echart官方的微信小程序扩展包。具体设置参考下面的示例：

{
  "usingComponents": {
    "ec-canvas": "path/to/ec-canvas/ec-canvas"
  }
}

其中path/to/ec-canvas/ec-canvas是指Echart官方的微信小程序扩展包的路径。请注意替换为您自己的实际路径。

3. 添加Echart绘图代码

在小程序的页面中添加Echart绘图代码。通常情况下，我们使用一个自定义组件来绘制Echart图表。在自定义组件中，我们要绘制的图表类型和数据是可以通过传递参数来实现的。

下面是一个简单的示例，展示了如何在小程序中绘制一张柱状图：

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

// 引入Echart图表库
const echarts = require("../../lib/echarts.min.js");

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

// 初始化Echart图表
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 新增加的选项，可以更加清晰的在不同分辨率的屏幕上显示
  });
  canvas.setChart(chart);

  const option = {
    tooltip: {},
    xAxis: {
      data: ["图表1", "图表2", "图表3", "图表4", "图表5", "图表6", "图表7"]
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20, 5]
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

上述代码中，我们首先引入了Echart库，然后定义了一个initChart函数，用于初始化Echart图表。在initChart函数中，我们通过传递canvas、width、height和dpr参数来创建一个Echart实例。然后，我们可以设置图表的样式、数据等。

最后，我们将图表实例返回，以便在自定义组件中使用。

4. 渲染图表

使用ec-canvas自定义组件时，需要传递一个ec参数来初始化图表。该参数需要设置一个onInit回调函数，该函数被调用时会传递canvas、width、height和dpr参数。在这个回调函数中，我们需要调用echarts.init方法来创建一个Echart实例，并将其绑定到canvas上。然后，我们可以调用setOption方法来设置图表的样式、数据等。

最后，我们将chart实例返回，以便在自定义组件中使用。在自定义组件中，我们可以将返回的chart实例传递给一个echarts的属性，在echarts属性中，我们就可以使用Echart提供的各种方法和属性了。

示例

下面是一个基于真实数据的柱状图示例，该示例展示了全国疫情新增病例数的变化趋势。在这个示例中，我们使用了Echart的line图表类型，并通过设置数据、坐标轴等来调整图表的样式。

<view class="container">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

// 引入Echart图表库
const echarts = require("../../lib/echarts.min.js");

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

// 初始化Echart图表
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 新增加的选项，可以更加清晰的在不同分辨率的屏幕上显示
  });
  canvas.setChart(chart);

  const option = {
    title: {
      text: "全国疫情新增病例数",
      subtext: "数据来源：国家卫健委",
      left: "center"
    },
    tooltip: {
      trigger: "axis"
    },
    xAxis: {
      type: "category",
      data: [
        "1月1日",
        "1月2日",
        "1月3日",
        "1月4日",
        "1月5日",
        "1月6日",
        "1月7日",
        "1月8日",
        "1月9日",
        "1月10日",
        "1月11日",
        "1月12日",
        "1月13日"
      ],
      axisLabel: {
        interval: 0,
        rotate: 40
      }
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        name: "新增病例数",
        type: "line",
        data: [
          27,
          27,
          44,
          59,
          77,
          93,
          131,
          114,
          129,
          219,
          259,
          328,
          429
        ],
        markPoint: {
          data: [
            {
              type: "max",
              name: "最大值"
            },
            {
              type: "min",
              name: "最小值"
            }
          ]
        },
        markLine: {
          label: {
            show: false,
            position: "start",
            formatter: function(params) {
              return params.seriesName + " " + params.value;
            }
          },
          data: [
            {
              type: "average",
              name: "平均值"
            }
          ]
        }
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

在这个示例中，我们首先定义了一个title属性，用于设置图表的标题和副标题。然后，我们通过tooltip属性设置了图表的提示框样式。接着，我们设置了xAxis和yAxis两个坐标轴，并分别设置了类型、数据、标签等。最后，我们在series属性中定义了一个line类型的数据系列，其中设置了数据、标记点、标志线等。