您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 微信小程序怎么引入引入echart图表

微信小程序怎么引入引入echart图表

ECharts 和微信小程序官方团队合作,提供了 ECharts 的微信小程序版本,ECharts图表技术在国内应该是最好的了,能结合到小程序应用真的是极好。

准备:小程序开发环境,下载ECharts组件,gitHub地址:ecomfe/echarts-for-weixin

要求小程序基础库:1.9.91(基本不用考虑版本兼容问题)

操作过程:把

5328670-601096d9d0455e1e.jpg

ec-canvas拷贝到项目根目录。

对应页面json文件引入组件:

{
  "navigationBarTitleText": "客户报表",
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

对应页面js文件:

import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
var list = []
var list1 = []

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['客户']
    },
    grid: {
      left: '1%',
      right: '30rpx',
      bottom: '1%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: list,
      name: '月份',
      nameGap: 2,
      axisLabel: {
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      name:'数量'
    },
    series: [
      {
        name: '客户',
        type: 'line',
        stack: '总量',
        data: list1
      }
    ]
  };

  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})


对应页面wxml文件:

      
        
        
      

至此,ECharts图表设置成功,option对象信息可以根据ECharts提供的文档进行设置,非常多。

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了