關於echarts的正負柱狀圖，如何去實現正數顯示在柱子上面，負數顯示在柱子下面

首先，想要顯示數值就是如下如的方法，但是只能實現單一的上面，或者下面等等

但是我需要的是動態的去處理數據，在一個前端的提醒下使用了如下的方式，果然實現了

              data:jzl.map(function(item){

                // console.log(item)

                return {

                  value:item,

                  itemStyle: {

                    normal: {

                      label:{

                        show: true,

                        position:item>0?'top':'bottom',

                        textStyle: {

                          color: '#C23531',

                          fontSize: 12

                        }

                      }

                    }

                  }

                }

              }),

這樣就能夠實現了

由於公司兼容用戶比較多，要考慮到ie7以上用戶，但是map方法用不了，網上百度，js加上如下代碼，親測有效

    // Production steps of ECMA-262, Edition 5, 15.4.4.19
    // Reference: http://es5.github.com/#x15.4.4.19
    if (!Array.prototype.map) {
        Array.prototype.map = function(callback, thisArg) {
          var T, A, k;
          if (this == null) {
            throw new TypeError(" this is null or not defined");
          }
          // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
          var O = Object(this);

          // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
          // 3. Let len be ToUint32(lenValue).

          var len = O.length >>> 0;

          // 4. If IsCallable(callback) is false, throw a TypeError exception.
          // See: http://es5.github.com/#x9.11
          if (typeof callback !== "function") {
            throw new TypeError(callback + " is not a function");
          }

          // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
          if (thisArg) {
            T = thisArg;
          }

          // 6. Let A be a new array created as if by the expression new Array(len) where Array is
          // the standard built-in constructor with that name and len is the value of len.
          A = new Array(len);

          // 7. Let k be 0
          k = 0;

          // 8. Repeat, while k < len
          while(k < len) {
            var kValue, mappedValue;
            if (k in O) {
              kValue = O[ k ];
              mappedValue = callback.call(T, kValue, k, O);
              A[ k ] = mappedValue;
            }
            k++;
          }
          // 9. return A
          return A;
        };
      }

關於dataZoom設置最小區間的問題和顏色的一些設置問題

        // 區域縮放控制器
        dataZoom: {
          realtime: false,
          orient: "horizontal", // 布局方式，默認為水平布局，可選為：
          height: 25, //組件高度
          bottom: 10, //右邊的距離
          start: 50, //默認為0
          end: 100, //默認為100
          textStyle: {
            rich: {
              width: "20",
            },
            fontSize: "12",
            color: "#6e6e6e"
          },
          minValueSpan: 8,//設置最小區間值
          backgroundColor: "#221d08", // 背景顏色
          dataBackgroundColor: "#4a4a4a", // 數據背景顏色
          fillerColor: "rgba(169, 147, 42, .3)", // 填充顏色
          handleColor: "#a9932a", // 手柄顏色
        },

tooltip設置十字線，兩條線段的顏色和現顯示的格式化

 

        tooltip: {
          trigger: "axis",
          // formatter: "{b0}<br/>"+that.defaultName+"：{c0}<br/>"+ this.legendName + "：{c1}",
          formatter: function (params, ticket, callback) {
            // console.log(params);
            that.btnList[0].num = params[0].value;
            that.btnList[1].num = params[0].value;
            that.btnList[2].num = params[0].value;
            that.btnList[3].num = params[0].value;
            return params[0].axisValue + "<br/>" + params[0].seriesName + "：" + params[0].value + "<br/>" + params[1].seriesName + "：" + params[1].value
          },
          axisPointer: {
            label: {
              color: "#fff",
              backgroundColor: "rgb(51,51,51)"
            },
            type: "cross",
            lineStyle: {//默認值各異
              color: 'rgba(255,140,0,0.3)',//默認值各異，顏色rgba
              type: 'solid',//默認值
            },
            crossStyle: {
              //默認值，
              color: "rgba(255,140,0,0.3)", //默認值
              type: "solid" //默認值
            }
          }
        },

 

dataZoom滑塊固定區間，禁止改變區間，顯示固定的顯示個數，代碼和效果

          dataZoom: {
            start: 0, //默認為0
            end: 10, //默認為100
            type: "slider",
            show: true,
            xAxisIndex: [0],
            handleSize: 0, //滑動條的 左右2個滑動條的大小
            height: 15, //組件高度
            left: 20, //左邊的距離
            right: 20, //右邊的距離
            bottom: 0, //右邊的距離
            // handleColor: "#000", //h滑動圖標的顏色
            // handleStyle: {
            //   borderColor: "#000",
            //   borderWidth: "1",
            //   shadowBlur: 2,
            //   background: "#000",
            //   shadowColor: "#000"
            // },
            fillerColor: "#a9932a", //選中范圍的填充顏色。
            borderColor: "#4a4a4a",
            backgroundColor: "#000", //組件的背景顏色
            showDataShadow: false, //是否顯示數據陰影 默認auto
            showDetail: false //即拖拽時候是否顯示詳細數值信息 默認true
          },

 

 

 

僅作為個人記錄