总结淘宝双十一数据可视化遇到的问题和对应的解决方案

1，运行hive时，出现包错误

 

原因：spark版本升级到2.x以后,原有lib目录下的大JAR包被分散成多个小JAR包，原来的spark-assembly-*.jar已经不存在，所以hive没有办法找到这个JAR包。要做的只是将hive中的启动文件中的sparkAssemblyPath这一行更改为之前安装spark的jar包路径即可。

解决方法：编辑hive/bin的hive文件，将下面这一行进行修改，

 

修改成下面这样就正常了。

 

 

 

2，运行hive时，出现错误

 

原因：hadoop和hive的两个guava.jar版本不一致。

 

 

 

解决方法：

第一步：删除hive里的guava.jar

第二步：把hadoop里的复制到hive里

最后再回到hive, 再次初始化，就可以了。

 

3，安装完eclipse后跑程序时出错。

 

原因：加载jar包不全导致编译出现问题，缺少下图的jar包，加上即可。

 

 

解决之后，运行成功。也可以部署打包生成jar包，在终端运行。

 

 

 

 

 

4，重新装spark的时候运行bin/run-example SparkPi出错

 

原因：因为重新装spark时把之前的spark文件夹删掉时误删了Hadoop文件夹，导致配置文件的路径出错。

 

重新装回Hadoop之后运行没有问题。

 

 

 

5,用sqoop把hive的数据送到mysql时一直执行错误

 

上网找了各种可能原因以及解决方案，但是每次尝试之后又有新的的错误出来，我重新检查了一下我安装的sqoop版本，发现是sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz，和教程的不一致，那么会不会是版本不兼容的问题呢。

我重新下载安装了sqoop-1.4.6.bin__hadoop-2.0.4-alpha.tar.gz，再进行操作，

还是出错。

 

再去找了一下，看到一位大佬说可能是sqoop找不到生成的jar包位置。要手动去临时文件夹找包。于是我试了一下之后，用sqoop把hive的数据送到mysql成功了。

 

6，用sqoop把hive的数据送到mysql之后查看mysql中的内容发现为空，以为上面的操作失败了。

 

原因：limit限制结果集行数，我误把limit设置为0了，当然结果显示0行。

正常情况如下：

 

 

 

7,步骤四最后把结果添加到mysql数据库中时出错。

 

原因：

执行pysaprk时没有将这个包放好在合适的路径。

 

8，利用Eclipse新建可视化Web应用时没有Dynamic Web Project可选。

原因分析：安装的eclipse缺少某些插件。需要打开help->Install New Software菜单，找到对应版本库，下拉找到Web,XML,Java EE....这一栏，选择下载这些插件，之后重启就可以找到Dynamic Web Project了。从下图可以看到已经可以选择了：

 

 

 

 

 

9，原本这个散点图没有点呈现。

 

原因：这里有三个参数，删掉第一个就好了，因为a[0]表示的是性别，画图的时候分开画，不需要放进函数里面。

 

 

 

改完之后，正常呈现。

但是点很小，需要改一下。

 

 

 

 

 

 

改完之后，

 

 

 

9，这里应该是直方图，不是饼图

 

 

 

在这里改成直方图就好了：

 

 

 

改正之后，

 

 

 

10，由于ECharts更新，提供下载的中国矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。

 

 

 

如下图所示，index4.js代码不完整，且没有导入底图的js包：

 

 

 

导入china.js包

<script src="./js/china.js"></script>

<script src="./js/chinaCenter.js"></script>

<script src="./js/echarts.gl.js"></script>

<script src="./js/jquery-3.2.1.min.js"></script>

插入部分代码：

<script>

var myChart = echarts.init(document.getElementById('main'));

option = {

     tooltip: {

//         show: false //不显示提示标签

         formatter: '{b}', //提示标签格式

         backgroundColor:"#ff7f50",//提示标签背景颜色

         textStyle:{color:"#fff"} //提示标签字体颜色

     },

     series: [{

         type: 'map',

         mapType: 'china',

         label: {

             normal: {

                 show: true,//显示省份标签

                 textStyle:{color:"#c71585"}//省份标签字体颜色

             },    

             emphasis: {//对应的鼠标悬浮效果

                 show: true,

                 textStyle:{color:"#800080"}

             }

         },

         itemStyle: {

             normal: {

                 borderWidth: .5,//区域边框宽度

                 borderColor: '#009fe8',//区域边框颜色

                 areaColor:"#ffefd5",//区域颜色

             },

             emphasis: {

                 borderWidth: .5,

                 borderColor: '#4b0082',

                 areaColor:"#ffdead",

             }

         },

         data:[

             {name:'福建', selected:true}//福建为选中状态

         ]

     }],

};

 

myChart.setOption(option);

myChart.on('mouseover', function (params) {

    var dataIndex = params.dataIndex;

    console.log(params);

});

</script>

这样之后，地图成功显示：

 

 

 

11，但是到这一步，鼠标移上去依旧没有数据显示，是因为视图和数据库没有关联上。如下图所示：

 

 

 

（之所以拍照是因为在只要鼠标移进去虚拟机之后快捷键就截图不了了，但是又必须把鼠标放在上面才会有效果。后面这样操作也是一样的原因。）

首先检查数据库链接程序：

 

 

 

返回给index4的是list，去数据库查看list的形状如下图所示：

 

 

 

按照这个list在echarts的series里面设置data:[{value:<%=%>,name:’<%=%>’}],如下图所示：

 

 

 

但是依旧没有效果，原因如下：

 

 

 

Option的tooltip中里面有个formatter, 是提示框浮层内容格式器，模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等，这里我要显示每个省份对应的数据，那就应该用{c},但是前面用{b}了，所以显示不成功。

改完之后，基本上能够显示成功，如下图所示：

 

 

 

12，但是马上又发现一个问题，就是直辖市比如下图的北京就没有数值。

 

 

 

原因分析：上面查看了list，可以看到直辖市在list中是带有“市”字的，比如”北京”是”北京市”,但是地图上是“北京”，因此对应不上。

按照list，把data中相对应的name改掉就可以了。如下图所示：

 

 

修改之后，显示正常，鼠标放到重庆市，对应出来重庆市的数值，如下图所示：