全部产品

图表组件

小程序图表库

安装

打开 shell,切换到对应的应用所在目录

npm install mini-chart --save

使用

在响应页面的 .json 文件中进行注册,如card组件的注册如下所示:

{
  "usingComponents": {
    "line": "mini-chart/es/line/index"
  }
}

在 .js 文件中进行数据获取和设置

Page({
  data: {
    cn: 'line',
    categories: ['2017-06-05', '2017-06-06', '2017-06-07', '2017-06-08', '2017-06-09', '2017-06-10', '2017-06-11', '2017-06-12', '2017-06-13', '2017-06-14', '2017-06-15', '2017-06-16', '2017-06-17', '2017-06-18', '2017-06-19', '2017-06-20', '2017-06-21', '2017-06-22', '2017-06-23', '2017-06-24', '2017-06-25', '2017-06-26', '2017-06-27', '2017-06-28', '2017-06-29', '2017-06-30', '2017-07-01', '2017-07-02', '2017-07-03', '2017-07-04', '2017-07-05', '2017-07-06', '2017-07-07', '2017-07-08', '2017-07-09', '2017-07-10', '2017-07-11', '2017-07-12', '2017-07-13', '2017-07-14', '2017-07-15', '2017-07-16', '2017-07-17', '2017-07-18', '2017-07-19', '2017-07-20', '2017-07-21', '2017-07-22', '2017-07-23', '2017-07-24'],
    series: [
      {
        type: 'a',
        style: 'dash',
        point: {
          size: 3,
          stroke: '#F00',
          lineWidth: 1,
        },
        data: [116, 129, 135, 86, 73, 85, 73, 68, 92, 130, 245, 139, 115, 111, 309, 206, 137, 128, 85, 94, 71, 106, 84, 93, 85, 73, 83, 125, 107, 82, 44, 72, 106, 107, 66, 91, 92, 113, 107, 131, 111, 64, 69, 88, 77, 83, 111, 57, 55, 60],
      },
      {
        type: 'b',
        color: '#93F',
        style: 'smooth',
        data: [60, 55, 57, 111, 83, 77, 88, 69, 64, 111, 131, 107, 113, 92, 91, 66, 107, 106, 72, 44, 82, 107, 125, 83, 73, 85, 93, 84, 106, 71, 94, 85, 128, 137, 206, 309, 111, 115, 139, 245, 130, 92, 68, 73, 85, 73, 86, 135, 129, 116],
      },
    ],
    xAxis: {
      tickCount: 3,
    },
    yAxis: {
      tickCount: 3,
    },
    legend: {
      position: 'top',
      offsetY: 5
    },
    tooltip: {
      showTitle: true,
      showCrosshairs: true,
    },
  }
});

在 .axml 文件中进行调用:

<view class="{{cn}}">
  <line
    categories="{{categories}}"
    series="{{series}}"
    xAxis="{{xAxis}}"
    yAxis="{{yAxis}}"
    legend="{{legend}}"
    tooltip="{{tooltip}}"
  />
</view>