示例
词云图
PCPhonePad
<page style='padding: 10px'>
<module height='400px' style='margin: 0'>
<customchart :options='options' :beforeRender='beforeRender21'>
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
data: [
{
'name': '花鸟市场',
'value': 1446,
},
{
'name': '汽车',
'value': 928,
},
{
'name': '视频',
'value': 906,
},
{
'name': '电视',
'value': 825,
},
{
'name': 'Lover Boy 88',
'value': 514,
},
{
'name': '动漫',
'value': 486,
},
{
'name': '音乐',
'value': 5999,
},
{
'name': '直播',
'value': 163,
},
{
'name': '广播电台',
'value': 86,
},
{
'name': '戏曲曲艺',
'value': 17,
},
{
'name': '演出票务',
'value': 6,
},
{
'name': '给陌生的你听',
'value': 1,
},
{
'name': '资讯',
'value': 1437,
},
{
'name': '商业财经',
'value': 422,
},
{
'name': '娱乐八卦',
'value': 353,
},
{
'name': '军事',
'value': 331,
},
{
'name': '科技资讯',
'value': 313,
},
{
'name': '社会时政',
'value': 307,
},
{
'name': '时尚',
'value': 43,
},
{
'name': '网络奇闻',
'value': 15,
},
{
'name': '旅游出行',
'value': 438,
},
{
'name': '景点类型',
'value': 957,
},
{
'name': '国内游',
'value': 927,
},
{
'name': '远途出行方式',
'value': 908,
},
{
'name': '酒店',
'value': 693,
},
{
'name': '关注景点',
'value': 611,
},
{
'name': '旅游网站偏好',
'value': 512,
},
{
'name': '出国游',
'value': 382,
},
{
'name': '交通票务',
'value': 312,
},
{
'name': '旅游方式',
'value': 187,
},
{
'name': '旅游主题',
'value': 163,
},
{
'name': '港澳台',
'value': 104,
},
{
'name': '本地周边游',
'value': 3,
},
{
'name': '小卖家',
'value': 1331,
},
{
'name': '全日制学校',
'value': 941,
},
{
'name': '基础教育科目',
'value': 585,
},
{
'name': '考试培训',
'value': 473,
},
{
'name': '语言学习',
'value': 358,
},
{
'name': '留学',
'value': 246,
},
{
'name': 'K12课程培训',
'value': 207,
},
{
'name': '艺术培训',
'value': 194,
},
{
'name': '技能培训',
'value': 104,
},
{
'name': 'IT培训',
'value': 87,
},
{
'name': '高等教育专业',
'value': 63,
},
{
'name': '家教',
'value': 48,
},
{
'name': '体育培训',
'value': 23,
},
{
'name': '职场培训',
'value': 5,
},
{
'name': '金融财经',
'value': 1328,
},
{
'name': '银行',
'value': 765,
},
{
'name': '股票',
'value': 452,
},
{
'name': '保险',
'value': 415,
},
{
'name': '贷款',
'value': 253,
},
{
'name': '基金',
'value': 211,
},
{
'name': '信用卡',
'value': 180,
},
{
'name': '外汇',
'value': 138,
},
{
'name': 'P2P',
'value': 116,
},
{
'name': '贵金属',
'value': 98,
},
{
'name': '债券',
'value': 93,
},
{
'name': '网络理财',
'value': 92,
},
{
'name': '信托',
'value': 90,
},
{
'name': '征信',
'value': 76,
},
{
'name': '期货',
'value': 76,
},
{
'name': '公积金',
'value': 40,
},
{
'name': '银行理财',
'value': 36,
},
{
'name': '银行业务',
'value': 30,
},
{
'name': '典当',
'value': 7,
},
{
'name': '海外置业',
'value': 1,
},
{
'name': '汽车',
'value': 1309,
},
{
'name': '汽车档次',
'value': 965,
},
{
'name': '汽车品牌',
'value': 900,
},
{
'name': '汽车车型',
'value': 727,
},
{
'name': '购车阶段',
'value': 461,
},
{
'name': '二手车',
'value': 309,
},
{
'name': '汽车美容',
'value': 260,
},
{
'name': '新能源汽车',
'value': 173,
},
{
'name': '汽车维修',
'value': 155,
},
{
'name': '租车服务',
'value': 136,
},
{
'name': '车展',
'value': 121,
},
{
'name': '违章查询',
'value': 76,
},
{
'name': '汽车改装',
'value': 62,
},
{
'name': '汽车用品',
'value': 37,
},
{
'name': '路况查询',
'value': 32,
},
{
'name': '汽车保险',
'value': 28,
},
{
'name': '陪驾代驾',
'value': 4,
},
{
'name': '网络购物',
'value': 1275,
},
{
'name': '做我的猫',
'value': 1088,
},
{
'name': '只想要你知道',
'value': 907,
},
{
'name': '团购',
'value': 837,
},
{
'name': '比价',
'value': 201,
},
{
'name': '海淘',
'value': 195,
},
{
'name': '移动APP购物',
'value': 179,
},
{
'name': '支付方式',
'value': 119,
},
{
'name': '代购',
'value': 43,
},
{
'name': '体育健身',
'value': 1234,
},
{
'name': '体育赛事项目',
'value': 802,
},
{
'name': '运动项目',
'value': 405,
},
{
'name': '体育类赛事',
'value': 337,
},
{
'name': '健身项目',
'value': 199,
},
{
'name': '健身房健身',
'value': 78,
},
{
'name': '运动健身',
'value': 77,
},
{
'name': '家庭健身',
'value': 36,
},
{
'name': '健身器械',
'value': 29,
},
{
'name': '办公室健身',
'value': 3,
},
{
'name': '商务服务',
'value': 1201,
},
{
'name': '法律咨询',
'value': 508,
},
{
'name': '化工材料',
'value': 147,
},
{
'name': '广告服务',
'value': 125,
},
{
'name': '会计审计',
'value': 115,
},
{
'name': '人员招聘',
'value': 101,
},
{
'name': '印刷打印',
'value': 66,
},
{
'name': '知识产权',
'value': 32,
},
{
'name': '翻译',
'value': 22,
},
{
'name': '安全安保',
'value': 9,
},
{
'name': '公关服务',
'value': 8,
},
{
'name': '商旅服务',
'value': 2,
},
{
'name': '展会服务',
'value': 2,
},
{
'name': '特许经营',
'value': 1,
},
{
'name': '休闲爱好',
'value': 1169,
},
{
'name': '收藏',
'value': 412,
},
{
'name': '摄影',
'value': 393,
},
{
'name': '温泉',
'value': 230,
},
{
'name': '博彩彩票',
'value': 211,
},
{
'name': '美术',
'value': 207,
},
{
'name': '书法',
'value': 139,
},
{
'name': 'DIY手工',
'value': 75,
},
{
'name': '舞蹈',
'value': 23,
},
{
'name': '钓鱼',
'value': 21,
},
{
'name': '棋牌桌游',
'value': 17,
},
{
'name': 'KTV',
'value': 6,
},
{
'name': '密室',
'value': 5,
},
{
'name': '采摘',
'value': 4,
},
{
'name': '电玩',
'value': 1,
},
{
'name': '真人CS',
'value': 1,
},
{
'name': '轰趴',
'value': 1,
},
{
'name': '家电数码',
'value': 1111,
},
{
'name': '手机',
'value': 885,
},
{
'name': '电脑',
'value': 543,
},
{
'name': '大家电',
'value': 321,
},
{
'name': '家电关注品牌',
'value': 253,
},
{
'name': '网络设备',
'value': 162,
},
{
'name': '摄影器材',
'value': 149,
},
{
'name': '影音设备',
'value': 133,
},
{
'name': '办公数码设备',
'value': 113,
},
{
'name': '生活电器',
'value': 67,
},
{
'name': '厨房电器',
'value': 54,
},
{
'name': '智能设备',
'value': 45,
},
{
'name': '个人护理电器',
'value': 22,
},
{
'name': '服饰鞋包',
'value': 1047,
},
{
'name': '服装',
'value': 566,
},
{
'name': '饰品',
'value': 289,
},
{
'name': '鞋',
'value': 184,
},
{
'name': '箱包',
'value': 168,
},
{
'name': '奢侈品',
'value': 137,
},
{
'name': '母婴亲子',
'value': 1041,
},
{
'name': '孕婴保健',
'value': 505,
},
{
'name': '母婴社区',
'value': 299,
},
{
'name': '早教',
'value': 103,
},
{
'name': '奶粉辅食',
'value': 66,
},
{
'name': '童车童床',
'value': 41,
},
{
'name': '关注品牌',
'value': 271,
},
{
'name': '宝宝玩乐',
'value': 30,
},
{
'name': '母婴护理服务',
'value': 25,
},
{
'name': '纸尿裤湿巾',
'value': 16,
},
{
'name': '妈妈用品',
'value': 15,
},
{
'name': '宝宝起名',
'value': 12,
},
{
'name': '童装童鞋',
'value': 9,
},
{
'name': '胎教',
'value': 8,
},
{
'name': '宝宝安全',
'value': 1,
},
{
'name': '宝宝洗护用品',
'value': 1,
},
{
'name': '软件应用',
'value': 1018,
},
{
'name': '系统工具',
'value': 896,
},
{
'name': '理财购物',
'value': 440,
},
{
'name': '生活实用',
'value': 365,
},
{
'name': '影音图像',
'value': 256,
},
{
'name': '社交通讯',
'value': 214,
},
{
'name': '手机美化',
'value': 39,
},
{
'name': '办公学习',
'value': 28,
},
{
'name': '应用市场',
'value': 23,
},
{
'name': '母婴育儿',
'value': 14,
},
{
'name': '游戏',
'value': 946,
},
{
'name': '手机游戏',
'value': 565,
},
{
'name': 'PC游戏',
'value': 353,
},
{
'name': '网页游戏',
'value': 254,
},
{
'name': '游戏机',
'value': 188,
},
{
'name': '模拟辅助',
'value': 166,
},
{
'name': '个护美容',
'value': 942,
},
{
'name': '护肤品',
'value': 177,
},
{
'name': '彩妆',
'value': 133,
},
{
'name': '美发',
'value': 80,
},
{
'name': '香水',
'value': 50,
},
{
'name': '个人护理',
'value': 46,
},
{
'name': '美甲',
'value': 26,
},
{
'name': 'SPA美体',
'value': 21,
},
{
'name': '花鸟萌宠',
'value': 914,
},
{
'name': '绿植花卉',
'value': 311,
},
{
'name': '狗',
'value': 257,
},
{
'name': '其他宠物',
'value': 131,
},
{
'name': '水族',
'value': 125,
},
{
'name': '猫',
'value': 122,
},
{
'name': '动物',
'value': 81,
},
{
'name': '鸟',
'value': 67,
},
{
'name': '宠物用品',
'value': 41,
},
{
'name': '宠物服务',
'value': 26,
},
{
'name': '书籍阅读',
'value': 913,
},
{
'name': '网络小说',
'value': 483,
},
{
'name': '关注书籍',
'value': 128,
},
{
'name': '文学',
'value': 105,
},
{
'name': '报刊杂志',
'value': 77,
},
{
'name': '人文社科',
'value': 22,
},
{
'name': '建材家居',
'value': 907,
},
{
'name': '装修建材',
'value': 644,
},
{
'name': '家具',
'value': 273,
},
{
'name': '家居风格',
'value': 187,
},
{
'name': '家居家装关注品牌',
'value': 140,
},
{
'name': '家纺',
'value': 107,
},
{
'name': '厨具',
'value': 47,
},
{
'name': '灯具',
'value': 43,
},
{
'name': '家居饰品',
'value': 29,
},
{
'name': '家居日常用品',
'value': 10,
},
{
'name': '生活服务',
'value': 883,
},
{
'name': '物流配送',
'value': 536,
},
{
'name': '家政服务',
'value': 108,
},
{
'name': '摄影服务',
'value': 49,
},
{
'name': '搬家服务',
'value': 38,
},
{
'name': '物业维修',
'value': 37,
},
{
'name': '婚庆服务',
'value': 24,
},
{
'name': '二手回收',
'value': 24,
},
{
'name': '鲜花配送',
'value': 3,
},
{
'name': '维修服务',
'value': 3,
},
{
'name': '殡葬服务',
'value': 1,
},
{
'name': '求职创业',
'value': 874,
},
{
'name': '创业',
'value': 363,
},
{
'name': '目标职位',
'value': 162,
},
{
'name': '目标行业',
'value': 50,
},
{
'name': '兼职',
'value': 21,
},
{
'name': '期望年薪',
'value': 20,
},
{
'name': '实习',
'value': 16,
},
{
'name': '雇主类型',
'value': 10,
},
{
'name': '星座运势',
'value': 789,
},
{
'name': '星座',
'value': 316,
},
{
'name': '算命',
'value': 303,
},
{
'name': '解梦',
'value': 196,
},
{
'name': '风水',
'value': 93,
},
{
'name': '面相分析',
'value': 47,
},
{
'name': '手相',
'value': 32,
},
{
'name': '公益',
'value': 90,
},
],
},
},
beforeRender21(opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/, callback/*词云图特殊处理*/, lighting/*高亮色*/) {
/*词云图的异步特殊性，需要特殊处理*/
var data = options.data;
data.map((el, index) => {
el.textStyle = {
color: colors[ index % colors.length ].color,
};
return el;
});
// 词云图图像
var image1 = 'data:image/png;base64,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';
var maskResource = new Image();
maskResource.onload = function() {
callback && callback({
series: {
maskImage: maskResource,
//词的类型
type: 'wordCloud',
//设置字符大小范围
sizeRange: [6, 78],
rotationRange: [-45, 90],
// textStyle: {
// normal: {
// //生成随机的字体颜色
// color: function() {
// return 'rgb(' + [
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160)
// ].join(',') + ')';
// }
// }
//
// },
//不要忘记调用数据
data,
},
});
};
maskResource.src = image1;
return null;
},
});
Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 端 | 版本 |
|---|---|---|---|---|---|---|
| options | 图表配置，符合echart配置项 | string | PC/Mobile | -- |
event
| 参数 | 说明 | 类型 | 端 | 版本 |
|---|---|---|---|---|
| beforeRender | 每次渲染前处理options,参数(opt,options,color,callback,lighting高亮色)，需要返回真实options | function | PC/Mobile | -- |
| chart | chart实例，用于自定义chart事件处理 | chartInstance | PC/Mobile | -- |
beforeRender
| 参数 | 说明 | 类型 | 端 | 版本 |
|---|---|---|---|---|
| opt | 系统默认配置包含tooltip\ xAxis\ yAxis\grid\legend | String | PC/Mobile | -- |
| options | 用户配置项 | function | PC/Mobile | -- |
| colors | 当前渲染颜色 (使用默认即可) | Array | PC/Mobile | -- |
| lighting | 高亮颜色 (使用默认即可) | Array | PC/Mobile | -- |