微信小程序如何引入柱状图折线图

声明：本篇文章引用的是ucharts图表

1.ucharts官网进行下载

ucharts官网地址  

ucharts官网组件下载地址 点击使用 HBuilderX 导入插件会跳转HBuilderX，选择你需要导入的项目就可以

文件下载ucharts.js会在你项目中uni_modules>qiun-data-charts>js_sdk>u_charts>u_charts.js

 

找到后在那个页面使用就引入那个页面就ok

2.简单示例 

template

<template>
  <view>
		<view style="width: 100%;height: 50px;margin-top: 10px;"></view>
    <canvas canvas-id="myid" id="myid" class="charts" @tap="tap"/>
  </view>
</template>

script

<script>
import uCharts from '../../uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
var uChartsInstance = {};
export default {
  data() {
    return {
      cWidth: 780,
      cHeight: 500
    };
  },
  onReady() {
    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(780);
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(500);
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        let res = {
            categories: ["2016.12.30","2016.12.31"],//提交时间
            series: [
              {
                name: "身高",//名称
                data: [40,45]//第一项是2016.12.30存入的值 第二项是2016.13.31存入的值
              },
              {
                name: "体重",
                data: [18,50]
              },
							{
							  name: "高压",
							  data: [18,10]
							},
							{
							  name: "低压",
							  data: [18,20]
							},
							{
							  name: "血糖",
							  data: [18,20]
							},
            ]
          };
					var list = [];
				res.series.forEach(function(item){
					item.data.forEach(function(item1){
						list.push(item1)
					})
				})
				var c = Math.max.apply(null,list)
        this.drawCharts('myid', res,c);
      }, 500);
    },
    drawCharts(id,data,caa){
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "column",
        context: ctx,
        width: this.cWidth, //图形宽
        height: this.cHeight, //图形高
        categories: data.categories, //x轴数据
        series: data.series, //内容值
        xAxis: {
          disableGrid: true //背景为线条
        },
        yAxis: {
          data: [ { min: 0 , max: caa+5} ]
        },
        extra: {
          column: {
            type: "group"
          }
        }
      });
    },
    tap(e){
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    }
  }
};
</script>

style

<style scoped>
  .charts{
    width: 750rpx;
    height: 500rpx;
  }
</style>

ps：如有不对请指正