欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
简单介绍
 
数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。
 
数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。
 
ECharts是一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
 
目前互联网需求
 
通用报表
 
地理可视化
 
图编辑&图分析
 
大屏可视化
 
移动端图表
 
常见数据可视化库
 
AntV蚂蚁金服全新一代数据可视化解决方案
 
Highcharts.js国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
 
ECharts.js百度出品的一个开源Javascript数据可视化库
 
D3.js :目前Web端评价最高的Javascript可视化工具库(入手难)
 
Echarts使用步骤
 
比如我们需要一个柱状图:
 
//1、引入JS文件
 
<script src="echarts.min.js"></script>
 
<!-- 2.准备一个具备大小的DOM容器 -->
 
    <div class="box">
 
    </div>
 
.box {
 
            width: 400px;
 
            height: 400px;
 
            background-color: pink;
 
        }
 
<script>
 
        // 3.初始化echarts实例对象
 
        var myChart = echarts.init(document.querySelector('.box'));
 
        // 4.指定图表的配置项和数据
 
        var option = {
 
            title: {
 
                text: 'ECharts 入门示例'
 
            },
 
            tooltip: {},
 
            legend: {
 
                data: ['销量']
 
            },
 
            xAxis: {
 
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
 
            },
 
            yAxis: {},
 
            series: [{
 
                name: '销量',
 
                type: 'bar',
 
                data: [5, 20, 36, 10, 10, 20]
 
            }]
 
        };
 
        // 5.使用刚指定的配置项和数据显示图表 设置给 实例对象。
 
        myChart.setOption(option);
 
        // 当我们浏览器缩放的时候,图表也等比例缩放
 
        window.addEventListener("resize", function () {
 
        // 让我们的图表调用 resize这个方法
 
        myChart.resize();
 
        });
 
    </script>
 
效果:
 
根据需求可在echarts官网查找想要的图表及进行效果修改
 
具体的参数可查询官方文档,这里附上几个常用参数
 
附上一个数据可视化项目:
 
【代码在文末】
 
面试题
 
一、DOM0级和DOM2级有什么区别
 
DOM0级中为某个dom元素绑定多个事件时,只有最后一个事件有效。onclick
 
DOM2级中可以为单个元素绑定多个事件,每个事件都可以被触发。addEventListener
 
二、textContent、innerText、innnerHTML、value的区别
 
textContent用来获取和设置文本内容,与innerText的差别是:textContent获取到的内容包
 
括了元素中的style标签和script标签的内容。
 
innerText只能获取和设置文本内容,不能获取和设置html代码
 
innerHTML可以获取和设置html代码

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64295.shtml