目录
前言
当今社会,数据已经成为了我们最重要的资产之一。每一个领域都有着大量的数据,而对于企业来说,如何更好地利用这些数据就显得尤为关键。数据可视化是将数据转化为图形的过程,使得数据的本质更加清晰、易于理解。数据可视化大屏就是一个将数据可视化展示在大屏幕上的工具,可以帮助企业快速掌握数据的状态和趋势,更好地进行决策。
本次数据可视化大屏数据来自数据分析:10个领域的70+数据集,你都知道嘛? - 知乎 (zhihu.com)
一、数据清洗
1.去除重复值
本次所需的数据来着两个表,因为过程大差不差,所以只展示一个表格的清洗过程。
导入数据表格:
使用序列对象的内置方法--drop_duplicates()来进行重复值处理,其中drop_duplicates()方法的参数即用法:
1)subset:当重对象是表格对象时使用,用来指定去重依据的字段
2)keep:指定去重后保留的行,first表示第一行,last表示最后一行
3)inplace:表示是否对原始数据生效(是否保留在原表)
具体代码如下:
2.处理缺失值
思路:用表格对象,isnull().sum()方法查看每列缺失值的数量,用dropna()方法将缺失值删除
3.处理异常值
画箱线图找出异常值
然后将异常值删除并索引重置保存到原表中,最后将清洗好的表格导出
二、数据处理(将数据打包成绘制需要的格式)
在使用 Echarts 进行数据可视化的开发中,数据处理是非常重要的环节。我们需要将不同的数据源整理成 Echarts 所要求的数据格式,才能将其绘制出来。
1.条形图数据处理
由于现在数据表中update_time列不是时间对象,所以要先转换成时间对象后再进行数据处理,用pd.to_datetime()方法进行转换并在表格中新建一列date存放,代码如下:
筛选出2016年11月11日的数据并按店名分组对comment_count列求和,分组用到的方法是groupby(by="字段名")。将分组求和出来的数据按店名,评论数存到一个字典对象中
2.折线图数据处理
3.玫瑰图数据处理
4.柱状图数据处理
5.词云图数据处理
用jieba对标题列进行分词分词性后统计名词出现的次数后打包成字典格式
6.饼图数据处理
将价格分箱后对每个区间的频数统计
三、绘制小图
1.轮播条形图
条形图是在柱状图的基础上把x轴和y轴的类型和数据交换
设置轮播显示的核心代码是在dataZoom配置项中
yAxisIndex: 0 //从y轴的0刻度开始
startValue: 0 // 从头开始
endValue: 7 // 一次性展示9个
设置autoMove ()函数,来轮流播放
//轮播条形图,2016年11-11日每个店铺的评论总数
var left1Chart = echarts.init(document.querySelector(".left1 .chart"));
var left1Option = {
//color: ["#2f89cf"],
tooltip: {
// 通过坐标轴来触发
trigger: 'axis',
axisPointer: {
type: "shadow"
}
},
legend: {
right: "40%",
// 修饰图例文字的颜色
textStyle: {
color: "rgba(255,255,255,.7)"
}
},
grid: {
left: "0%",
top: "10px",
right: "0%",
bottom: "4%",
containLabel: true
},
xAxis:{
type: 'value',
name: '评论总数',
position: 'top', //x轴位置
axisTick: {
show: false
},
axisLabel: { // 坐标轴标签
show: true,
fontSize: 12,
fontFamily: 'Source Han Sans CN',
fontWeight: 400,
color: '#70EEFE',
},
axisLine: { // 坐标轴线设置
show: false,
lineStyle:{
color:'#FFFFFF',
},
},
splitLine: { // 分割线
lineStyle: {
color: '#0099FF',
type: 'dashed',
}
},
axisLabel: { // 改变x轴字体颜色和大小
textStyle: {
//color: "#33CCFF",
fontSize: 10
}
}
},
yAxis:{
type: 'category',
//name: '店名',
textStyle:{
fontSize:10
},
axisLine: { // 坐标轴线
show: false,
lineStyle:{
color:'#FFFFFF',
},
},
axisTick: { // 坐标轴刻度
show: false
},
axisLabel:{
//interval: 0, //显示所有标签
fontSize: 10, //标签大小
//color: "#FFFFFF" , //设置标签颜色
},
data: ["佰草集", "倩碧", "兰芝", "兰蔻", "妮维雅", "娇兰", "悦诗风吟", "欧珀莱", "欧莱雅", "相宜本草", "美加净", "美宝莲", "自然堂", "薇姿", "蜜丝佛陀", "资生堂", "雅漾", "雅诗兰黛", "雪花秀"],
},
dataZoom: [
//滑动条
{
yAxisIndex: 0, //从y轴的0刻度开始
show: false, //是否显示滑动条
type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 7, // 一次性展示9个。
},
],
series:[
{
type: 'bar',
itemStyle: {
borderColor: '#157DFE',
borderWidth: 1,
barBorderRadius: 30, //设置成圆角
color: new echarts.graphic.LinearGradient(
1, 1, 0, 0, [{
offset: 1,
color: `#FFFFFF`
}, {
offset: 0,
color: `#3399FF`
}
]
),
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{c}条',
color: '#3399FF',
fontSize: '10',
}
},
data: [115615.0, 73301.0, 74104.0, 29173.0, 366445.0, 1700.0, 573201.0, 41262.0, 216656.0, 188838.0, 72142.0, 291430.0, 191807.0, 20522.0, 74672.0, 2319.0, 108427.0, 57418.0, 4171.0],
}
]
};
left1Chart.setOption(left1Option);
autoMove()
function autoMove () {
// 自动滚动:
timeOut=setInterval(()=>{
if (left1Option.dataZoom[0].endValue == 18 ) {
left1Option.dataZoom[0].endValue = 7;
left1Option.dataZoom[0].startValue = 0;
} else {
left1Option.dataZoom[0].endValue = left1Option.dataZoom[0].endValue + 1;
left1Option.dataZoom[0].startValue = left1Option.dataZoom[0].startValue + 1;
}
left1Chart.setOption(left1Option);
left1Chart.on('mouseover',stop)
left1Chart.on('mouseout',goMove)
},2000)
}
//停止滚动
function stop(){
clearInterval(timeOut)
}
//继续滚动
function goMove(){
autoMove()
}
2.折线图
设置多个折线图时可以在series配置项中添加数据
//折线图
var left2Chart = echarts.init(document.querySelector(".left2 .chart"));
var left2Option = {
tooltip: {
// 通过坐标轴来触发
trigger: "axis"
},
legend: {
show: true,
top: '2%',
icon: "roundRect",
itemWidth: 30, // 图例标记的图形宽度。
itemHeight: 2, // 图例标记的图形高度。
textStyle: {
color: 'break',
fontSize: 11,
padding: [0, 8, 0, 8]
}
},
grid: {
top: "30%",
left: "0%",
right: "2%",
bottom: "0%",
show: true,
borderColor: "#012f4a",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
smooth: true, //平滑的曲线
data: ["11-05","11-06","11-07", "11-08","11-09","11-10","11-11","11-12","11-13","11-14"],
// 去除刻度
axisTick: {
show: false
},
// 修饰刻度标签的颜色
axisLabel: {
color: "rgba(255,255,255,.7)",
interval: 0, //显示所有标签
fontSize: 8, //标签大小
},
// 去除x坐标轴的颜色
axisLine: {
show: false,
lineStyle:{
color:'#FFFFFF',
},
}
},
yAxis: {
type: "value",
// 去除刻度
axisTick: {