echarts微信小程序入门

JAY.LIN 收录于微信小程序前端开发

2024-12-30 约 518 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=81557438

echarts微信小程序入门

1.下载

下载echart微信小程序demo和库

2.引入到微信小程序中

1）创建一个新的快速启动模板微信小程序项目

参考例子路由：/pages/index/index

2）存放echart库

须将demo所有的ec-canvas里面的文件复制到微信小程序目录里面

本例子存放在根目录的lib里面

3）引入某页面的XXX.json,以调用echart canvas自定义组件

index.json //路径一定要正确否则会调用错误（json里面不可以添加注释，故在这里写）

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

4）布置某页面的XXX.wxml,echart的布局

index.wxml

<view class='chart-box'>
<ec-canvas id="chart1" canvas-id="chart1" ec="{{ ec1 }}"  ></ec-canvas>
</view>

index.wxss

//必须设置ec-canvas外面view的高宽，否则会ec-canvas会不显示
.chart-box{
background:white;
width:100%;
height:400px;
}

5）引入某页面的XXX.js,以初始化自定义组件

createChart.js //该文件路径在index目录下

const echarts = require('../../lib/ec-canvas/echarts')//路径一定要正确否则会调用错误
function initChart2(canvas, width, height) {
  var chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {//官网的echart配置项
    ……
  };
  chart.setOption(option);
  return chart;
}

module.exports={
  initChart1: initChart1
};

index.js

var charts=require('./createCharts.js')
Page({
data:{
 ec1: {onInit:charts.initChart1}
}
})

效果图如下

注意:

文件的路径和名称要正确
json,wxml,js都要设置才能使用