前端学习-数据可视化（个人笔记）
一、数据可视化项目概述
1.项目技术
1）HTML+CSS3布局
2）CSS3动画、渐变
3）jQuery库+原生JavaScript
4）flex布局和renm适配方案
5）图片边框border-image
6）ES6模板字符
7）ECharts可视化库等等
2.大数据可视化项目代码比例
3.ECharts简介
官网地址：
ECharts是一个使用JavaScript实现的开源可视化库。
简单来说就是 js库或js插件。
开源免费
二、ECharts使用步骤
步骤1.下载并引入echarts.js文件
步骤2.准备一个具备大小的DOM容器
<style>
.box {
width: 500px;
height: 500px;
background-color: #ff9;
}
</style>
<body>
<div class="box"></div>
</body>
<script>
//步骤3.初始化ECharts实例对象
var myECharts = echarts.init(document.querySelector(".box"));
//步骤4.指定配置项和数据，即在官网选择一个你想要图表
var options; //要先声明options
option = {
title: {
text: Referer of a Website,
subtext: Fake Data,
left: center
},
tooltip: {
trigger: item
},
legend: {
orient: vertical,
left: left
},
series: [
{
name: Access From,
type: pie,
radius: 50%,
data: [
{ value: 1048, name: Search Engine },
{ value: 735, name: Direct },
{ value: 580, name: Email },
{ value: 484, name: Union Ads },
{ value: 300, name: Video Ads }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: rgba(0, 0, 0, 0.5)
}
}
}
]
};
//步骤5.将配置项设置给实例化对象
myECharts.setOption(option);
</script>
步骤3.初始化ECharts实例对象，在<script></script>内
var myECharts = echarts.init(document.querySelector(".box"));
步骤4.指定配置项和数据，即在官网选择一个你想要图表，在<script></script>内复制代码
步骤5.将配置项设置给实例化对象
//步骤5.将配置项设置给实例化对象 myECharts.setOption(option);
下一篇：
socket接收并显示16进制的数据