微信小程序中使用echarts

時間 2019-11-16

標籤微信程序使用 echarts 简体版

原文原文鏈接

簡單的使用echarts不難，只是在小程序裏用echarts有些理不清。最近項目中有個需求，在小程序裏作個折線圖，對比如今已有的小程序圖表插件，ECharts、AntVF2、wxCharts, 建議使用前兩個，wxCharts好久沒有維護過了，並且功能也沒有前兩個豐富，可是wxCharts體積小，若是功能知足，可使用後者。javascript

ECharts github.com/ecomfe/echa…css

ECharts文檔 echarts.baidu.com/option.html…html

AntVF2 github.com/antvis/wx-f…java

AntVF2文檔 www.yuque.com/antv/f2/get…git

wxCharts github.com/xiaolin3303…github

我要實現的效果是下面這樣的，我就選擇了用ECharts和AntVF2，ECharts和AntVF2中的絕大部分功能都支持小程序版本,直接看文檔配置就能夠啦json

1.下載組件&引用

在git上下載項目後，將目錄中的ec-canvas文件夾複製到本身的項目中，好比我放組件的目錄是components,我就放在components目錄下，components/ec-canvascanvas

找到本身項目中要使用組件的頁面，好比：charts.wxml 、 charts.js 、charts.wxss 、charts.json ,在charts.json中引入組件小程序

{
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}
複製代碼

2.生成圖表（基礎使用）

在charts.wxml中建立一個容器，並建立組件promise

<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
複製代碼

charts.wxss 裏容器的大小就是圖表的大小，能夠根據自身需求修改

.chares {
    width: 100%;
    height: 500rpx;
    background: #fff;
}
複製代碼

在charts.js 引入echarts.js，建立一個chart全局變量，在option中傳入配置項就能夠生成想要的圖表了

import * as echarts from '../../../../components/ec-canvas/echarts';
const chart = null;
function initChart(canvas, width, height) {   
    chart = echarts.init(canvas, null, {    
        width: width,
        height: height
    });
    canvas.setChart(chart);

    var option = {
        ...
    };
    chart.setOption(option);
    return chart;
    };
    Page({  
        data: {
            ec: {
                onInit: initChart
            }
        }, 
    })
複製代碼

3.優化（獲取數據成功後生成圖表）

在數據肯定的狀況下直接在第二步就能夠生成圖表，可是不少時候都是從接口拿到數據後再渲染圖表，這時候就須要動態傳入參數，而且延遲加載圖表。

單獨寫個獲取option函數，在圖表初始化的時候將初始化數據傳入生成圖表。（初始化的時候chart.setOption(option),能防止頁面加載的時候圖表處空白。若是等加載完數據再chart.setOption(option)，圖表處會空白，影響用戶體驗）
initChart() 後，會返回一個chart實例後續能夠經過這個實例去改變圖表中的數據
數據獲取成功後，將自定義參數傳入getOption(chartsData),獲取option配置，調用chartsetOption(option)就能更新圖表中的數據啦
必定要在onReady裏獲取chart實例哦，onShow和onLoad裏chart實例會返回undefined

import * as echarts from '../../../../components/ec-canvas/echarts';
let chart = null;
function initChart(canvas, width, height) {
   chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);
  let chartsData = {
    title: '',
    xData: [0],         //x軸刻度數據
    yData: {            //y軸刻度數據
      min: 20,
      max: 80,
      unit: '%'
    },
    sData: [0]          //實際數據
  }
  var option = getOption(chartsData);
  chart.setOption(option);
  return chart;
};
/* 獲取option配置 */
function getOption({title,xData,yData,sData} = chartsData) {
  var option = {
    title: {
      text: title,
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      },
      
    },
    color: ["#64A975"],
    legend: {
      data: ['A'],
      top: 0,
      bottom: 'bottom',
      z: 100
    },
    grid: {
      containLabel: true,
      left: 20,
    },
    tooltip : {                         //提示
      position: function (point, params, dom, rect, size) {
        // 固定在頂部
        return [point[0], '10%'];
    },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
        }
    },
  },
    xAxis: {                        //x軸
      axisPointer: {
        show: true
      },
      type: 'category',
      boundaryGap: true,
      data: xData,
      show: true
    },
    yAxis: {                        //y軸
      name: yData.unit,
      type: 'value',
      min: 0,
      max: 100,
      interval: 20,
    },
    visualMap: {                    //視覺映射組件
      show: false,
      dimension: 0,

     dimension:1, 
     continuous: {
         orient: 'horizontal'
     },
      pieces: [{
          lt: yData.min,
          color: '#D76C6C'
      }, {
          gte: yData.min,
          lte: yData.max,
          color: '#64A975'
      }, {
          gt: yData.max,
          color: '#D76C6C'
      },]
  },
    series: [{                      //圖表類型
      type: 'line',
        symbol: 'circle',
        symbolSize: 8,
        smooth: false,
        data: sData,
    }]
  };
  return option;
}
Page({
    data: {
        ec: {
        onInit: initChart
        }
    },

    onReady() {
        this.randerCharts()
    },
    /* 獲取接口 */
    randerCharts () {
	utils.promiseRequest(url,'get').then( res=> {
			if(res.data.code == 0) {
				...  //接口獲取成功的操做
			}
		}).then(res=>{
			let chartsData = {
            title: '血脂',
            xData: ['2019.01.01','2018.03.04','2017.03.04','2016.03.04','2015.03.04','2014.03.04'],
            yData: {
                min: 30,
                max: 80,
                unit: '%'
            },
            sData: [10,50,70,90,25,80]
            }
            var option = getOption(chartsData);
            chart.setOption(option);
	})
    }
  
})
複製代碼