炫意html5
最早CSS3和HTML5移动技术网站之一

要怎么做数据可视化,才可以让自己的数据报表看起来比较脱颖而出?

年度总结的数据报表做得太烂了。

回答

楼主,如果你的报表 可以 (必须) 在 演播室 ( 或 报告厅/会议室/网络平台) 通过大屏幕展现,你是否想过 将 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

炫意HTML5 » 要怎么做数据可视化,才可以让自己的数据报表看起来比较脱颖而出?

CSS3教程HTML5教程