1. 程式人生 > >Echart常見效果實現方法的總結

Echart常見效果實現方法的總結

此貼只寫一部分常用屬性,更多屬性請看官網
1. 為Echart座標軸加箭頭

yAxis:{// 直角座標系 grid 中的 y 軸
axisLine:{// 座標軸軸線相關設定。
   show:true,
   symbol:['none', 'arrow']// 軸線兩邊的箭頭。可以是字串,表示兩端使用同樣的箭頭;或者長度為 2 的字串陣列,分別表示兩端的箭頭。預設不顯示箭頭,即 'none'。兩端都顯示箭頭可以設定為 'arrow',只在末端顯示箭頭可以設定為 ['none', 'arrow']。
  }
}

2.為Echart的Y軸增加單位說明

 yAxis: {
   type: 'value'
,// 座標軸型別。 'value' 數值軸,適用於連續資料。'category' 類目軸,適用於離散的類目資料,為該型別時必須通過 data 設定類目資料。'time' 時間軸,適用於連續的時序資料,與數值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據跨度的範圍來決定使用月,星期,日還是小時範圍的刻度。'log' 對數軸。適用於對數資料。 name:'(單位:)'// 座標軸名稱顯示位置。
}

示例:

 yAxis: {
        type: 'value',
        name:'(愛心值:點)',
        axisLine:{
            show:true,
            symbol:['none'
, 'arrow']
} },

這裡寫圖片描述
3. 為Echart折線圖加拐點

series: [
   {
   label:{
      show:true,// 是否顯示標籤。
      position:[-20,-10],// 通過相對的百分比或者絕對畫素值表示標籤相對於圖形包圍盒左上角的位置.也可為單值'top'/'left'/'inside'formatter:'殺生丸' // 標籤內容格式器,支援字串模板和回撥函式兩種形式,字串模板與回撥函式返回的字串均支援用 \n 換行。字串模板 模板變數有:

    {a}:系列名。
    {b}:資料名。
    {c}:資料值。
    {@xxx
}:資料中名為'xxx'的維度的值,如{@product}表示名為'product'` 的維度的值。 {@[n]}:資料中維度n的值,如{@[3]}` 表示維度 3 的值,從 0 開始計數。 label:圖形上的文字標籤,可用於說明圖形的一些資料資訊,比如值,名稱等,label選項在 ECharts 2.x 中放置於itemStyle下,在 ECharts 3 中為了讓整個配置項結構更扁平合理,label 被拿出來跟 itemStyle 平級,並且跟 itemStyle 一樣擁有 emphasis 狀態。 摺疊詳情

示例:

 {
            name:'鬼燈',
            type:'line',
            stack: '鬼燈',
            data:[20, 182, 191, 234, 290, 330, 310],
            label:{
                  show:true,
                  position:[-20,-10],
                  formatter: '{b}: {@score}'
             }
        },
        {
            name:'夏目',
            type:'line',
            stack: '夏目',
            data:[150, 232, 601, 854, 990, 1030, 1210],
            label:{
                  show:true,
                  position:[-20,-10],
                  formatter: '{a}\n{@score}'
             }

        },

這裡寫圖片描述
3. 為Echart圖表加篩選

dataZoom:[// dataZoom 元件 用於區域縮放,從而能自由關注細節的資料資訊,或者概覽資料整體,或者去除離群點的影響。
  {
    start: 0,// 資料視窗範圍的起始百分比。範圍是:0 ~ 100。表示 0% ~ 100%。
    end: 100,
    orient: null,// 佈局方式是橫還是豎。不僅是佈局方式,對於直角座標系而言,也決定了,預設情況控制橫向數軸還是縱向數軸。
可選值為:'horizontal':水平。 'vertical':豎直。
  }
]

示例:

  grid: {// 直角座標系內繪圖網格,單個 grid 內最多可以放置上下兩個 X 軸,左右兩個 Y 軸。可以在網格上繪製折線圖,柱狀圖,散點圖(氣泡圖)。
        left: '3%',
        right: '4%',
        bottom: '9%',// grid 元件離容器下側的距離。bottom 的值可以是像 20 這樣的具體畫素值,可以是像 '20%' 這樣相對於容器高寬的百分比。
        containLabel: true// grid 區域是否包含座標軸的刻度標籤。
    },
 dataZoom: [
        {
            show: true,
            realtime: true,
            start: 0,
            end: 100
        }
    ],

這裡寫圖片描述

  1. 為餅狀圖展示值增加計算出的百分比
series : [
    {
    label:{// 餅圖圖形上的文字標籤,可用於說明圖形的一些資料資訊,比如值,名稱等,label選項在 ECharts 2.x 中放置於itemStyle下,在 ECharts 3 中為了讓整個配置項結構更扁平合理,label 被拿出來跟 itemStyle 平級,並且跟 itemStyle 一樣擁有 emphasis 狀態。
       show:true,
       formatter: '{b}: {c} ({d}%)'// 標籤內容格式器,支援字串模板和回撥函式兩種形式,字串模板與回撥函式返回的字串均支援用 \n 換行。

字串模板

字串模板 模板變數有:

    {a}:系列名。
    {b}:資料名。
    {c}:資料值。
    {d}:百分比。
    {@xxx}:資料中名為'xxx'的維度的值,如{@product}表示名為'product'` 的維度的值。
    {@[n]}:資料中維度n的值,如{@[3]}` 表示維度 3 的值,從 0 開始計數。
      }
    }
 ]

示例:

option = {
    title : {
        text: '愛豆的集合',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series : [
        {
            name: '愛豆的集合',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:800, name:'夏目'},
                {value:600, name:'鬼燈'},
                {value:260, name:'雲雀'},
                {value:200, name:'銀時'},
                {value:1200, name:'殺生丸'}
            ],
            label:{
              show:true,
              formatter: '{b}: {c} ({d}%)'
            }

        }
    ]
};

這裡寫圖片描述
4. 當Echart指示項過多時,可以按分頁格式展示

legend: {// 圖例元件。圖例元件展現了不同系列的標記(symbol),顏色和名字。可以通過點選圖例控制哪些系列不顯示。
        top:'3%',
        type: 'scroll'//圖例的型別。可選值:'plain':普通圖例。預設就是普通圖例。
    'scroll':可滾動翻頁的圖例。當圖例數量較多時可以使用。

        }
 legend: {
        top:'3%',
        type: 'scroll',
        data:['殺生丸','鬼燈','夏目','銀時','雲雀','殺生丸77777777','鬼燈77777777','夏目77777777','銀時77777777','雲雀77777777',],
    },

這裡寫圖片描述