⼩程序遍历Echarts图表,实现多个饼图
如何在⼩程序中使⽤Echarts可以看我的另⼀个教程:
⾸先看⼀个简单的例⼦
1.wxml⽂件
<view style='width:100%;height:200rpx'>
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
2.js⽂件
import * as echarts from '../../common/ec-canvas/echarts';
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart);
var option = {
series: [
{
name: '访问来源',
type: 'pie',
radius: ['60%', '70%'],
animationType: 'scale',
silent: true,
labelLine: {setoption
normal: {
show: false
}
},
data: [
{value:10},
{value:3}
],
color: ["#666", "#179B16"]
}
]
}
chart.setOption(option);
return chart;
}
Page({
/**
* 页⾯的初始数据
*/
data: {
ec: {
onInit: initChart
}
}
})
3.json⽂件 (ec-canvas组件需要到官⽹下载,然后放到⼀个⽂件夹⾥⾯,然后在json⽂件中引⼊)
{
"usingComponents":{
"ec-canvas": "../../common/ec-canvas/ec-canvas"
}
}
4.效果图
需求:假如有⼀个列表,每⼀条数据表⽰⼀个班级,然后通过图表展⽰出:⼥⽣⼈数占全班⼈数的⽐率。(如:上⾯效果图中的灰⾊部分表⽰全班⼈数,绿⾊部分表⽰⼥⽣⼈数)。
假如你已经懂了Echarts的基本配置,不懂的可以先看看官⽅⽂档:
基于上⾯例⼦我们进⾏分析⼀下:
从wxml⽂件可以看出ec-canvas组件定义了两个属性canvas-id和ec ,这种⾃定义属性⼀般⽤来传参,也就是传⼀些参数给ec-canvas组件内部。canvas-id我们暂时先不管,看⼀下ec ,在js⽂件中data⾥⾯定义了ec ,
ec它是⼀个对象,并且有个属性onInit 它的值是initChart函数(不是执⾏之后的喔),通过ec属性将initChart函数传⼊了ec-canvas组件内部,这时我们可以知道,initChart函数是在ec-canvas组件⾥⾯执⾏的。
打开ec-canvas.js⽂件,简单的看⼀下源码:
上图的两个属性,是通过组件传参的⽅式传进来的:
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
因为initChart函数赋值给了ec对象的onInit属性,所以我们可以搜索⼀下onInit ,可以发现它在init函数⾥⾯,如图:
我们先捋⼀捋这个逻辑,⾸先在引⼊组件的时候,通过ec属性传了个对象到ec-canvas组件内部,⽽这个对象有个属性onInit 值为⼀个函数,然后进⼊ec-canvas.js⽂件,在ready钩⼦函数中,判断ec对象是否存在(也就是判断⽤户是否传了ec进来),
如果存在,执⾏init⽅法,在上图中可以发现,init⽅法内部会执⾏onInit⽅法(如果条件满⾜的话),然后将函数返回的chart实例赋值给this.chart。
实现代码如下:
假如我们有个ecTest Page页。
1.wxml代码
<view class='test' wx:for="{{itemList}}" wx:for-item="item">
<view>{{item.name}}</view>
<view style='width:100%;height:200rpx'>
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" tuData="{{item.data}}" ec="{{ ec }}"></ec-canvas>
</view>
</view>
2.js代码
import * as echarts from '../../common/ec-canvas/echarts';
function initChart(canvas, width, height ,data) {//这⾥多加⼀个参数
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart);
var option = {
series: [
{
name: '访问来源',
type: 'pie',
radius: ['60%', '70%'],
animationType: 'scale',
silent: true,
labelLine: {
normal: {
show: false
}
},
data: data,
color: ["#666", "#179B16"]
}
]
}
chart.setOption(option);
return chart;
}
Page({
/**
* 页⾯的初始数据
*/
data: {
ec: {
onInit: initChart
},
itemList:[
{ name: '⼀年级', data: [{ value: 10 }, { value: 1 }] },
{ name: '⼆年级', data: [{ value: 10 }, { value: 4 }] },
{ name: '三年级', data: [{ value: 10 }, { value: 7 }] },
]
}
})
3.修改ec-canvas.js⽂件(这个⽂件是从echarts官⽹下载的)
在wxml⽂件⾥,引⽤ec-canvas组件时,传了个tuData参数过去,所以我们需要在组件内部接收⼀下,在ec-canvas.js⽂件⾥⾯到properties对象,
properties: {
canvasId: {
type: String,
value: 'ec-canvas'
},
ec: {
type: Object
},
tuData:{//这是新增的参数
type: Object
}
}
4.到init⽅法,将tuData传⼊onInit⽅法⾥⾯即可
5.效果图
总结:因为chart实例是在ec-canvas组件内部才创建的,其它页⾯使⽤ec-canvas组件时,通过传参的⽅式,将实例化chart的⽅法通过ec属性传⼊ec-canvas组件内部进⾏实例化,
所以我们可以借助这⼀点,把我们的数据也通过传参的⽅式传⼊ec-canvas内部即可。

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