ECharts 柱状图渲染企业微信 WWOpenData 数据
根据需要渲染数据自己封装一下(部门数据示范)
type 不用说吧:userName 用户,departmentName部门
封装数据(后端返回数据封装成需要格式)
// 拿到后台反的(部门dep_id)
this.renderingData.push(
{
type:'departmentName',
id: // dep_ids
}
)
this.Rendering(this.renderingData) // 传入数据
异步拿到企业微信数据内容
Rendering(res){
// 初始
if (WWOpenData.initCanvas) {
WWOpenData.initCanvas()
}
// 异步回调
const myFun2 = async () => {
const result = await new Promise((resolve, reject) => {
// res 自己封装的数据
WWOpenData.prefetch({ res }, (err, data) => {
if (err) { return reject(err) }
resolve(data)
})
})
// 拿到渲染数据
result.items.map((v)=>{
console.log(v,'返回数据')
this.dep_name.push(v.data)
})
this.on_analysis() // ECharts 渲染函数
}
myFun2()
}
异步回调拿到的渲染数据是加密的你看到的会是乱码,是正常的,这就是要渲染的名字,如下图:
ECharts 渲染
// ECharts 渲染(option里面删了很多配置自己加吧)
on_analysis(){
this.option = {
xAxis: [{
// 名字
data: this.dep_name,
}],
series: [{
// 柱子
data: this.dep_data
}]
};
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('#Open_main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(this.option);
}
官网API链接: https://work.weixin.qq.com/api/doc/90001/90143/91958.