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

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

1.雙Y軸

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

只需要配置好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() 。

3.no-data佔位

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

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

4.標籤帶單位

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

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

配置如下，根據自己的專案自行變更：

<br/>

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