第一次用makedown编辑器写文章,感觉像得到一件利器,排版美观而且效率飙升。进入正题
$.get( "{% static 'json/rectTreeData.json' %}", function (obama_budget) {
myChart.hideLoading();
obama_budget数据里面的参数可以决定option里面需要用到的参数,可以直接在后端完整定义这个data,来自定义前端显示的图形形状,pyecharts的实现应该也是这种思路,echarts的api接口不是对所有问题需求都是可以很好满足的,幸好这里图形配置项定义可以直接在从原始数据中操作,前端自定义可以用下面的方式
第一种
obama_budget[4]["itemStyle" ]= { //
color : '#0000ff',
...
};
第二种
data.children[0].itemStyle = {
color : '#0000ff',
borderColor:'#0000ff'
...
};
后端自定义每个方块颜色可以这样实现
rectDictnode["name"]=node[0]
rectDictnode["value"]=nodebuf
rectDictnode["absName"]=filedir+node[0]
color=gerColorOfWeight(node[1][0],node[1][3])
color1="rgb("+str(color['red'])+','+str(color['green'])+','+str(color['blue'])+')'
#print(color1)
rectDictnode["itemStyle"]={"color":color1 }
最终形成echarts中需要的格式就可以
{
value: [1212, 4943, 5453],
absName:'root'
name: 'description of this node',
children: [...]
},
一些常用配置项代码中做注释:
function isValidNumber(num) {
return num != null && isFinite(num);
}
myChart.setOption(option = {
title: {
left: 'left', //标题显示位置
text: '缺陷分布', //主标题,副标题
subtext: '缺陷密度=缺陷数量/代码行数*1000 \n绿色表示该模块缺陷密度为0,红色越深的模块缺陷密度越大'
},
tooltip: {
formatter: function (info) { //自定义tooltip鼠标浮动提示,返回html
var value = info.value;
var lines = value[0];
lines = isValidNumber(lines)
? echarts.format.addCommas(lines )
: '-';
var errors = value[1];
errors = isValidNumber(errors)
? echarts.format.addCommas(errors)
: '-';
var warningsOrWeight = value[2];
warningsOrWeight = isValidNumber(warningsOrWeight)
? warningsOrWeight.toFixed(2) + '%'
: '-';
return [
'<div>' + echarts.format.encodeHTML(info.name) + '</div>',
'代码行数: ' + lines + '<br>',
'缺陷数量: ' + errors + '<br>',
'缺陷率: ' + warningsOrWeight
].join('');
}
},
series: [{
name: 'root', //这些配置项是对全局属性配置
top: 80,
type: 'treemap', //树形图类型
leafDepth: 1, //一次下钻深度
roam:'false', //不能缩放平移
label: { //显示文字标签定义
show: true,
formatter: "{b}", //定义显示的内容 {b}表示name
normal: {
textStyle: {
ellipsis: true //圆角
}
}
},
itemStyle: {
normal: {
borderColor: 'black' //方块分割边框颜色
}
},
borderWidth, gapWidth, borderColor 的解释
visualDimension: 2, //指定2『视觉映射』使用的是value数组的第3项
levels: [ //https://blog.csdn.net/dtq007/article/details/87879790
{ //钻入矩形树图的顶层
// colorSaturation: [0.1, 0.5], //设置颜色饱和度
color:['#269f3c', '#ca6872','#942e38'], //颜色列表,对于定义每个分块颜色不太理想
colorMappingBy: 'value', //颜色根据value设置
itemStyle: {
normal: {
borderWidth: 2, //方块外边框粗细
borderColor: '#333', //边框颜色
gapWidth: 1 //方块内部边框粗细
}
}
},
{ //钻入矩形树图的第二层
//color: ['#269f3c', '#ca6872','#942e38'],
//colorMappingBy: 'value',
itemStyle: {
normal: {
gapWidth: 1
}
}
},
{ //钻入矩形树图的第三层
//color: ['#269f3c', '#ca6872','#942e38'],
// colorMappingBy: 'value',
itemStyle: {
normal: {
borderWidth: 1,
}
}
},
{ //钻入矩形树图的第四层,没有的话就不用写了
//color: ['#269f3c', '#ca6872','#942e38'],
// colorMappingBy: 'value',
itemStyle: {
normal: {
borderWidth: 1,
}
}
}
],
data: obama_budget //设置数据来源
}]
});
最终效果,自己定义每个小方块的颜色,也将echarts矩形树图做成了我自已实现的树形图表的样子:
大数据时代,收集和使用数据的需求正在爆发式增长,数据可视化也变得愈加重要。开发人员在想方设法将不同数据库中的记录整合到仪表板和漂亮的图表中,向人们快速直观地展示信息。在过去十年中数据可视化技术不断改进
在本文中,我们将为你介绍可以用来构建自己的图表制作工具以及向软件中增添一些图形建模功能的 10+ 款 JavaScript 库。如今在浏览器中,你可以使用 JavaScript 渲染任何东西
vue首先安装Highcharts相关依赖npm install highcharts,柱状图展示组件代码如图所示: piechart.vue;树状图中的点(矩形)的颜色是由和它同级的数据点的值来计算的。
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图
echarts-for-weixin是 ECharts 官方维护的一个开源项目,提供了一个微信小程序 组件 (Component),我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!