目录
- echarts 之配置属性
- 饼形图
echarts 之配置属性
- 南丁格尔图
roseType
: “radius”,
- 双层饼形图
饼形图
- 配置属性,也就是再
option
里面书写修改图形的样式
-
color
:图形的颜色设置 数组 -
title
: 是否显示组件的标题(一般用于显示标题,或者计算总数) -
tooltip
:提示框,用于鼠标滑过的时候,显示当前想要显示的内容 -
formatter
:一般用于处理文本的显示,可以玩出各种骚操作 legend
:显示图例的说明 里面的left方位可以使用的是 位置(center) 和 百分比(5%)
-
textStyle
:文本的样式 fontSize color padding等
series
:用于显示每一个数据 => {},{},{}
- 注意点:就是若是要显示两层,就是外层的有连接线,里层只是显示 百分比,那么则需要两个{},然后对于内层只是显示百分比的,需要在label之中 设置一个定位
position: "inner",
表示显示内层 -
type
:类型 bar line pie -
roseType
: “radius”, 是否显示南丁格尔图 ‘radius’ 半径展现数据的大小。‘area’ 半径展现数据大小。 -
minAngle
:最小占比,就是用于显示占比很小,但是又需要显示的那种
*radius & center
: 半径 & 中心点 -
data
:数据的显示,为数组形式 -
itemStyle
: 对每一项 进行占比留白 需要设置normal下的 borderColor & borderWidth -
labelLine
:连接线的设计 length: 6, length2:10, 有外线1和外线2 ;lineStyle 设置线的颜色 label
:就是对series中的每一个数据进行样式的修饰
-
labelLine
:是否显示连接线 normal
:
-
formatter
:对文本的修饰 然后对 rich 的样式的使用"{meony|" + XXX + "}"
-
rich
:就是样式的设计 比如:rich:{ money:{ 里面写样式 } }
title: [
{
//修改总价格 lastTotal 再外层进行计算后 再显示与标题之中 一般放在正中央
text: "\n{val|" + lastTotal+ "}",
top: this.top,
left: "center",
textStyle: { // title的文本 样式修饰
rich: {
val: {
fontSize: 20,
fontWeight: "bold",
color: "#1A1A1E",
},
},
},
},
],
tooltip: {
trigger: "item", // 触发项 就是每一个item 针对散点和饼形图; axis 针对柱状图
borderColor: "rgba(255,255,255,.3)",
backgroundColor: "rgba(13,5,30,.6)",
borderWidth: 1,
padding: 5,
// 处理文本的显示
formatter: function (parms) {
var str =
parms.marker +
"" +
parms.data.name +
"</br>" +
"金额:" +
formatNumber(parms.data.meony) +
"亿元</br>" +
"占比:" +
parseFloat(parms.percent).toFixed(1) +
"%";
return str;
},
},
// 显示图例的说明 left 这边可以使用的是 位置 和 百分比
legend: {
left: "center",
left: "5%",
bottom: "5%",
itemWidth: 10,
itemHeight: 10,
textStyle: {
color: "#73747E",
fontSize: "12",
},
},
series: [
{
type: "pie",
minAngle: 17, //设置扇形的最小占比
radius: this.radius,
center: this.pieChartSimpleCenter,
data: echartData,
hoverAnimation: false,
// 对每一项 进行占比留白
itemStyle: {
normal: {
borderColor: "#fff",
borderWidth: 2,
},
},
labelLine: {
normal: {
length: 6,
length2: 10,
// lineStyle: {//连接线
// color: "#e6e6e6",
// },
},
},
label: {
labelLine: {
show: true,
},
normal: {
formatter: (params) => {
return "{meony|" + formatNumber(params.data.meony) + "}";
},
rich: {
meony: {
fontSize: 12,
fontWeight: "bold",
color: "#1A1A1E",
},
},
},
},
},
//显示内层
{
name: "",
type: "pie",
minAngle: 17, //设置扇形的最小占比
radius: this.radius,
center: this.pieChartSimpleCenter,
avoidLabelOverlap: false,
itemStyle: {
borderWidth: 3,
borderColor: "#fff",
},
label: {
color: "#000",
show: true,
position: "inner",
width: 10,
height: 0,
lineHeight: 0,
formatter: function (p) {
let percent = parseFloat(p.percent).toFixed(1);
return "\n{white|" + percent + "%}";
},
align: "center",
rich: {
white: {
fontSize: 12,
color: "#fff",
align: "center",
padding: [0, -2, 0, 0],
},
},
},
labelLine: {
show: false,
},
// 饼形图数据
data: echartData,
},
],