echarts 之配置属性
- 南丁格尔图
roseType
: “radius”,
- 双层饼形图
饼形图
- 配置属性,也就是再
option
里面书写修改图形的样式
color
:图形的颜色设置 数组title
: 是否显示组件的标题(一般用于显示标题,或者计算总数)tooltip
:提示框,用于鼠标滑过的时候,显示当前想要显示的内容formatter
:一般用于处理文本的显示,可以玩出各种骚操作legend
:显示图例的说明 里面的left方位可以使用的是 位置(center) 和 百分比(5%)
textStyle
:文本的样式 fontSize color padding等
series
:用于显示每一个数据 => {},{},{}
- 注意点:就是若是要显示两层,就是外层的有连接线,里层只是显示 百分比,那么则需要两个{},然后对于内层只是显示百分比的,需要在label之中 设置一个定位
position: "inner",
表示显示内层 type
:类型 bar line pieroseType
: “radius”, 是否显示南丁格尔图 ‘radius’ 半径展现数据的大小。‘area’ 半径展现数据大小。minAngle
:最小占比,就是用于显示占比很小,但是又需要显示的那种
*radius & center
: 半径 & 中心点data
:数据的显示,为数组形式itemStyle
: 对每一项 进行占比留白 需要设置normal下的 borderColor & borderWidthlabelLine
:连接线的设计 length: 6, length2:10, 有外线1和外线2 ;lineStyle 设置线的颜色label
:就是对series中的每一个数据进行样式的修饰
labelLine
:是否显示连接线normal
:
formatter
:对文本的修饰 然后对 rich 的样式的使用 "{meony|" + XXX + "}"
rich
:就是样式的设计 比如:rich:{ money:{ 里面写样式 } }
title: [
{
text: "\n{val|" + lastTotal+ "}",
top: this.top,
left: "center",
textStyle: {
rich: {
val: {
fontSize: 20,
fontWeight: "bold",
color: "#1A1A1E",
},
},
},
},
],
tooltip: {
trigger: "item",
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;
},
},
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,
},
},
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,
},
],