快捷導(dǎo)航

echarts使用中關(guān)于y坐標(biāo)軸無(wú)法正常顯示的問(wèn)題解決記錄

更新時(shí)間：2023年12月08日 10:06:08 作者：峰孑

Echarts是由百度提供的數(shù)據(jù)可視化解決方案,下面這篇文章主要給大家介紹了關(guān)于echarts使用中關(guān)于y坐標(biāo)軸無(wú)法正常顯示的問(wèn)題解決記錄,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下

前言

前段日子封裝了一個(gè)組件，大概功能為：給定一些數(shù)據(jù)，用戶手動(dòng)配置一些參數(shù)（如圖），點(diǎn)擊提交后，實(shí)現(xiàn)圖表的渲染，除此之外還有其他一些功能。（還沒(méi)和后端對(duì)接，數(shù)據(jù)為自己mock）

細(xì)節(jié)就不說(shuō)了，第一個(gè)頁(yè)面大概如此

最終渲染出來(lái)的表格

今天將組件移植到公司里面的程序時(shí)，發(fā)現(xiàn)縱坐標(biāo)一直無(wú)法顯示刻度，如下圖所示

可以看到左邊兩個(gè)y軸都是沒(méi)有刻度的

排插了三小時(shí)，最終問(wèn)題定位在了y軸配置上。

// 組件代碼
const yAxis = {
            type: 'value',
            name: `單位：${item.unit}`,
            position: item.axisLocation === '0' ? 'left' : 'right', // y軸的位置
            offset: item.axisLocation === '0' ? 70 * (++leftIndex - 1) : 70 * (++rightIndex - 1),
            alignTicks: true, // 開啟該配置項(xiàng)自動(dòng)對(duì)齊刻度
            axisLine: {
              show: true,
              onZero: false,
              // lineStyle: { color }
              lineStyle: { color: 'black' }
              // lineStyle: 'black' // 這里倒是可以用，后面在移植組件的時(shí)候就出現(xiàn)了問(wèn)題
            },

官網(wǎng)寫法：

由上可知，要實(shí)現(xiàn)對(duì)顏色的配置，有以下兩種方法：

在option內(nèi)，用對(duì)象形式，lineStyle: { color: ‘black’ }
在option外，可以直接修改其屬性值，yAxis.axisLine.lineStyle. color = ‘black’

而自己則寫了兩者取其中，不明白自己封裝的組件內(nèi)為什么正常，但是移植后，放進(jìn)dialog里時(shí)便出現(xiàn)了問(wèn)題。好歹搞了自己三小時(shí)，記錄一下吧。以后要按規(guī)范來(lái)。

雜記

Q1在父組件內(nèi)修改子組件的參數(shù)

F1：使用ref修改

在父組件里，給子組件加上ref標(biāo)簽，便可以獲子組件里面的數(shù)據(jù)，并對(duì)其進(jìn)行修改

F2:使用props實(shí)現(xiàn)父?jìng)髯?/h4>
通過(guò)props，可以實(shí)現(xiàn)值在父組件內(nèi)修改（不過(guò)子組件內(nèi)就得接收父組件里面?zhèn)鱽?lái)的值了）

總結(jié)

到此這篇關(guān)于echarts使用中關(guān)于y坐標(biāo)軸無(wú)法正常顯示問(wèn)題解決的文章就介紹到這了,更多相關(guān)echarts y坐標(biāo)軸無(wú)法正常顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: