1.自定义说明文字 lengend
image.png
legend: {
orient: 'vertical',
right: "15%", //所处位置
top: "15%",
color: ['#42bd7c', '#7fc6fa', '#1d84c7', '#20638e', '#297149', '#1ec6c6'], //设置颜色
formatter: (params) => { //格式化数据的函数
console.log('我的参数',params) //打印出来的数据（营业，网络，房屋，tgtn,g）
for (let a = 0; a < this.pieXY.length; a++) {// this.pieXY 这个数据中有名称和次数
if (this.pieXY[a].name == params) { //两个名称进行对比，取出对应的次数
return params + ' ' + this.pieXY[a].value + '次' //然后return你需要的legend格式即可
}
}
}
},
2.自定义鼠标悬浮框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) { //格式化函数
return '现付：'+params[0].data.key+'</br>'+'月结：'+params[0].data.name
},
},
需要注意的是，这个的数据需要我们自己设置,可以自定义加入key,name,label等等，到时候取出来
let formList = [{
key:213,
name:213,
value:416
}]
``在series中使用我们改装后的数据``
series: [{
showAllSymbol: true,
formatter: '{data}元',
type: "line",
name: '金额',
data: formList , //使用我们改装过的数据，折线图取value值
color: ["#3ccacb"],
title: {
subtext: "单位 : 元",
padding: [10, 50, 60, 60]
},
label: {
normal: {
position: 'inner'
}
}]
3.自定义饼状图的label
饼状图默认有如下提示
image.png
如果不想要这个提示文字，需要像如下设置
series: [{
type: "pie",
radius: ["40%", "68%"],
center: ["45%", "60%"],
data: this.pieXY,
label: {
normal: {
show: false, //设置show为false即可
position: 'center'
},
}
}]
如果需要自定义label里面的文字，请看如下设置
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轴数字放不下，修改Y轴数字所占位置大小
Y轴数字未太大，未完全展示出来
image.png
修改属性后
image.png
grid: {
left: 55
},
