微信小程序中使用echarts

8,754 阅读4分钟

简单的使用echarts不难,只是在小程序里用echarts有些理不清。最近项目中有个需求,在小程序里做个折线图,对比现在已有的小程序图表插件,EChartsAntVF2wxCharts, 建议使用前两个,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…

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

折线图

1.下载组件&引用

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

找到自己项目中要使用组件的页面,比如:charts.wxmlcharts.jscharts.wxsscharts.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实例哦,onShowonLoadchart实例会返回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在小程序里的用法就写到这里啦,有不对的地方欢迎大家指出~