使用echarts的一些小技巧

一、使用echarts柱狀圖時添加左右滾動功能

dataZoom:[
      {
          type:"slider",//slider表示有滑動塊的，
          show:true,
          xAxisIndex:[0],//表示x軸摺疊
          start:1,//數據窗口範圍的起始百分比,表示1%
          end:35,//數據窗口範圍的結束百分比,表示35%座標
          bottom:"20", 
      },
  ],
複製代碼

問題:'當咱們添加該方法的時候、這時候原先柱狀圖的echarts表個的Y軸分割線會變得很小、會致使數據小的時候界面顯示不出來的問題、

解決：將dataZoom中的xAxisIndex屬性範圍改爲一、注：( 該方法適用雙柱狀圖模式 )↑

​ dataZoom全部屬性：👇

dataZoom:[ //區域縮放
{
　　id: 'dataZoomX',
　　show:true, //是否顯示 組件。若是設置爲 false，不會顯示，可是數據過濾的功能還存在。
　　backgroundColor:"rgba(47,69,84,0)", //組件的背景顏色
　　type: 'slider', //slider表示有滑動塊的，inside表示內置的
　　dataBackground:{ //數據陰影的樣式。
　　　　lineStyle:mylineStyle, //陰影的線條樣式
　　　　areaStyle:myareaStyle, //陰影的填充樣式
　　},
　　fillerColor:"rgba(167,183,204,0.4)", //選中範圍的填充顏色。
　　borderColor:"#ddd", //邊框顏色。
　　filterMode: 'filter', //'filter'：當前數據窗口外的數據，被 過濾掉。即 會 影響其餘軸的數據範圍。每一個數據項，只要有一個維度在數據窗口外，整個數據項就會被過濾掉。
　　　　　　　　　　//'weakFilter'：當前數據窗口外的數據，被 過濾掉。即 會 影響其餘軸的數據範圍。每一個數據項，只有當所有維度都在數據窗口同側外部，整個數據項纔會被過濾掉。
　　　　　　　　　　//'empty'：當前數據窗口外的數據，被 設置爲空。即 不會 影響其餘軸的數據範圍。
　　　　　　　　　　//'none': 不過濾數據，只改變數軸範圍。
　　xAxisIndex:0, //設置 dataZoom-inside 組件控制的 x軸,能夠用數組表示多個軸
　　yAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 y軸,能夠用數組表示多個軸
　　radiusAxisIndex:3, //設置 dataZoom-inside 組件控制的 radius 軸,能夠用數組表示多個軸
　　angleAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 angle 軸,能夠用數組表示多個軸
　　start: 30, //數據窗口範圍的起始百分比,表示30%
　　end: 70, //數據窗口範圍的結束百分比,表示70%
　　startValue:10, //數據窗口範圍的起始數值
　　endValue:100, //數據窗口範圍的結束數值。
　　orient:"horizontal", //佈局方式是橫仍是豎。不只是佈局方式，對於直角座標系而言，也決定了，缺省狀況控制橫向數軸仍是縱向數軸。'horizontal'：水平。'vertical'：豎直。
　　zoomLock:false, //是否鎖定選擇區域（或叫作數據窗口）的大小。若是設置爲 true
　　則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。
　　throttle:100, //設置觸發視圖刷新的頻率。單位爲毫秒（ms）。
　　zoomOnMouseWheel:true, //如何觸發縮放。可選值爲：true：表示不按任何功能鍵，鼠標滾輪能觸發縮放。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和鼠標滾輪能觸發縮放。'alt'：表示按住 alt 和鼠標滾輪能觸發縮放。
　　moveOnMouseMove:true, //如何觸發數據窗口平移。true：表示不按任何功能鍵，鼠標移動能觸發數據窗口平移。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標移動能觸發數據窗口平移。'ctrl'：表示按住 ctrl 和鼠標移動能觸發數據窗口平移。'alt'：表示按住 alt 和鼠標移動能觸發數據窗口平移。
　　left:"center", //組件離容器左側的距離,'left', 'center', 'right','20%'
　　top:"top", //組件離容器上側的距離,'top', 'middle', 'bottom','20%'
　　right:"auto", //組件離容器右側的距離,'20%'
　　bottom:"auto", //組件離容器下側的距離,'20%'

},
{
　　id: 'dataZoomY',
　　type: 'inside',
　　filterMode: 'empty',
　　disabled:false, //是否中止組件的功能。
　　xAxisIndex:0, //設置 dataZoom-inside 組件控制的 x軸,能夠用數組表示多個軸
　　yAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 y軸,能夠用數組表示多個軸
　　radiusAxisIndex:3, //設置 dataZoom-inside 組件控制的 radius 軸,能夠用數組表示多個軸
　　angleAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 angle 軸,能夠用數組表示多個軸
　　start: 30, //數據窗口範圍的起始百分比,表示30%
　　end: 70, //數據窗口範圍的結束百分比,表示70%
　　startValue:10, //數據窗口範圍的起始數值
　　endValue:100, //數據窗口範圍的結束數值。
　　orient:"horizontal", //佈局方式是橫仍是豎。不只是佈局方式，對於直角座標系而言，也決定了，缺省狀況控制橫向數軸仍是縱向數軸。'horizontal'：水平。'vertical'：豎直。
　　zoomLock:false, //是否鎖定選擇區域（或叫作數據窗口）的大小。若是設置爲 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。
　　throttle:100, //設置觸發視圖刷新的頻率。單位爲毫秒（ms）。
　　zoomOnMouseWheel:true, //如何觸發縮放。可選值爲：true：表示不按任何功能鍵，鼠標滾輪能觸發縮放。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和鼠標滾輪能觸發縮放。'alt'：表示按住 alt 和鼠標滾輪能觸發縮放。
　　moveOnMouseMove:true, //如何觸發數據窗口平移。true：表示不按任何功能鍵，鼠標移動能觸發數據窗口平移。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標移動能觸發數據窗口平移。'ctrl'：表示按住 ctrl 和鼠標移動能觸發數據窗口平移。'alt'：表示按住 alt 和鼠標移動能觸發數據窗口平移。
}
]
複製代碼

二、echarts地圖顯示字樣更改

​

geo: {
        map: "china",
        label: {
           normal: {
            show: true,
            color: "#639bc3",
             formatter:function(params){ //標籤內容
                   return  params.name; // 更改地圖顯示字段
               },
            },
          },
複製代碼

​ 經過label對象中的formatter屬性能夠對須要進行顯示的字樣進行方法過濾和加功、

三、改變軸線顏色

//放置在xAxis下 yAxis
axisLine:{
      lineStyle:{
          color:'#fff',
          width:1,//這裏是爲了突出顯示加上的
      }
  }
複製代碼

四、柱狀圖顏色、寬度、改爲圓柱狀

// 修改柱狀圖顏色
//下方代碼放置在series
  itemStyle:{
    normal:{
      color:"#40C2FF",//更改顏色
      barBorderRadius:[25,25,0,0]// 將立方體改爲圓柱
    }
  },
  barWidth:8,// 修改柱狀圖寬度
複製代碼

五、改變echarts在dom元素中的位置

//改變總體位置
//放置在option中
grid: {
        left: '3%',
        right: '4%',
        bottom: '8%',
        containLabel: true
},
複製代碼

六、更改網格線的顏色

// 網格線顏色更改
//放置在xAxis中
splitLine: {
    show: true,
    lineStyle:{
        color: ['#244674'],
        width: 1,
        type: 'solid'//網格線類型
    }
},
複製代碼

七、改變echarts文字排列方式、顏色、位置

//放置在option中
legend: {
      orient: "vertical",//改變文字顏色的xy軸排列方式
      icon:'circle',
      data: this.collectionName,
      x:'right',      //可設定圖例在左、右、居中
      y:'top',     //可設定圖例在上、下、居中
      top:'10%',
      left:'85%',
      textStyle:{
        color:"#fff"
      },
      align:"left", //改變 legend 文字和顏色位置
  },
複製代碼

八、餅狀圖中間顯示文字

//放置在option中
// 餅狀圖在中間顯示文字
graphic:{
    type:"text",
    left:"center",
    top:"45%",
    style:{
        text:"檔案存放比例",
        textAlign:"center",
        fill:"#333",
        fontSize:15,
        fontWeight:700,
        fill:"#fff",
        backgroundColor:'red',
    }
},
複製代碼