1.饼图中间画文字
image.png
let myChart = this.$echarts.init(pieChart);
let options = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
title: { //title和graphic 中间画文字
text: this.totalCount,
left: "center",
top: "40%",
textStyle: {
color: "#545a68",
fontSize: 26,
align: "center",
},
},
graphic: {
type: "text",
left: "center",
top: "54%",
style: {
text: "总摊位数",
textAlign: "center",
color: "#545a68",
fill: "#333",
fontSize: 14,
align: "center",
},
},
series: [
{
name: "摊位",
type: "pie",
radius: ["40%", "70%"],
labelLine: {
length: 20,
length2: 0,
},
label: { //动态lable
formatter: function (data) {
if (data.name === "未租赁") {
return "{c|" + data.value + "}个\n{hr|}\n {b|" + data.name + "}";
} else {
return "{c|" + data.value + "}个\n{hr1|}\n {b|" + data.name + "}";
}
},
fontSize: 16,
padding: [0, -3],
rich: {
c: {
fontSize: 24,
lineHeight: 33,
},
hr: {
borderColor: "#545a68",
width: "100%",
borderWidth: 1,
height: 0,
},
hr1: {
borderColor: "#43b748",
width: "100%",
borderWidth: 1,
height: 0,
},
b: {
fontSize: 16,
lineHeight: 33,
},
},
},
legendHoverLink: false,
hoverAnimation: false,
itemStyle: {
borderColor: "#ffffff",
borderWidth: 3,
},
data: data,
},
],
color: ["#43b748", "#545a68"],
};
myChart.setOption(options);
2.柱状图圆角和lable自定义
image.png
let myChart = this.$echarts.init(barChart);
let options = {
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
},
legend: {
data: ["已租赁", "未租赁"],
right: "3%",
},
grid: {
left: "3%",
right: "3%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: data.labelArr,
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
width: 0,
},
},
splitLine: {
show: true,
lineStyle: {
color: ["#f4f9f9"],
width: 1,
type: "solid",
},
},
axisLabel: {
interval: 0,
lineHeight: 16,
formatter: function (params) { //自定义label
var arr, newParamsName;
arr = params.split("-");
if (arr.length > 1) {
newParamsName = arr[0] + "-\n" + arr[1];
} else {
newParamsName = params;
}
return newParamsName;
},
},
},
],
yAxis: [
{
type: "value",
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
width: 0,
},
},
splitLine: {
show: true,
lineStyle: {
color: ["#dee4e5"],
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "已租赁",
type: "bar",
barWidth: 16,
data: data.rentedCountArr,
itemStyle: {
barBorderRadius: [4, 4, 0, 0], //bar圆角
},
},
{
name: "未租赁",
type: "bar",
barWidth: 16,
data: data.notRentedCountArr,
itemStyle: {
barBorderRadius: [4, 4, 0, 0],
},
},
],
color: ["#43b748", "#b5c7d0"],
};
myChart.setOption(options);
网友评论