要怎么做数据可视化,才可以让自己的数据报表看起来比较脱颖而出?
年度总结的数据报表做得太烂了。
回答
楼主,如果你的报表 可以 (必须) 在 演播室 ( 或 报告厅/会议室/网络平台) 通过大屏幕展现,你是否想过 将 Echarts/HighChart + video 的两类文档数据,用浏览器来展现网页? (亦可将有关文档放到一个文件夹内,一并送上,请有关人员用浏览器审阅)。 这样一来, (比如,在报告厅向听众报告报表时),
- 视频 video (如延时摄影,或其它内容) 可以用作背景来衬托报表, 也可以反映数据变换的趋势;
- 不同元素(即视频与Echarts/Hifhcharts报表) 可以按照内容的主次关系,相互全部或部分,上下 层 (用 z-index 控制) 叠加,各层的透明度 ( CSS 中元素的 opacity: [0-1.0] 属性) 可以根据需要设置;
- 可以添加 音频, 并在各元素中保留(或添加)鼠标事件功能。
- 以下案例, 在<video ...></video> 元素内的视频为北京城市宣传片(z-index:1), 放在底层, 报表用 echarts 画在<div id="main" . ,></div> 元素( z-index:2; opacity:0.8;border-radius: 500px;) 内,<div> 元素为上层 。
- 若报表(div 元素)置于视频之上,原有的鼠标功就能保留。若置于视频之下,则鼠标功能(信号)会被屏蔽。
- ,,,,
这个案例,基于一个虚构场景:2020年东北大米产量, 以显示 echarts + video 报表的效果。使用浏览器, 运行 复制粘贴 下列代码 而得到的 html 文档,既可测试。
用 QQ浏览器、350急速浏览器、360安全浏览器、UC Browser 运行正常。
用 Google Chrome 视频不启动。
这样设置,echarts 创建的 鼠标功能可以全都保留,如
- 点击某一个给定的数据柱,该柱颜色变成黑色; 点击另一个柱,前次点击的柱子回复原来颜色。
- 鼠标悬停时的强调(emphasis)功能,被保留。
<html>
<head>
<meta charset="utf-8">
<title>Echarts + Video 报表</title>
<style>
#main{
position:absolute;
left:0px;
top:0px;
width:800px;
height:600px;
z-index:2;
opacity:0.8;
border-radius: 500px;
}
#vid{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
</style>
</head>
<body>
<div id="main" style="height:400px"></div>
<video id="vid" loop autoplay src="https://svideo.vjshi.com/2020-10-19/3ed40458ddd8470c927950c439382d54/11766-vjshi-hd.mp4"></video>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var colorList0 = ['rgb(205,85,85)','rgb(210,105,30)',
'rgb(0,139,0)','rgb(178,58,238)','rgb(54,100,139)',
'rgb(255,0,255)','rgb(255,0,111)','rgb(255,111,255)','rgb(111,0,255)'];
var colorList1 = ['rgb(205,85,85)','rgb(210,105,30)',
'rgb(0,139,0)','rgb(178,58,238)','rgb(54,100,139)',
'rgb(255,0,255)','rgb(255,0,111)','rgb(255,111,255)','rgb(111,0,255)'];
var option = {
title: {
text: '2020年 东北地区大米产量报表',
subtext:'单位:万元',
x:'center',
y:'top',
textAlign:'center'
},
tooltip: {
show: true
},
xAxis : [
{
type : 'category',
data : ["五常","盘锦","营口","榆树","建三江","方正","姜家店","舒兰","珍宝岛"]
}
],
yAxis : {
type : 'value',
axisLine: {
lineStyle: {
color: '#eee'
}
}
},
series : [
{
"name":"产量",
"type":"bar",
"data":[75, 40, 50, 30, 55, 34, 55,34,9],
//begin
itemStyle: {
normal:{
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
},
color: function (params){
return colorList1[params.dataIndex];
}
},
//鼠标悬停时:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
//end
}
]
};
//end
myChart.on('click', function(param) {
for (var i=0;i<colorList1.length;i++)
colorList1[i] = colorList0[i];
colorList1[param.dataIndex]='black';
myChart.setOption(option);
});
myChart.setOption(option);
}
);
</script>
</body>
</html>
Smartbi,只需要简单的鼠标拖拽维度和指标,即可快速生成图表。点选式数据预处理,智能的图表推荐,全程无需编写表达式,零学习成本,一分钟上手。
楼主曾推荐过 Smartbi:“报表软件测评来啦!Smartbi电子表格使用感受。” https://my.oschina.net/u/4897822/blog/4942133