小程序怎么使用Echarts

一·使用前的准备工作
下载小程序的demo
为了兼容小程序 Canvas，ECharts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。

首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
复制里面的ec-canvas到自己的项目
然后在js中引入ec-canvas

import * as echarts from '../../ec-canvas/echarts';

在你想要使用图表的html的.json 文件添加

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

1，第一步定义 option 定义全局变量chartLine

function getOption(val) {
  var lineColor = "rgba(0,0,0,0.4)";
  var option = {

    title: {
      text: val.type,
      textStyle: {
        fontWeight: '500',
        fontSize: 15,
        color: '#000'
      },
      left: "center",
    },
    color: ["#1F67FF"],
    legend: {
      data: val.type,
      top: 50,
      left: 'center',

      z: 100
 
    },
    grid: {
      containLabel: true,
      top: '15%',
      left: '5%',
      right: '5%',
      bottom: '60rpx',
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      position: function (point, params, dom, rect, size) {
        // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
        // 提示框位置
        var x = 0; // x坐标位置
        var y = 0; // y坐标位置
        // 当前鼠标位置
        var pointX = point[0];
        var pointY = point[1];
        // 外层div大小
        // var viewWidth = size.viewSize[0];
        // var viewHeight = size.viewSize[1];
        // 提示框大小
        var boxWidth = size.contentSize[0];
        var boxHeight = size.contentSize[1];
        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
          x = 5;
        } else { // 左边放的下
          x = pointX - boxWidth;
        }
        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight > pointY) {
          y = 5;
        } else { // 上边放得下
          y = pointY - boxHeight;
        }
  
        return [x, y];
   }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: val.xData,
      axisLine: {
        show: false
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: lineColor
        }
      },
      axisLabel: {
        color: lineColor,
       
      }

    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: lineColor
        }
      },
      axisLine: {
        show:true,
        lineStyle: {
          color: lineColor
        }
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: lineColor
        }
      },
      axisLabel: {
        color: lineColor,
        formatter: function (value, index) {
          var value;
          if (value >= 10000 || value <= -10000) {
            value = value / 10000 + ' w';
          } else if (value < 10000) {
            value = value;
          }
          return value
        },

      },
      // show: false
    },
    series: [{
      name: val.type,
      type: 'line',
      smooth: true,

      data:val.yData,
      lineStyle:{
        width:1
      }
    }]
  };

  return option;
}

第二步在page的data里面做初始化

    ec: {
      onInit: function (canvas, width, height) {
        //初始化echarts元素，绑定到全局变量，方便更改数据
        chartLine = echarts.init(canvas, null, {
          width: width,
          height: height
        });
         canvas.setChart(chartLine);
 
        if (fanslist!=""){
//判断图表数据有没有渲染完成 没有渲染完成不让他渲染图表
          var option = getOption(fanslist);

          chartLine.setOption(option);

        }
       return chartLine
        
      }
    },

注意必须要把charLine return出去不然图表无法点击

3.在拿到图表数据的接口掉一次初始化不然第一次data进来数组空的不渲染图表

    app.func.req('/platform/user/statistics/inc/list', postdata, (res) => {
      if (res.data && res.data.followerList) {
        let fansechars = {
          yData: [],
          xData: [],
          type: "粉丝新增",
          id: "lineCanvas1"

        }


        for (let i = 0; i < res.data.followerList.length; i++) {
          fansechars.xData.push(util.hourToString(res.data.followerList[i].dateTime, 'L'))
          fansechars.yData.push(res.data.followerList[i].incCount)
        }

        fanslist = fansechars

        var option = getOption(fansechars);
        chartLine.setOption(option);
        chartLine.on('click',function(param){
        })
      }
     

    })

最后编辑于：2019.04.23 17:27:46