小程序echart使用

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: initChart() 返回的即为图表实例,在onLoad()中获取