⼩程序动态循环渲染echarts
说明：第⼀次使⽤echarts在⼩程序中，且需要循环渲染，因官⽹中并没有提供⽅法，着实头疼了很久。好在实现了，在此做下记录。
思路：循环渲染，需要动态的数据传⼊，隐藏可在ec-canvas.js⽂件的 init⽅法中，设置⼀个动态的data参数，循环渲染即可
1.将下载的echarts包，载⼊到json⽂件中，路径根据⾃⾝情况载⼊即可
"usingComponents": {
"ec-canvas": "../../../ec-canvas/ec-canvas"
},
2.到下载的echarts包中，ec-canvas.js⽂件，对其添加data参数
  ⾸先，到改⽂件中接收的参数设置对象properties，新增要添加的data参数，在此将其命名为 tudata。
properties: {
canvasId: {
type: String,
value: 'ec-canvas'
},
ec: {
type: Object
},
tuData:{//这是新增的参数
type: Object
},
forceUseOldCanvas: {
type: Boolean,
value: false
}
},
  然后，将该参数传⼊⽅法中，（由于版本不同，⽅法可能不⼀样，但是，⼤致是差不多的，只需在使⽤（或者设置）参数的地⽅，将新增的参数添加上去即可。height,width，这两个是必传参数，凡是同时设置这两个参数的地⽅都将tudata添加上去即可)
methods: {
init: function (callback) {
const version = wx.getSystemInfoSync().SDKVersion
const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0;
const forceUseOldCanvas = this.data.forceUseOldCanvas;
const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas;
this.setData({ isUseNewCanvas });
if (forceUseOldCanvas && canUseNewCanvas) {
console.warn('开发者强制使⽤旧canvas，建议关闭');
}
if (isUseNewCanvas) {
// console.log('基础库版本⼤于2.9.0，开始使⽤<canvas type="2d"/>');
// 2.9.0 可以使⽤ <canvas type="2d"></canvas>
this.initByNewWay(callback);
} else {
const isValid = compareVersion(version, '1.9.91') >= 0
if (!isValid) {
<('基础库版本过低，需⼤于等于 1.9.91。'
+ '参见：github/ecomfe/echarts-for-weixin'
+ '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
return;
} else {
console.warn('建议将基础库调整⼤于等于2.9.0版本。升级后绘图将有更好性能');
this.initByOldWay(callback);
}
}
},
initByOldWay(callback) {
// 1.9.91 <= version < 2.9.0：原来的⽅式初始化
ctx = wx.createCanvasContext(this.data.canvasId, this);
const canvas = new WxCanvas(ctx, this.data.canvasId, false);
echarts.setCanvasCreator(() => {
return canvas;
});
// const canvasDpr = wx.getSystemInfoSync().pixelRatio // 旧的canvas不能传⼊dprsetoption
const canvasDpr = 1
var query = wx.createSelectorQuery().in(this);
query.select('.ec-canvas').boundingClientRect(res => {
if (typeof callback === 'function') {  //新增动态data参数回调函数中，需要添加tudata
this.chart = callback(canvas, res.width, res.height, this.data.tuData,canvasDpr);
}
else if ( && typeof Init === 'function') {  //新增this.data.tuData ⽤于动态赋值data this.chart = Init(canvas, res.width, res.height, this.data.tuData,canvasDpr);
}
else {
canvas: canvas,
width: res.width,
height: res.height,
tuData:this.data.tuData,  //新增data 参数
canvasDpr: canvasDpr // 增加了dpr，可⽅便外⾯echarts.init
});
}
}).exec();
},
initByNewWay(callback) {
// version >= 2.9.0：使⽤新的⽅式初始化
const query = wx.createSelectorQuery().in(this)
query
.select('.ec-canvas')
.fields({ node: true, size: true })
.
exec(res => {
const canvasNode = res[0].node
this.canvasNode = canvasNode
const canvasDpr = wx.getSystemInfoSync().pixelRatio
const canvasWidth = res[0].width
const canvasHeight = res[0].height
const ctx = Context('2d')
const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode)
echarts.setCanvasCreator(() => {
return canvas
})
if (typeof callback === 'function') {
this.chart = callback(canvas, canvasWidth, canvasHeight,this.data.tuData, canvasDpr)
} else if ( && typeof Init === 'function') {
this.chart = Init(canvas, canvasWidth, canvasHeight, this.data.tuData,canvasDpr)
} else {
canvas: canvas,
width: canvasWidth,
height: canvasHeight,
tuData:this.data.tuData,  //新增动态data参数
dpr: canvasDpr
})
}
})
},
canvasToTempFilePath(opt) {
if (this.data.isUseNewCanvas) {
// 新版
const query = wx.createSelectorQuery().in(this)
query
.select('.ec-canvas')
.fields({ node: true, size: true })
.
exec(res => {
const canvasNode = res[0].node
opt.canvas = canvasNode
wx.canvasToTempFilePath(opt)
})
} else {
// 旧的
if (!opt.canvasId) {
opt.canvasId = this.data.canvasId;
}
ctx.draw(true, () => {
wx.canvasToTempFilePath(opt, this);
});
}
},
touchStart(e) {
if (this.chart && e.touches.length > 0) {
var touch = e.touches[0];
var handler = Zr().handler;
handler.dispatch('mousedown', {
zrX: touch.x,
zrY: touch.y
});
handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y
});
handler.processGesture(wrapTouch(e), 'start');
}
},
touchMove(e) {
if (this.chart && e.touches.length > 0) {
var touch = e.touches[0];
var handler = Zr().handler;
handler.dispatch('mousemove', {
zrX: touch.x,
zrY: touch.y
});
handler.processGesture(wrapTouch(e), 'change');
}
},
touchEnd(e) {
if (this.chart) {
const touch = e.changedTouches ? e.changedTouches[0] : {};
var handler = Zr().handler;
handler.dispatch('mouseup', {
zrX: touch.x,
zrY: touch.y
});
handler.dispatch('click', {
zrX: touch.x,
zrY: touch.y
});
handler.processGesture(wrapTouch(e), 'end');
}
}
}
3.在wxml中使⽤。tuData="{{item.data}}" 动态data
<view class="container" wx:for="{{qsList}}" wx:key='*this' wx:for-item="item" wx:for-index="index">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" tuData="{{item.data}}" ec="{{ec}}"></ec-canvas> </view>
4.js中使⽤
function initChart(canvas, width, height,data) {  //data
console.log('成功了嘛--------------',data)
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
legend: {
orient: 'horizontal',  //vertical horizontal
left: 'center',
bottom: 0,
icon: 'circle',
itemGap: 10,
// formatter: '',
// 使⽤回调函数
formatter: function (name) {  //设为动态 data1 data2
for(let i of data){
if(i.name==name){return i.name + "  " + i.value +'⼈' }
}
}
},
series: [
{
type: 'pie',
radius: ['0%', '60%'],
center: ['50%', '42%'],
color: ['#7EC37B','#5588F7','#56CCF2','#6B8AD9','#BB6BD9','#EB5757','#F2994A','#F2C94C','#27AE60',],            label: {
formatter: '{per|{d}%}\n {b|{b}} ',
borderColor: 'red',
color: '#666',
fontSize: 13,
rich: {
a: {
color: '#666',
lineHeight: 22,
align: 'center'
},
hr: {
width: '100%',
height: 0
},
b: {
fontSize: 14,
lineHeight: 33
},
per: {
fontSize: 13,
color: '#666',
padding: [2, 1],
borderRadius: 2
}
},
},
labelLine: {
lineStyle: {
color: '#2E2E2E'
},
smooth: 0.2,
length: 10,
length2: 20
},
data: data  //设为动态 data1 data2
}
]
}
chart.setOption(option);
return chart;
}
page({
data:{
ec: {  //初始化数据⽤于渲染可动态添加            onInit: initChart
},
  qsList:[] ,  //数据集合
} })

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。