【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 ()函数，来轮流播放

//轮播条形图，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: {