echarts 相关问题

1.移动端tooltip未显示问题：（多关注版本变更）

　　移动端模式下tooltip显示不出来，换成pc模式下tooltip就会正常显示，问题很奇怪，之后问了大佬帮我解决，发现只要讲echarts的版本4.9.0换成4.2.1移动端就可以正常显示了。

2.tooltip的position问题：

　　想要tooltip只显示在顶部，但是发现trigger: "axis"模式下position:'top'用不了，使用自定义模式：　

        tooltip: {
          show: true,
          trigger: "axis",
          padding: [5, 5],
          textStyle: {
            fontSize: 6,
            zIndex: 10
          },
          position: function(pos, params, dom, rect, size) {
            if (params[0].dataIndex > 5) {
              return [pos[0] - 55, 25];
            } else {
              if (params[0].dataIndex === 0) {
                return [0, 25];
              }
              return [pos[0] - 35, 25];
            }
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              color: " rgba(112, 170, 255, 0.1)"
            }
          },
          formatter: function(datas) {
            let data = 0;
            for (var i = 0, length = datas.length; i < length; i++) {
              data += Math.ceil(Number(datas[i].data) * 60);
            }
            let h = Math.floor(data / 60);
            let m = data - h * 60;
            var res = h + "小时" + m + "分钟";
            return res;
          }
        },

3.需要自定义x轴文字样式（换行、字体颜色等）：

 xAxis: [
          {
            type: "category",
            data: ["周一,01", "周二,02", "周三,03", "周四,04", "周五,05", "周六,06", "周日,07"],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            nameTextStyle: {
              fontSize: 8,
              align: "center"
            },
            nameRotate: 60,
            axisLabel: {
              formatter: function(params) {
                const arr = params.split(",");
                const week = arr[0];
                const date = arr[1];
                var str = `{a|${week}} \n {b|${date}}`;
                return str;
              },
              rich: {
                a: {
                  color: "#171725",
                  align: "center",
                  fontSize: 10
                },
                b: {
                  color: "#92929D",
                  padding: [6, 0],
                  align: "center",
                  fontSize: 10
                }
              }
            }
          }
        ],

4.改变tooltip背景色、添加样式

  tooltip: {
          backgroundColor: '#fff', //背景色
          borderColor: 'rgba(101, 162, 255, 0.35)',
          extraCssText:
            'box-shadow: 0px 0px 8px 0px rgba(101, 162, 255, 0.35);', //添加外阴影效果
          trigger: 'axis',
          padding: [10, 10],
          textStyle: {
            color: '#171725',
            fontSize: 10,
            lineHeight: 18,
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              color: ' rgba(112, 170, 255, 0.1)',
            },
          },
          formatter: function(datas) {
            var res = '总时长';
            let data = 0;
            for (var i = 0, length = datas.length; i < length; i++) {
              data += Math.ceil(Number(datas[i].data) * 60);
            }
            let h = Math.floor(data / 60);
            let m = data - h * 60;
            res = res + '   ' + h + '小时' + m + '分钟';
            return res;
          },
        },

5.改变每个柱体的颜色

series: [
          {
            name: '',
            type: 'bar',
            barWidth: 20, //柱图宽度
            showBackground: true,
            backgroundStyle: {
              color: ' rgba(112, 170, 255, 0.1)',
            },
            label: {
              show: false,
              position: 'insideRight',
            },
            tooltip: {
              position: 'right',
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#4393FF', '#BE69FE', '#1EC9B7', '#FF9356'];
                  return colorList[params.dataIndex];
                },
                //柱形图圆角，初始化效果
                barBorderRadius: [0, 10, 10, 0],
              },
            },

            data: [20，40，15，30],
          },
        ],