uCharts：一个支持多平台的图表js控件
不是恰饭哈，只是最近刚巧一个项目要页面上做比较多的图表，用专业点的术语叫数据透视页。
所以找了下看什么现成的控件适合使用。
要求比较低
部署简易、兼容微信、支持柱状、折线、雷达图、能找到开发团队交流反馈bug就好。
后来找到了 uCharts
官网：https://www.ucharts.cn/
git: https://gitee.com/uCharts/uCharts
文档： http://doc.ucharts.cn/
项目需要保密，但我用它美化了一下自己的博客，右上角增加了实时的热门tags，用了控件的词云图 类型实现。
以下是部署简要笔记
HTML 部分
<head>
...
<!--//增加jquery和uchart组件-->
<!--//jquery并不是必须，只是下文js简化书写用到了选择器-->
<script src="/blog/admin/js/jquery.js"></script>
<script src="/blog/my/js/u-charts.min.js"></script>
...
</head>
<body>
...
<!--//词云图-->
<div>
<h3 class="widget-title">热门 Tags</h3>
<canvas id="uchartTags" width="210px" height="200px" style="border:0;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
...
JS部分
//在引用 u-charts.js 之后
var canvaWord; //uChart对象
var colors = ['#227','#348','#469','#57A','#68C','#79D','#8AE']; //自定义的tags的色盘，不定义则默认为彩色
function showWords(canId,chartData){
canvaWord=new Charts({
canvasId: canId,
type: 'word',
background:'transparent',
colors:colors,
pixelRatio:1,
series: chartData.series,
width: 210,
height: 200,
extra: {
word: {
type: 'normal'
}
}
});
}
//定义关键词的点击交互事件
$('#uchartTags')[0].onmousedown=function(e) {
canvaWord.showToolTip(getH5Offset(e), {
format: function (item) {
window.open('/blog/index.php/tag/'+ item.name ,'_blank',''); //打开关键词的检索结果页
return item.name + ':' + item.data
}
});
};
//从接口加载关键词的数据
$.get("/blog/my/api/tagsmap.php",function(res){
if(res.code==200){
showWords("uchartTags",res); //绘画词云图
}else{
console.log("load tags api err.");
}
},"json");
emm相当简单，不错不错。就决定用它了
