微信小程式折線圖表折線圖加區域圖

1.先來個效果圖

 

 

這裡我用的是外掛@antv/f2-canvas（安裝的方法如下）

npm init 此處如果直接使用官方npm install 可能會出現沒有node_modules錯誤

npm install --production 建議使用–production選項，可以減少安裝一些業務無關的 npm 包，從而減少整個小程式包的大小

npm i @antv/f2-canvas 安裝微信小程式 F2 圖表元件

安裝好依賴包之後，執行 （點選開發者工具頂部詳情，勾選 使用npm模組，再點選選單欄中工具下的構建npm即可執行）

 

 

 

 json檔案里加這個

"usingComponents": {
    "ff-canvas": "@antv/f2-canvas"
  }

js檔案

const F2 = require('@antv/wx-f2');
let chart = null;
page({
	data:{
		opts: {
	      lazyLoad: true
	    },
	},
	// 折線圖
  getMothElectro: function (type) {
    let that = this;
    // 體重曲線表
    app.post('/user/Charts', {
      type: type
    }).then((res) => {
      // console.log(res)
      that.setData({
        list: res.data.list
      })
      //這裡是把後臺返的資料做一下處理
   
      let arr = [];
      let array1 = [];
      let array2 = [];
      let weightArr = [];
      // for (let value of res.chart) {
      for (let i = 0; i < res.chart.length; i++) {
        let value = res.chart[i];
        if (value.weight == '') {
          value.weight = null;
        } else {
          value.weight = value.weight;
          weightArr.push(value.weight);
        }

        let item = {
          city: '',
          date: value.date,
          areaValue: [(value.low.toFixed(2)) * 1, value.hign.toFixed(2) * 1]
        }
        let item1 = {
          city: '',
          date: value.date,
          weight: value.weight
        }
        array1.push(item)
        array2.push(item1)
        arr = array1.concat(array2)
      }


      this.chartComponent = this.selectComponent('#column-dom');
      this.chartComponent.init((canvas, width, height) => {

       //這裡是計算y軸座標可以跟著資料變，區間小一點，自適應資料
        var min = ((Math.min.apply(Math, weightArr)).toFixed(1)) * 1;
        var max = ((Math.max.apply(Math, weightArr)).toFixed(1)) * 1;
        if (max - min <= 10) {
          max = max + 2;
        }
        if (min % 5 == 0) {
          min = min - 2;
        }
        if (min > res.chart[0].low) {
          min = parseInt(res.chart[0].low);
        }
        if (max < res.chart[res.chart.length - 1].hign) {
          max = parseInt(res.chart[res.chart.length - 1].hign);
        }

        let max3 = (((max - min) / 3) * 1 + min).toFixed(1);
        
        chart = new F2.Chart({
          el: canvas,
          width,
          height
        });

        chart.source(arr, {
          date: {
            range: [0, 1],
            type: 'timeCat',
            mask: 'MM/DD',
            tickCount: 5,
          },
          weight: {
            type: 'linear',
            tickCount: 4,
            ticks: [min, max3, (max - max3 + min).toFixed(1) * 1, max],
            formatter: function formatter(ivalue) {
              return ivalue + 'kg';
            }
          },
          areaValue: {
            type: 'linear',
            tickCount: 4,
            ticks: [min, max3, (max - max3 + min).toFixed(1) * 1, max],
            formatter: function formatter(ivalue) {
              return ivalue + 'kg';
            }
          },
         
        });
        chart.axis('areaValue', false);//這裡的圖表是雙y軸，所以隱藏一個，把右邊的隱藏

        chart.line({
          connectNulls: true // 配置，連線空值資料
        }).position('date*weight').shape('smooth').color('city', ['#EF597F']);
        chart.point({
          connectNulls: true // 配置，連線空值資料
        }).position('date*weight').color('city', ['#EF597F']).style({
          // stroke: '#EF597F',
          // lineWidth: 1
        });

        chart.area({
          connectNulls: true // 配置，連線空值資料
        }).position('date*areaValue').shape('smooth').color('city', ['#2ECBB1', '#2ECBB1']);

        chart.legend(false);
        chart.tooltip(false);
        chart.render();
        // 注意：需要把chart return 出來
        return chart;
      })


    })


    
  },
})

　你的資料格式是這個樣子的（如果返回格式不一致可自行處理）

 

 這個City欄位，你也可以寫標題，如果不寫，就是後面圖表配置顏色有個空欄位，不然你的圖表沒有顏色，用其他非空的欄位可能會報錯，配置可以看@antv的官網，這是兩個圖表結合的

wxml檔案

<view class="container_canvas">
<ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}" />
</view>