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

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

1.修改橫縱坐標的顏色

看代碼:

const option = { tooltip: {trigger: 'axis',axisPointer: { type: 'shadow',}, }, grid: {// show:true,left: '5%',top: '10%',right: '2%',bottom: '8%',borderWidth: 1, }, legend: {data: ['項目總數(shù)', '在建項目數(shù)', '開工項目數(shù)'],textStyle: { color: 'rgb(255,255,255,0.9)',}, }, xAxis: [{ type: 'category', axisTick: { show: false }, data: [ '成都新經(jīng)濟', '成都科學城', '龍?zhí)豆I(yè)機器', '成都新谷', '白鷺灣新經(jīng)濟', '龍泉汽車城', '成都醫(yī)學城', '天府牧山數(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)濟活力區(qū)' }, { value: 735, name: '成都科學城' }, { value: 180, name: '龍?zhí)豆I(yè)機器人產(chǎn)業(yè)功能區(qū)' }, { value: 484, name: '成都新谷' }, { value: 300, name: '白鷺灣新經(jīng)濟' }, { value: 220, name: '龍泉汽車城' }, { value: 590, name: '成都醫(yī)學城' }, { value: 340, name: '天府牧山數(shù)字新城' }, ], label: { normal: { show: true, position: 'inner', // 數(shù)值顯示在內(nèi)部 formatter: `dv1hrpp7z%`, // 格式化數(shù)值百分比輸出 textStyle: {//數(shù)值樣式color: '#fff',fontSize: 12,// fontWeight: 100, }, }, },}, ], };3.橫坐標標題過長顯示省略號:

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',}, }, }, ],補充知識：echarts 橫坐標傾斜

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

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

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

總結(jié)

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