摘要:正如標(biāo)題所說(shuō),這是的一遍填坑,如果你是一些的配置的話可以閱讀的官網(wǎng)配置信息。我想官網(wǎng)中關(guān)于的動(dòng)態(tài)數(shù)據(jù)案例說(shuō)的也夠詳細(xì),但是它們的并不是我想要的格式,這時(shí)候怎么辦,我們可以通過(guò)和和達(dá)到設(shè)置坐標(biāo)的效果,通過(guò)來(lái)設(shè)置間距。
正如標(biāo)題所說(shuō),這是Echarts的一遍填坑,如果你是一些echart的配置的話可以閱讀
http://echarts.baidu.com/opti...的官網(wǎng)配置信息。今天我想給大家分享的是一些我前段時(shí)間從highchart改echart的時(shí)候所遇到的一些問(wèn)題。希望能對(duì)大家有用。
1、echart 在使用的時(shí)候標(biāo)簽必須明確的定義其高度,不能讓其自適應(yīng),否則會(huì)出現(xiàn)顯示不出來(lái)的情況!
2、關(guān)于echart中Y坐標(biāo)不完全等比例顯示問(wèn)題
當(dāng)你遇到Y(jié)軸不是等分顯示的時(shí)候,這時(shí)候你就應(yīng)該看看你Y坐標(biāo)配置中是否配置了max這個(gè)選項(xiàng),當(dāng)配置max這一項(xiàng)的時(shí)候,Y坐標(biāo)的最大顯示數(shù)會(huì)以你配置的最大值作為結(jié)束,也就可能出現(xiàn)Y坐標(biāo)不能完全等分顯示的情況
yAxis :{ type: "value", axisLine: { show: false }, axisTick: { show: false, }, scale: true, splitLine:{ show:true, }, splitNumber: 3, position:"left", //max:_self.value, axisLabel: { inside: false, interval: 0, formatter: function(value, index) { return value; } } }
3、關(guān)于X軸type類型為time時(shí)如何自定義時(shí)間軸
有時(shí)候在項(xiàng)目中我們可能為遇到將X軸設(shè)置為時(shí)間軸的時(shí)候,但是又想自定義一定的規(guī)則來(lái)達(dá)到想要的效果。那么怎么辦。我想echart官網(wǎng)中關(guān)于time的動(dòng)態(tài)數(shù)據(jù)案例說(shuō)的也夠詳細(xì)(http://echarts.baidu.com/demo...),但是它們的并不是我想要的格式,這時(shí)候怎么辦,我們可以通過(guò)max和min和達(dá)到設(shè)置X坐標(biāo)的效果,通過(guò)interval來(lái)設(shè)置間距。
xAxis :{ type:"time", axisTick: { //坐標(biāo)軸刻度相關(guān)設(shè)置 alignWithLabel: true, lineStyle: { color: "#ccc" } }, axisLine: { //坐標(biāo)軸軸線相關(guān)設(shè)置 lineStyle: { color: "#ccc" } }, axisLabel: { //坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置 textStyle: { color: "#666" } }, splitLine: { show: false }, minInterval: 24 * 3600 * 1000, interval: 24 * 3600 * 1000 * tickInterval, min:_self.order_chart_data.order_chart_xAxis[0], max:_self.order_chart_data.order_chart_xAxis[_self.order_chart_data.order_chart_xAxis.length-1] }, 效果:
時(shí)間選擇為1天時(shí),圖表并以小時(shí)為單位更新數(shù)據(jù):
時(shí)間選擇為大于1天時(shí),圖表并以天為單位更新數(shù)據(jù):
當(dāng)設(shè)置X軸type類型為time的時(shí)候還有幾點(diǎn)要注意的時(shí):
(1)、x軸配置中不用配置data屬性 (2)、series中的數(shù)據(jù)類型data屬性要嚴(yán)格按照下面這種格式書寫數(shù)據(jù)格式(否則數(shù)據(jù)會(huì)加載不出來(lái)) series : { name: "echarts", yAxisIndex: 0, type:"line", data : { name:_self.order_chart_data.order_chart_xAxis[i], value: [_self.order_chart_data.order_chart_xAxis[i],yAxis_one[i]] }, showSymbol: false, itemStyle: { normal: { color: "#5AAAEA", lineStyle: { color: "#5AAAEA" } } } }
要說(shuō)的就這么多,總的來(lái)說(shuō)echart相對(duì)來(lái)說(shuō)還是比較簡(jiǎn)單的,官網(wǎng)的案例基本可以滿足全部需要。希望以上問(wèn)題對(duì)大家能有幫助!!!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/82723.html
摘要:原文見(jiàn)我的博客,點(diǎn)擊進(jìn)入使用開發(fā)微信公眾號(hào)下站點(diǎn)的填坑之旅本文為我創(chuàng)業(yè)過(guò)程中,開發(fā)項(xiàng)目的填坑之旅。作為一個(gè)技術(shù)宅男,我的項(xiàng)目是做一個(gè)微信公眾號(hào),前后端全部自己搞定,不浪費(fèi)國(guó)家一分錢。 原文見(jiàn)我的博客,點(diǎn)擊進(jìn)入使用vue開發(fā)微信公眾號(hào)下SPA站點(diǎn)的填坑之旅 本文為我創(chuàng)業(yè)過(guò)程中,開發(fā)項(xiàng)目的填坑之旅。作為一個(gè)技術(shù)宅男,我的項(xiàng)目是做一個(gè)微信公眾號(hào),前后端全部自己搞定,不浪費(fèi)國(guó)家一分錢^_^。 ...
摘要:博客搬家原地址原發(fā)表時(shí)間本文討論使用安裝包構(gòu)建網(wǎng)站底層服務(wù)后,包括域名解析,的管理等的一系列填坑歷程。域名解析問(wèn)題相關(guān)首先將本人的網(wǎng)站信息公布如下域名地址主機(jī)提供方搬瓦工域名托管及解析阿里云萬(wàn)網(wǎng)本文之后的內(nèi)容均是基于以上信息。 「博客搬家」 原地址: CSDN 原發(fā)表時(shí)間: 2016-11-16 本文討論使用 LNMP 安裝包構(gòu)建網(wǎng)站底層服務(wù)后,包括域名解析,MySQL 的管理等...
摘要:目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目,記錄一下遇到的問(wèn)題和解決方法主要是前端。前端提交時(shí)使用,在后端再取出對(duì)應(yīng)的微信支付看了下文檔,以前是需要用喚起支付,而現(xiàn)在則是把微信內(nèi)置到了微信的瀏覽器中。 目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目,記錄一下遇到的問(wèn)題和解決方法(主要是前端)。內(nèi)容持續(xù)更新中~ 主要實(shí)現(xiàn) 前后端分離前端為 SPA 單頁(yè)面使用微信的JSSDK微信支付 技術(shù)方案 后端使用 php ...
閱讀 890·2021-10-27 14:19
閱讀 1114·2021-10-15 09:42
閱讀 1538·2021-09-14 18:02
閱讀 745·2019-08-30 13:09
閱讀 2990·2019-08-29 15:08
閱讀 2093·2019-08-28 18:05
閱讀 958·2019-08-26 10:25
閱讀 2789·2019-08-23 16:28