1. 程式人生 > >echarts相關設定

echarts相關設定

1.顯示隱藏工具欄

註釋toolbox即可


/*    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },*/

2.滑鼠劃過資料顯示對應的資料


 tooltip : {
        trigger: 'axis'//設定這個即可 劃過顯示資料
 },

3.修改不同產品分類(legend)的樣式


textStyle: {
            fontSize: 12,
            color: '#fff'//顯示的字型顏色
 }

4.修改圖示的位置


  grid: {
      show: true,
      left: 35, //元件離容器左側的距離,百分比字串或整型數字
      top: 25, //元件離容器上側的距離,百分比字串或整型數字
      //bottom:40//元件離容器底部的距離,百分比字串或整型數字
    }, 

5.柱狀圖中的柱狀樣式


  var labelOption = {
    normal: {
      show: true,
      position: 'top',//資料顯示在柱狀體的位置
      align: 'middle',
      verticalAlign: 'bottom',
      formatter: '{c}',
      fontSize: 14,
      color: '#fff',
      rotate: 35,//顯示資料旋轉的角度
      fontWeight: 'normal',
    }
  };
 使用:
 series : [
        {
            name:'07010011',
            type:'bar',
            data:[800, 530, 520, 512, 480],
            color:'#7BB0E4',
            label:labelOption
        },
        {
            name:'90612011',
            type:'bar',
            data:[180, 460, 9.0, 26.4, 28.7],
            color:'#404048',
            label:labelOption
        },
        {
            name:'07810011',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7],
             color:'#8DEC6E',
            label:labelOption
        },
    ]

6.修改y座標的資料資訊


1>資料固定
   在 yAxis 增加max 和min 屬性
   yAxis: {
      type: 'value',
      max:1000,
      min:0,
    ... 
   }
2>資料大小不固定
在 yAxis 的 axisLabel中增加
  formatter: function formatter(value, index) {
   //使用函式模板,函式引數分別為刻度數值(類目),刻度的索引
     if (value >= 250) {
       value = (value + "").slice(0, -3);
       return value + "K";
     } else {
       return value;
     }
  },

來源:https://blog.csdn.net/sinat_32900379/article/details/85157730