目錄 1.修改橫縱坐標(biāo)的顏色2.餅圖的數(shù)值在內(nèi)部百分百顯示:3.橫坐標(biāo)標(biāo)題過長顯示省略號(hào):補(bǔ)充知識(shí)：echarts 橫坐標(biāo)傾斜總結(jié)

echart修改一些配置項(xiàng),經(jīng)常會(huì)用到經(jīng)常忘記,這里記錄一下!

1.修改橫縱坐標(biāo)的顏色

看代碼:

const option = { tooltip: {trigger: 'axis',axisPointer: { type: 'shadow',}, }, grid: {// show:true,left: '5%',top: '10%',right: '2%',bottom: '8%',borderWidth: 1, }, legend: {data: ['項(xiàng)目總數(shù)', '在建項(xiàng)目數(shù)', '開工項(xiàng)目數(shù)'],textStyle: { color: 'rgb(255,255,255,0.9)',}, }, xAxis: [{ type: 'category', axisTick: { show: false }, data: [ '成都新經(jīng)濟(jì)', '成都科學(xué)城', '龍?zhí)豆I(yè)機(jī)器', '成都新谷', '白鷺灣新經(jīng)濟(jì)', '龍泉汽車城', '成都醫(yī)學(xué)城', '天府牧山數(shù)字', ], axisLine: { lineStyle: { color: '#fff', }, },}, ], yAxis: [{ type: 'value', axisLine: { lineStyle: { color: '#fff', }, },}, ], };2.餅圖的數(shù)值在內(nèi)部百分百顯示:

const option = { tooltip: {trigger: 'item',backgroundColor: '#002870',// color: 'pink',borderWidth: '0',textStyle: { color: '#fff', fontSize: 3,}, }, legend: {textStyle: { color: 'rgb(255,255,255,0.9)',},orient: 'vertical', //設(shè)置圖例的方向right: 5,top: 'center',// itemGap:30//設(shè)置圖例的間距 }, series: [{ type: 'pie', radius: '90%', center: ['30%', '50%'], data: [ { value: 1048, name: '成都新經(jīng)濟(jì)活力區(qū)' }, { value: 735, name: '成都科學(xué)城' }, { value: 180, name: '龍?zhí)豆I(yè)機(jī)器人產(chǎn)業(yè)功能區(qū)' }, { value: 484, name: '成都新谷' }, { value: 300, name: '白鷺灣新經(jīng)濟(jì)' }, { value: 220, name: '龍泉汽車城' }, { value: 590, name: '成都醫(yī)學(xué)城' }, { value: 340, name: '天府牧山數(shù)字新城' }, ], label: { normal: { show: true, position: 'inner', // 數(shù)值顯示在內(nèi)部 formatter: `qcy8sy8k88%`, // 格式化數(shù)值百分比輸出 textStyle: {//數(shù)值樣式color: '#fff',fontSize: 12,// fontWeight: 100, }, }, },}, ], };3.橫坐標(biāo)標(biāo)題過長顯示省略號(hào):

xAxis: [ { type: 'category', axisLabel: {interval: 0, // rotate: 30 formatter: (value) => { if (value.length >= 4) { value = (value.slice(0, 4)) + '...';} return value; }}, axisTick: { show: false }, data:xData, axisLine: {lineStyle: { color: '#fff',}, }, }, ],補(bǔ)充知識(shí)：echarts 橫坐標(biāo)傾斜

你可以使用 ECharts 中的 xAxis.axisLabel.rotate 屬性來設(shè)置橫坐標(biāo)標(biāo)簽的旋轉(zhuǎn)角度，從而傾斜橫坐標(biāo)。例如：

option = { // ... xAxis: {type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],axisLabel: { rotate: 45, // 設(shè)置旋轉(zhuǎn)角度，單位為度（°） interval: 0 // 設(shè)置橫坐標(biāo)標(biāo)簽的顯示間隔，默認(rèn)為自動(dòng)計(jì)算間隔} }, // ...};

以上代碼中的 rotate 屬性設(shè)置了旋轉(zhuǎn)角度為 45°，可以根據(jù)實(shí)際需求進(jìn)行調(diào)整。同時(shí)，interval 屬性可以設(shè)置橫坐標(biāo)標(biāo)簽的顯示間隔，例如 interval: 2 表示每隔兩個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽。

總結(jié)

到此這篇關(guān)于echarts修改橫坐標(biāo)顏色的文章就介紹到這了,更多相關(guān)echarts修改橫坐標(biāo)顏色內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！