建站
咨詢
售后
建站咨詢
新聞中心
在本節(jié)中，我們要在 ECharts 中快速實現(xiàn)一個日歷圖。
10年積累的成都網(wǎng)站建設、成都做網(wǎng)站經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站設計后付款的網(wǎng)站建設流程，更有方山免費網(wǎng)站建設讓你可以放心的選擇與我們合作。
下面是 ECharts 中的日歷坐標系：
點擊編輯實例 》》
具體的實現(xiàn)步驟如下所述：
步驟一：引入 js 文件
我們只需要下載的最新完整版本的 echarts.min.js 即可，無需再單獨引入其他文件：
步驟二：指定 DOM 元素作為圖表容器
和 ECharts 中的其他圖表一樣，創(chuàng)建一個 DOM 來作為繪制圖表的容器：
使用 ECharts 進行初始化：
var myChart = echarts.init(document.getElementById('main'));步驟三：配置參數(shù)
以常見的日歷圖為例: calendar 坐標 + heatmap 圖：
var option = {
visualMap: {
show: false
min: 0,
max: 1000
},
calendar: {
range: '2017'
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: [['2017-01-02', 900], ['2017-01-02', 877], ['2017-01-02', 699], ...]
}
}
myChart.setOption(option);在 heatmap 圖的基礎上，加上 coordinateSystem: 'calendar',和calendar: { range: '2017' }heatmap 圖就秒變?yōu)槿諝v圖了。
提示：如果圖表沒有正確顯示出來，請您檢查是否發(fā)現(xiàn)以下幾種情況：JS文件是否正確加載；ECharts 變量是否存在；控制臺是否報錯;DOM 元素在 echarts.init 的時候是否有高度和寬度。若為 type: heatmap，檢查是否配置了 visualMap。
上述實例的完整代碼如下：
ECharts
上述操作實現(xiàn)的是一個最簡單的日歷圖，當然我們也可以利用 ECharts 中的自定義配置參數(shù)實現(xiàn)一些個人想要達到的效果。
自定義配置參數(shù)
使用 ECharts 日歷坐標繪制日歷圖時，支持自定義的各項屬性:
- range: 設置時間的范圍，可支持某年、某月、某天，還可支持跨年
- cellSize: 設置日歷格的大小，可支持設置不同高寬，還可支持自適應auto
- width、height: 也可以直接設置改日歷圖的整體高寬，讓其基于已有的高寬全部自適應
- orient: 設置坐標的方向，既可以橫著也可以豎著
- splitLine: 設置分隔線樣式，也可以直接不顯示
- itemStyle: 設置日歷格的樣式，背景色、方框線顏色大小類型、透明度均可自定義，甚至還能加陰影
- dayLabel: 設置坐標中 星期樣式，可以設置星期從第幾天開始，快捷設置中英文、甚至是自定義中英文混搭、或局部不顯示、通過formatter 可以想怎么顯示就怎么顯示;
- monthLabel: 設置坐標中 月樣式，和星期一樣，可快捷設置中英文和自定義混搭
- yearLabel: 設置坐標中 年樣式，默認顯示一年，通過formatter 文字可以想顯示什么就能通過string function任性自定義，上下左右方位隨便選;
完整的配置項參數(shù)參見：calendar API
ECharts 日歷坐標系的其他形式
ECharts 日歷坐標系提供了在日歷上繪制圖表的能力，除了常用日歷圖的制作，我們還可以在熱力圖、散點圖、關系圖中使用日歷坐標系。
在 ECharts 日歷坐標系中使用熱力圖：
點擊編輯實例 》》
在 ECharts 日歷坐標系中使用散點圖：
點擊編輯實例 》》
ECharts 日歷坐標系可以混合放置不同的圖表。
例如下例子，同時放置了熱力圖和關系圖：
點擊編輯實例 》》
其他一些更加豐富的效果
ECharts 圖表和坐標系的靈活組合，以及 API，還可以實現(xiàn)更豐富的效果。
例如，我們可以制作農歷：
點擊編輯實例 》》
更有趣的是，我們還可以在日歷坐標系上繪制餅圖，這里需要使用 chart.convertToPixel 接口：
點擊編輯實例 》》
當前題目：創(chuàng)新互聯(lián)ECharts教程：ECharts實例二：實現(xiàn)日歷圖
地址分享：http://www.dlmjj.cn/article/dhcohdp.html
