微信小程序中使用echarts

简单的使用echarts不难，只是在小程序里用echarts有些理不清。最近项目中有个需求，在小程序里作个折线图，对比如今已有的小程序图表插件，ECharts、AntVF2、wxCharts, 建议使用前两个，wxCharts好久没有维护过了，并且功能也没有前两个丰富，可是wxCharts体积小，若是功能知足，可使用后者。

ECharts github.com/ecomfe/echa…

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

AntVF2 github.com/antvis/wx-f…

AntVF2文档 www.yuque.com/antv/f2/get…

wxCharts github.com/xiaolin3303…

我要实现的效果是下面这样的，我就选择了用ECharts和AntVF2，ECharts和AntVF2中的绝大部分功能都支持小程序版本,直接看文档配置就能够啦

1.下载组件&引用

在git上下载项目后，将目录中的ec-canvas文件夹复制到本身的项目中，好比我放组件的目录是components,我就放在components目录下，components/ec-canvas

找到本身项目中要使用组件的页面，好比：charts.wxml 、 charts.js 、charts.wxss 、charts.json ,在charts.json中引入组件

{
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}
复制代码

2.生成图表（基础使用）

在charts.wxml中建立一个容器，并建立组件

<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.优化（获取数据成功后生成图表）

在数据肯定的状况下直接在第二步就能够生成图表，可是不少时候都是从接口拿到数据后再渲染图表，这时候就须要动态传入参数，而且延迟加载图表。

1. 单独写个获取option函数，在图表初始化的时候将初始化数据传入生成图表。（初始化的时候chart.setOption(option),能防止页面加载的时候图表处空白。若是等加载完数据再chart.setOption(option)，图表处会空白，影响用户体验）
2. initChart() 后，会返回一个chart实例后续能够经过这个实例去改变图表中的数据
3. 数据获取成功后，将自定义参数传入getOption(chartsData),获取option配置，调用chartsetOption(option)就能更新图表中的数据啦
4. 必定要在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);
	})
    }
  
})
复制代码

Q&A

Q: 直接下载下来的代码体积太大怎么办，>700kb了，怎么压缩包的体积？

A:

ec-canvas 目录下有一个 echarts.js默认咱们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。若有必要，能够自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减少文件大小。

官方readme有这么个提示，能够根据本身的需求自定义构建，自定义下来包会小不少

Q: 怎么获取图表实例,在哪里获取

A: initChart() 返回的即为图表实例,在onLoad()中获取

---

ECharts在小程序里的用法就写到这里啦，有不对的地方欢迎你们指出～