源码
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',//图例垂直
left: 'left',
data: ['上海', '广州', '中原', '西北', '浙江', '江苏'],
orient:"horizontal",
x:'right',
y:' center',
width:'100',
padding:[50, 30,0,0],
itemWidth:30,
textStyle:{
color:'#000',
fontSize:10,
},
},
series: [
{
name: '投诉占比',
type: 'pie',
radius: '32%',
center: ['22%', '16%'],
data: [
{value: 335, name: '上海'},
{value: 310, name: '广州'},
{value: 234, name: '中原'},
{value: 135, name: '西北'},
{value: 398, name: '浙江'},
{value: 400, name: '江苏'},
],
label:{
normal:{
textStyle:{
color:'#000'
}
},
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
}
}
}
]
};
option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {//图例
orient: 'vertical',/垂直
left: 'left',
data: ['上海', '广州', '中原', '西北', '浙江', '江苏'],
orient:"horizontal",
x:'right',
y:' center',
width:'100',
padding:[50, 30,0,0],
itemWidth:30,
textStyle:{//字体设置属性
color:'#000',
fontSize:10,
},
},
series : [
{
name: '投诉占比',
type: 'pie',
radius : '35%',
label: {
normal: {
position: 'inner',
show : false
}
},
center: ['50%', '60%'],
data:[
{value:335, name:'上海'},
{value:310, name:'广州'},
{value:234, name:'中原'},
{value:135, name:'西北'},
{value:1548, name:'浙江'},
{value:1548, name:'江苏'},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
源码
let circularGraph={
title: "标题",
head: true,
tuglie: ["在线设备", "离线设备"],
data: [
{
name: "在线设备",
value: 1151,
},
{
name: "离线设备",
value: 620,
},
],
sum: {
name: ['总计'],
number:0,
},
color: ["#2BEBFE", "#FC157E"],
}
let sum=0;
circularGraph.data.map((item)=>{
sum += item.value;
})
circularGraph.sum.number = sum;
option = {
title: {
text: circularGraph.title, //标题文本
left: "center",
show: circularGraph.head //是否显示标题组件
},
tooltip: {
trigger: "item",
formatter: "{b}: {c} ({d}%)"
},
legend: {
show: true,
orient: "horizontal",//图例水平对齐排列
x: "center",
y: "bottom",
textStyle: { //图例文字的样式
color: '#fff',
fontSize:12
},
data: circularGraph.tuglie, //图例组件
formatter: (name)=> {
let num = "";
circularGraph.data.forEach(item => { //格式化图例文本，支持字符串模板和回调函数两种形式。
if (item.name === name) {
num = String(item.value).replace(/(\d)(?=(?:\d{6})+$)/g, "$1.");
return;
}
});
return name + "：" + num;
}
},
graphic: {
type: "text",
left: "center",
top: "center",
style: {
text:
circularGraph.sum.name + //圆饼中心显示数据，这里是显示得总数
"\n" +
String(circularGraph.sum.number).replace(
/(\d)(?=(?:\d{6})+$)/g,
"$1."
),
textAlign: "center",
fill: "#000",
width: 30,
height: 30,
fontSize: 12
}
},
series: [
{
type: "pie",
radius: ["35%", "65%"],
itemStyle: {
normal: {
label: {
show: true,
textStyle: { color: "#3c4858", fontSize: "12" },
formatter: function(val) {
//让series 中的文字进行换行
return val.name + "\n(" + val.percent + "%)";
}
},
labelLine: {
show: true,
lineStyle: { color: "#3c4858" }
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
textColor: "#000"
}
},
data: circularGraph.data //数据
}
],
color: circularGraph.color //颜色
};
let circularGraph={
title: "标题",
head: false,
tuglie: ["1号楼", "2号楼", "3号楼", "4号楼", "5号楼", "6号楼", "7号楼", "8号楼"],
data: [
{
name: "1号楼",
value: 22,
},
{
name: "2号楼",
value: 26,
},
{
name: "3号楼",
value: 44,
},
{
name: "4号楼",
value: 44,
},
{
name: "5号楼",
value: 50,
},
{
name: "6号楼",
value: 60,
},
{
name: "7号楼",
value: 66,
},
{
name: "8号楼",
value: 29,
},
],
sum: {
name: ['设备报警总计'],
number:0,
},
color: ["#FFCA38", "#0B60FB",'#C629FC','#2E4D90','#FC38A4','#F87930','#59FD29','#5FD879'],
}
let sum=0;
circularGraph.data.map((item)=>{
sum += item.value;
})
circularGraph.sum.number = sum;
option = {
title: {
text: circularGraph.title, //标题文本
left: "center",
show: circularGraph.head //是否显示标题组件
},
tooltip: {
trigger: "item",
formatter: "{b}: {c} ({d}%)"
},
legend: {
show: true,
orient: "visualMap",//图例水平对齐排列
x: "right",
y: "center",
textStyle: { //图例文字的样式
color: '#fff',
fontSize:12
},
data: circularGraph.tuglie, //图例组件
formatter: (name)=> {
let num = "";
circularGraph.data.forEach(item => { //格式化图例文本，支持字符串模板和回调函数两种形式。
if (item.name === name) {
num = String(item.value).replace(/(\d)(?=(?:\d{6})+$)/g, "$1.");
return;
}
});
return name + "：" + num;
}
},
graphic: {
type: "text",
left: "center",
top: "center",
style: {
text:
circularGraph.sum.name + //圆饼中心显示数据，这里是显示得总数
"\n" +
String(circularGraph.sum.number).replace(
/(\d)(?=(?:\d{6})+$)/g,
"$1."
),
textAlign: "center",
fill: "#000",
width: 30,
height: 30,
fontSize: 22
}
},
series: [
{
type: "pie",
radius: ["35%", "65%"],
label: {
//去除句柄
normal: {
position: "inner",
show: false,
},
},
itemStyle: {
normal: {
label: {
show: true,
textStyle: { color: "#3c4858", fontSize: "12" },
formatter: function(val) {
//让series 中的文字进行换行
return val.name + "\n(" + val.percent + "%)";
}
},
labelLine: {
show: true,
lineStyle: { color: "#3c4858" }
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
textColor: "#000"
}
},
data: circularGraph.data //数据
}
],
color: circularGraph.color //颜色
};
