devbox
Guff_9hys
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【echarts画数据可视化大屏】_echarts 大屏

作者：Guff_9hys | 2024-06-29 15:37:02

赞

踩

echarts 大屏

目录

前言

一、数据清洗

1.去除重复值

2.处理缺失值

3.处理异常值

二、数据处理（将数据打包成绘制需要的格式）

1.条形图数据处理

2.折线图数据处理

3.玫瑰图数据处理

4.柱状图数据处理

5.词云图数据处理

6.饼图数据处理

三、绘制小图

1.轮播条形图

2.折线图

3.玫瑰图

4.柱状图

5.词云图

6.饼图

四、合并大屏

 五、大屏展示

前言

当今社会，数据已经成为了我们最重要的资产之一。每一个领域都有着大量的数据，而对于企业来说，如何更好地利用这些数据就显得尤为关键。数据可视化是将数据转化为图形的过程，使得数据的本质更加清晰、易于理解。数据可视化大屏就是一个将数据可视化展示在大屏幕上的工具，可以帮助企业快速掌握数据的状态和趋势，更好地进行决策。

本次数据可视化大屏数据来自数据分析：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 ()函数，来轮流播放

  1. //轮播条形图，2016年11-11日每个店铺的评论总数
  2.  
  3. var left1Chart = echarts.init(document.querySelector(".left1 .chart"));
  4. var left1Option = {
  5.     //color: ["#2f89cf"],
  6.     tooltip: {
  7.       // 通过坐标轴来触发
  8.       trigger: 'axis',
  9.       axisPointer: {
  10.       type: "shadow"
  11.       }
  12.   },
  13.     legend: {
  14.       right: "40%",
  15.       // 修饰图例文字的颜色
  16.       textStyle: {
  17.         color: "rgba(255,255,255,.7)"
  18.       }
  19.     },
  20.     grid: {
  21.       left: "0%",
  22.       top: "10px",
  23.       right: "0%",
  24.       bottom: "4%",
  25.       containLabel: true
  26.     },
  27.     xAxis:{
  28.       type: 'value',
  29.       name: '评论总数',
  30.       position: 'top', //x轴位置
  31.       axisTick: {
  32.         show: false
  33.       },
  34.       axisLabel: { // 坐标轴标签
  35.           show: true,
  36.           fontSize: 12,
  37.           fontFamily: 'Source Han Sans CN',
  38.           fontWeight: 400,
  39.           color: '#70EEFE',
  40.       },
  41.       axisLine: { // 坐标轴线设置
  42.           show: false,
  43.           lineStyle:{
  44.             color:'#FFFFFF',
  45.           },
  46.       },
  47.       splitLine: { // 分割线
  48.           
  49.           lineStyle: {
  50.               color: '#0099FF',
  51.               type: 'dashed',
  52.           }
  53.       },
  54.       
  55.       axisLabel: { //  改变x轴字体颜色和大小
  56.           textStyle: {
  57.               //color: "#33CCFF",
  58.               fontSize: 10
  59.           }
  60.       }
  61.      },
  62.     yAxis:{
  63.       type: 'category',
  64.       //name: '店名',
  65.       textStyle:{
  66.           fontSize:10
  67.  
  68.       },
  69.       axisLine: { // 坐标轴线
  70.           show: false,
  71.           lineStyle:{
  72.             color:'#FFFFFF',
  73.           },
  74.       },
  75.       axisTick: { // 坐标轴刻度
  76.           show: false
  77.       },
  78.       axisLabel:{
  79.               //interval: 0,  //显示所有标签
  80.               fontSize: 10,  //标签大小
  81.               //color: "#FFFFFF" ,  //设置标签颜色
  82.           },
  83.       data: ["佰草集", "倩碧", "兰芝", "兰蔻", "妮维雅", "娇兰", "悦诗风吟", "欧珀莱", "欧莱雅", "相宜本草", "美加净", "美宝莲", "自然堂", "薇姿", "蜜丝佛陀", "资生堂", "雅漾", "雅诗兰黛", "雪花秀"],
  84.  
  85.     },
  86.     dataZoom: [
  87.       //滑动条
  88.       {
  89.           yAxisIndex: 0, //从y轴的0刻度开始
  90.           show: false, //是否显示滑动条
  91.           type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
  92.           startValue: 0, // 从头开始。
  93.           endValue: 7, // 一次性展示9个。
  94.       },
  95.       ],
  96.       series:[
  97.         {
  98.             type: 'bar',
  99.             itemStyle: {
  100.             borderColor: '#157DFE',
  101.             borderWidth: 1,
  102.             barBorderRadius: 30, //设置成圆角
  103.             color: new echarts.graphic.LinearGradient(
  104.             1, 1, 0, 0, [{
  105.                 offset: 1,
  106.                 color: `#FFFFFF`
  107.             }, {
  108.                 offset: 0,
  109.                 color: `#3399FF`
  110.             }
  111.             ]
  112.             ),
  113.         },
  114.             label: {
  115.                 normal: {
  116.                     show: true,
  117.                     position: 'right',
  118.                     formatter: '{c}条',
  119.                     color: '#3399FF',
  120.                     fontSize: '10',
  121.                 }
  122.         },
  123.             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],
  124.  
  125.         }
  126.       ]
  127.   };
  128. left1Chart.setOption(left1Option);
  129.       autoMove()
  130.       function autoMove () {
  131.     // 自动滚动：
  132.         timeOut=setInterval(()=>{
  133.             if (left1Option.dataZoom[0].endValue == 18 ) {
  134.               left1Option.dataZoom[0].endValue = 7;
  135.               left1Option.dataZoom[0].startValue = 0;
  136.             } else {
  137.               left1Option.dataZoom[0].endValue = left1Option.dataZoom[0].endValue + 1;
  138.               left1Option.dataZoom[0].startValue = left1Option.dataZoom[0].startValue + 1;
  139.             }
  140.             left1Chart.setOption(left1Option);
  141.             left1Chart.on('mouseover',stop)
  142.             left1Chart.on('mouseout',goMove)
  143.         },2000)
  144.     }
  145.     //停止滚动
  146.     function stop(){
  147.     clearInterval(timeOut)
  148.     }
  149.     //继续滚动
  150.     function goMove(){
  151.         autoMove()
  152.     }

2.折线图

设置多个折线图时可以在series配置项中添加数据

  1. //折线图
  2.  
  3. var left2Chart = echarts.init(document.querySelector(".left2 .chart"));
  4. var left2Option = {
  5.     tooltip: {
  6.       // 通过坐标轴来触发
  7.       trigger: "axis"
  8.     },
  9.     legend: {
  10.       show: true,
  11.       top: '2%',
  12.       icon: "roundRect",
  13.       itemWidth: 30, // 图例标记的图形宽度。
  14.       itemHeight: 2, //  图例标记的图形高度。
  15.       textStyle: {
  16.           color: 'break',
  17.           fontSize: 11,
  18.           padding: [0, 8, 0, 8]
  19.       }
  20.   },
  21.     grid: {
  22.       top: "30%",
  23.       left: "0%",
  24.       right: "2%",
  25.       bottom: "0%",
  26.       show: true,
  27.       borderColor: "#012f4a",
  28.       containLabel: true
  29.     },
  30.  
  31.     xAxis: {
  32.       type: "category",
  33.       boundaryGap: false,
  34.       smooth: true,  //平滑的曲线
  35.       data: ["11-05","11-06","11-07", "11-08","11-09","11-10","11-11","11-12","11-13","11-14"],
  36.       // 去除刻度
  37.       axisTick: {
  38.         show: false
  39.       },
  40.       // 修饰刻度标签的颜色
  41.       axisLabel: {
  42.         color: "rgba(255,255,255,.7)",
  43.         interval: 0,  //显示所有标签
  44.         fontSize: 8,  //标签大小
  45.       },
  46.       // 去除x坐标轴的颜色
  47.       axisLine: {
  48.         show: false,
  49.         lineStyle:{
  50.           color:'#FFFFFF',
  51.         },
  52.       }
  53.     },
  54.     yAxis: {
  55.       type: "value",
  56.       // 去除刻度
  57.       axisTick: {
  58.         show: false
  59.       },
  60.       // 修饰刻度标签的颜色
  61.       axisLabel: {
  62.         color: "rgba(255,255,255,.7)"
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/769620
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号