微信小程序中使用Echarts,数据从后台返回
下载微信小程序端的组件
官网介绍(微信小程序端的echarts组件)
微信小程序端echarts组件下载
下载成功之后，进行解压，把解压成功后的文件夹下的ec-canvas文件夹拷贝到你小程序的目录所在的文件夹下面
小程序分包
由于下载下来的微信小程序的Echarts组件过大，需要对小程序进行分包，才能让小程序好发布
官网小程序分包介绍
分包的特点
- 加载小程序的时候先加载主包，当需要访问分包的页面时候才加载分包内容
- 分包的页面可以访问主包的文件，数据，图片等资源
- 主包来源：除了分包以外的内容都会被打包到主包中,主包不能访问分包中的资源
- 通常放置启动页（小程序的登录/首页等）/tabBar页面
分包的步骤：
在app.json 中添加 subPackages字段声明分包结构
微信小程序中使用Echarts
在主页面的启动页面，添加按钮跳转到Echarts小程序页面
pages\index\index.wxml
<!--index.wxml-->
<button type="primary" style="width:400rpx" bindtap="toEchart">跳转到Echarts页面</button>
pages\index\index.js
Page({
data:{
},
/**
* 跳转到echarts页面
*/
toEchart(){
wx.navigateTo({
url: '/pagesA/test/index',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
引入ec-canvas组件
在微信小程序使用echarts的json文件中需引入"ec-canvas"组件
{
"usingComponents": {
"ec-canvas":"/pagesA/ec-canvas/ec-canvas"
}
}
在pagesA/test/index.wxml中引入中使用 < ec-canvas > 组件
<!--pagesA/test/index.wxml-->
<view class="bar">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{
{ ec }}"></ec-canvas>
</view>
在pagesA/test/index.wxss中设置页面图表大小
/* pagesA/test/index.wxss */
.bar{
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
ec-canvas {
width: 100%;
height: 100%;
}
在pagesA/test/index.js中手动加载图表
// pagesA/test/index.js
import * as echarts from '../ec-canvas/echarts';
Page({
/**
* 页面的初始数据
*/
data: {
ec: {
lazyLoad: true // 延迟加载,手动初始化图表
},
},
/**
* 加载柱状图
*/
loadBar(real,plan,title){
let line = this.selectComponent('#mychart-dom-bar')
line.init((canvas,width,height,dpr)=>{
const lineChart =echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
})
var lineOperation = {
backgroundColor:'#efefef',//折线图背景颜色
animation: false,//提高页面加载速度，关闭echart的动画
tooltip: {
// 提示框组件
trigger: 'axis'//触发提示框的方式：坐标轴触发
},
dataZoom:[{
start: 10,
type: "inside"
}],// 滑动条，缩放坐标轴（实现数据过多时候，可以手指滑动图表，查看超出页面的数据）
legend:{
data:['实际收入','预期收入'],
bottom: "1%" ,// 设置图例位于底部
},
grid: {
// 在直角坐标系中绘制图标
left: '0',
right: '0',
containLabel: true
},
xAxis: {
// x轴是目录
type: 'category',
boundaryGap: false,
data:title
},
yAxis: {
//y轴是数值
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed' // 分隔线线的类型为网格
}
}
},
series: [// 折线图数据
{
name: '实际收入',
type: 'line',
smooth: true, // 曲线平滑
symbol: 'circle', // 标记的图形(圆形)
symbolSize: 9, // 标记图形的大小
itemStyle: {
color: '#43CF7C' // 折线圆点颜色
},
lineStyle: {
color: '#43CF7C' // 折线线条颜色
},
emphasis: {
focus: 'series'
},
data:real
},
{
name: '预期收入',
type: 'line',
smooth: true, // 曲线平滑
symbol: 'circle', // 标记的图形(圆形)
symbolSize: 9, // 标记图形的大小
itemStyle: {
color: '#2A82E4' // 折线圆点颜色
},
lineStyle: {
color: '#2A82E4' // 折线线条颜色
},
emphasis: {
focus: 'series'
},
data:plan
}
]
}
lineChart.setOption(lineOperation)
return lineChart
})
},
formSearch(){
//模拟后台请求数据
let title = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
let real = []//实际收入
let plan = []//预期收入
for(let i=0;i<=12;i++){
let m= Math.round(Math.random()*10)
real.push(m)
}
for(let k=0;k<=12;k++){
let j= Math.round(Math.random()*10)
plan.push(j)
}
console.log('随机数据')
console.log(plan)
console.log(real)
// 传递后台数据到图表中，进行懒加载图表
this.loadBar(real,plan,title)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.formSearch()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
页面效果
