首頁 >web前端 >js教程 >整理echarts的一些常用設定(附程式碼範例)

整理echarts的一些常用設定(附程式碼範例)

藏色散人
藏色散人轉載
2023-04-18 15:27:031441瀏覽

echarts的基礎用法就不講了,官網上有很多demo,複製貼上就能跑。這裡主要整理一下筆者在公司中的常用配置。

1.雙Y軸

當你的數據出現多條折線,而有的線條的數據很大,有的線條的數據很小,如果都統一放在一條Y軸上顯示數據,則數據量小的會非常貼近X軸,這樣就看不出數據的變化趨勢,此時可以將數據分別展示,數據量大的在一邊展示,數據量小的在另一邊展示。

整理echarts的一些常用設定(附程式碼範例)

只需要配置好options.yAxis,然後在options.series中,給每個資料配置 yAxisIndex即可,0是左邊,1是右邊。

options = {
    series: [
        {
            data: [...],
            type: "line",
            yAxisIndex: 0,
        },
        {
            data: [...],
            type: "line",
            yAxisIndex: 1,
        },
        ...
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
      {
        type: 'value',
        name: '',
        axisLabel: {
          formatter: '{value}',
        },
        alignTicks: true,
        axisLine: {
          show: true,
        },
      },
    ],
}

2.loading效果

echarts自帶了loading,資料載入時可以呼叫showLoading(),取消載入時可以用hideLoading()

整理echarts的一些常用設定(附程式碼範例)

3.no-data佔位

echarts沒有提供什麼好的no-data佔位,只能用title魔改。當沒有資料的時候,首先是手動清空X軸和Y軸,然後再加入title;而當有資料的時候,刪除delete title。

整理echarts的一些常用設定(附程式碼範例)

options = {
  title: {
    text: '此时间段暂无数据',
    textStyle: {
      color: 'black',
      fontWeight: 'normal',
      fontSize: 25,
    },
    left: '45%',
    top: '30%',
  },
};

4.標籤帶單位

echarts的預設標籤是沒有單位的,echarts提供了單位的配置。在series的每條折線中都設定tooltip.valueFormatter,就可以了。

整理echarts的一些常用設定(附程式碼範例)

整理echarts的一些常用設定(附程式碼範例)

如果對標籤展示的樣式不太滿意的,echarts也允許你自訂標籤的html,此時可以在formatter的html裡面新增單位。

配置如下,根據自己的專案自行變更:

<br/>

整理echarts的一些常用設定(附程式碼範例)

以上是整理echarts的一些常用設定(附程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.im。如有侵權,請聯絡admin@php.cn刪除