1.自定義說明文字 lengend
image.png
legend: {
orient: 'vertical',
right: "15%", //所處位置
top: "15%",
color: ['#42bd7c', '#7fc6fa', '#1d84c7', '#20638e', '#297149', '#1ec6c6'], //設(shè)置顏色
formatter: (params) => { //格式化數(shù)據(jù)的函數(shù)
console.log('我的參數(shù)',params) //打印出來的數(shù)據(jù)（營業(yè)，網(wǎng)絡(luò)，房屋，tgtn,g）
for (let a = 0; a < this.pieXY.length; a++) {// this.pieXY 這個數(shù)據(jù)中有名稱和次數(shù)
if (this.pieXY[a].name == params) { //兩個名稱進(jìn)行對比，取出對應(yīng)的次數(shù)
return params + ' ' + this.pieXY[a].value + '次' //然后return你需要的legend格式即可
}
}
}
},
2.自定義鼠標(biāo)懸浮框toolTip
image.png
tooltip: { //懸浮框
trigger: "axis",
backgroundColor: '#fff', //背景色
padding: [5, 15, 5, 15], //邊距
borderColor: '#DDDDDF', //邊框顏色
borderWidth: 1, //邊框線寬度
textStyle: { //文字樣式
color: '#6A6A6A',
decoration: 'none',
fontFamily: 'Verdana, sans-serif',
},
extraCssText:'text-align: left;', //文字對齊方式
formatter: function (params) { //格式化函數(shù)
return '現(xiàn)付：'+params[0].data.key+'</br>'+'月結(jié)：'+params[0].data.name
},
},
需要注意的是，這個的數(shù)據(jù)需要我們自己設(shè)置,可以自定義加入key,name,label等等，到時候取出來
let formList = [{
key:213,
name:213,
value:416
}]
``在series中使用我們改裝后的數(shù)據(jù)``
series: [{
showAllSymbol: true,
formatter: '{data}元',
type: "line",
name: '金額',
data: formList , //使用我們改裝過的數(shù)據(jù)，折線圖取value值
color: ["#3ccacb"],
title: {
subtext: "單位 : 元",
padding: [10, 50, 60, 60]
},
label: {
normal: {
position: 'inner'
}
}]
3.自定義餅狀圖的label
餅狀圖默認(rèn)有如下提示
image.png
如果不想要這個提示文字，需要像如下設(shè)置
series: [{
type: "pie",
radius: ["40%", "68%"],
center: ["45%", "60%"],
data: this.pieXY,
label: {
normal: {
show: false, //設(shè)置show為false即可
position: 'center'
},
}
}]
如果需要自定義label里面的文字，請看如下設(shè)置
series: [{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
center: ["40%", "60%"],
data: this.pieXY,
label: {
normal: {
show: true,
formatter: function (params) {
return params.name + " " + +params.value + " 次"
}
}
},
}]
image.png
4.Y軸數(shù)字放不下，修改Y軸數(shù)字所占位置大小
Y軸數(shù)字未太大，未完全展示出來
image.png
修改屬性后
image.png
grid: {
left: 55
},
