echarts的基礎用法就不講了,官網上有很多demo,複製貼上就能跑。這裡主要整理一下筆者在公司中的常用配置。
當你的數據出現多條折線,而有的線條的數據很大,有的線條的數據很小,如果都統一放在一條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, }, }, ], }
echarts自帶了loading,資料載入時可以呼叫showLoading()
,取消載入時可以用hideLoading()
。
echarts沒有提供什麼好的no-data佔位,只能用title魔改。當沒有資料的時候,首先是手動清空X軸和Y軸,然後再加入title;而當有資料的時候,刪除delete title。
options = { title: { text: '此时间段暂无数据', textStyle: { color: 'black', fontWeight: 'normal', fontSize: 25, }, left: '45%', top: '30%', }, };
echarts的預設標籤是沒有單位的,echarts提供了單位的配置。在series的每條折線中都設定tooltip.valueFormatter,就可以了。
如果對標籤展示的樣式不太滿意的,echarts也允許你自訂標籤的html,此時可以在formatter的html裡面新增單位。
配置如下,根據自己的專案自行變更:
<br/>
以上是整理echarts的一些常用設定(附程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!