bar/legend 和 pie 的颜色不一样echarts 配置项内容和展示
bar/legend 和 pie 的颜色不一样
配置项如下
option ={
"selectedMode": "single",
"calculable": true,
"color": [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#91c7ae",
"#749f83",
"#ca8622",
"#bda29a",
"#6e7074",
"#546570",
"#c4ccd3"
],
"textStyle": {
"fontFamily": "Microsoft YaHei",
"fontSize": 12,
"fontStyle": "normal",
"fontWeight": "normal"
},
"animation": "auto",
"animationDuration": 1000,
"animationDurationUpdate": 300,
"animationEasing": "exponentialOut",
"animationEasingUpdate": "cubicOut",
"animationThreshold": 2000,
"progressiveThreshold": 3000,
"progressive": 400,
"hoverLayerThreshold": 3000,
"useUTC": false,
"toolbox": [
{
"feature": {
"dataZoom": {
"yAxisIndex": false,
"show": true,
"icon": {
"zoom": "M0,13.5h26.9 M13.5,26.9V0 M32.1,13.5H58V58H13.5 V32.1",
"back": "M22,1.4L9.9,13.5l12.3,12.3 M10.3,13.5H54.9v44.6 H10.3v-26"
},
"title": {
"zoom": "区域缩放",
"back": "区域缩放还原"
},
"iconStatus": {
"zoom": "normal",
"back": "normal"
}
}
},
"show": true,
"z": 6,
"zlevel": 0,
"orient": "horizontal",
"left": "right",
"top": "top",
"backgroundColor": "transparent",
"borderColor": "#ccc",
"borderWidth": 0,
"padding": 5,
"itemSize": 15,
"itemGap": 8,
"showTitle": true,
"iconStyle": {
"normal": {
"borderColor": "#666",
"color": "none"
},
"emphasis": {
"borderColor": "#3E98C5"
}
}
}
],
"title": [
{
"text": "Animation 组的 TimeLog 统计结果",
"x": "center",
"left": "center",
"zlevel": 0,
"z": 6,
"show": true,
"target": "blank",
"subtext": "",
"subtarget": "blank",
"top": 0,
"backgroundColor": "rgba(0,0,0,0)",
"borderColor": "#ccc",
"borderWidth": 0,
"padding": 5,
"itemGap": 10,
"textStyle": {
"fontSize": 18,
"fontWeight": "bolder",
"color": "#333"
},
"subtextStyle": {
"color": "#aaa"
},
"right": null
}
],
"axisPointer": [
{
"show": "auto",
"triggerOn": null,
"zlevel": 0,
"z": 50,
"type": "line",
"snap": false,
"triggerTooltip": true,
"value": null,
"status": null,
"link": [],
"animation": null,
"animationDurationUpdate": 200,
"lineStyle": {
"color": "#aaa",
"width": 1,
"type": "solid"
},
"shadowStyle": {
"color": "rgba(150,150,150,0.3)"
},
"label": {
"show": true,
"formatter": null,
"precision": "auto",
"margin": 3,
"textStyle": {
"color": "#fff"
},
"padding": [
5,
7,
5,
7
],
"backgroundColor": "auto",
"borderColor": null,
"borderWidth": 0,
"shadowBlur": 3,
"shadowColor": "#aaa"
},
"handle": {
"show": false,
"icon": "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z",
"size": 45,
"margin": 50,
"color": "#333",
"shadowBlur": 3,
"shadowColor": "#aaa",
"shadowOffsetX": 0,
"shadowOffsetY": 2,
"throttle": 40
}
}
],
"tooltip": [
{
"trigger": "axis",
"align": "left",
"axisPointer": {
"type": "cross",
"axis": "auto",
"animation": "auto",
"animationDurationUpdate": 200,
"animationEasingUpdate": "exponentialOut",
"crossStyle": {
"color": "#999",
"width": 1,
"type": "dashed",
"textStyle": {}
}
},
"zlevel": 0,
"z": 8,
"show": true,
"showContent": true,
"triggerOn": "mousemove|click",
"alwaysShowContent": false,
"displayMode": "single",
"confine": false,
"showDelay": 0,
"hideDelay": 100,
"transitionDuration": 0.4,
"enterable": false,
"backgroundColor": "rgba(50,50,50,0.7)",
"borderColor": "#333",
"borderRadius": 4,
"borderWidth": 0,
"padding": 5,
"extraCssText": "",
"textStyle": {
"color": "#fff",
"fontSize": 14
}
}
],
"yAxis": [
{
"type": "value",
"name": "小时",
"boundaryGap": [
0,
0
],
"splitNumber": 5,
"show": true,
"zlevel": 0,
"z": 0,
"inverse": false,
"nameLocation": "end",
"nameRotate": null,
"nameTruncate": {
"maxWidth": null,
"ellipsis": "...",
"placeholder": "."
},
"nameTextStyle": {},
"nameGap": 15,
"silent": false,
"triggerEvent": false,
"tooltip": {
"show": false
},
"axisPointer": {
"status": "hide",
"value": 43.74857142857143,
"seriesDataIndices": []
},
"axisLine": {
"show": true,
"onZero": true,
"lineStyle": {
"color": "#333",
"width": 1,
"type": "solid"
}
},
"axisTick": {
"show": true,
"inside": false,
"length": 5,
"lineStyle": {
"width": 1
}
},
"axisLabel": {
"show": true,
"inside": false,
"rotate": 0,
"showMinLabel": null,
"showMaxLabel": null,
"margin": 8,
"textStyle": {
"fontSize": 12
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#ccc"
],
"width": 1,
"type": "solid"
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
},
"offset": 0,
"rangeEnd": null,
"rangeStart": null,
"max": 52.8
}
],
"xAxis": [
{
"type": "category",
"axisLabel": {
"interval": 0,
"show": true,
"inside": false,
"rotate": 0,
"showMinLabel": null,
"showMaxLabel": null,
"margin": 8,
"textStyle": {
"fontSize": 12
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#ccc"
],
"width": 1,
"type": "solid"
}
},
"boundaryGap": true,
"axisTick": {
"alignWithLabel": false,
"interval": "auto",
"show": true,
"inside": false,
"length": 5,
"lineStyle": {
"width": 1
}
},
"show": true,
"zlevel": 0,
"z": 0,
"inverse": false,
"name": "",
"nameLocation": "end",
"nameRotate": null,
"nameTruncate": {
"maxWidth": null,
"ellipsis": "...",
"placeholder": "."
},
"nameTextStyle": {},
"nameGap": 15,
"silent": false,
"triggerEvent": false,
"tooltip": {
"show": false
},
"axisPointer": {
"status": "hide",
"value": 0,
"seriesDataIndices": [
{
"seriesIndex": 1,
"dataIndexInside": 0,
"dataIndex": 0
},
{
"seriesIndex": 2,
"dataIndexInside": 0,
"dataIndex": 0
},
{
"seriesIndex": 3,
"dataIndexInside": 0,
"dataIndex": 0
},
{
"seriesIndex": 4,
"dataIndexInside": 0,
"dataIndex": 0
},
{
"seriesIndex": 5,
"dataIndexInside": 0,
"dataIndex": 0
},
{
"seriesIndex": 6,
"dataIndexInside": 0,
"dataIndex": 0
},
{
"seriesIndex": 7,
"dataIndexInside": 0,
"dataIndex": 0
},
{
"seriesIndex": 8,
"dataIndexInside": 0,
"dataIndex": 0
}
]
},
"axisLine": {
"show": true,
"onZero": true,
"lineStyle": {
"color": "#333",
"width": 1,
"type": "solid"
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
},
"offset": 0,
"rangeEnd": null,
"rangeStart": null,
"data": [
"Coco Xu",
"Liu Bailiang",
"Vivian Zhang",
"Yu Miao"
]
}
],
"grid": [
{
"show": false,
"zlevel": 0,
"z": 0,
"left": "10%",
"top": 60,
"right": "10%",
"bottom": 60,
"containLabel": false,
"backgroundColor": "rgba(0,0,0,0)",
"borderWidth": 1,
"borderColor": "#ccc"
}
],
"series": [
{
"name": "项目占比",
"type": "pie",
"center": [
"80%",
"20%"
],
"radius": "20%",
"z": 100,
"zlevel": 0,
"legendHoverLink": true,
"hoverAnimation": true,
"clockwise": true,
"startAngle": 90,
"minAngle": 0,
"selectedOffset": 10,
"avoidLabelOverlap": true,
"percentPrecision": 2,
"stillShowZeroSum": true,
"label": {
"normal": {
"rotate": false,
"show": true,
"position": "outer"
},
"emphasis": {
"position": "outer",
"show": true
}
},
"labelLine": {
"normal": {
"show": true,
"length": 15,
"length2": 15,
"smooth": false,
"lineStyle": {
"width": 1,
"type": "solid"
}
},
"emphasis": {
"show": true
}
},
"itemStyle": {
"normal": {
"borderWidth": 1
},
"emphasis": {}
},
"animationType": "expansion",
"animationEasing": "cubicOut",
"data": [
{
"name": "free",
"value": 25.3
},
{
"name": "misc",
"value": 15.35
},
{
"name": "mya",
"value": 6.9
},
{
"name": "sdyx",
"value": 16.5
},
{
"name": "ss",
"value": 9.5
},
{
"name": "ygj",
"value": 24.45
},
{
"name": "yys_previz",
"value": 62.9
}
]
},
{
"name": "总计timelog",
"type": "line",
"z": 100,
"data": [
36.3,
40.2,
40.4,
44
],
"zlevel": 0,
"coordinateSystem": "cartesian2d",
"legendHoverLink": true,
"hoverAnimation": true,
"clipOverflow": true,
"label": {
"normal": {
"position": "top"
},
"emphasis": {
"position": "top"
}
},
"lineStyle": {
"normal": {
"width": 2,
"type": "solid"
}
},
"step": false,
"smooth": false,
"smoothMonotone": null,
"symbol": "emptyCircle",
"symbolSize": 4,
"symbolRotate": null,
"showSymbol": true,
"showAllSymbol": false,
"connectNulls": false,
"sampling": "none",
"animationEasing": "linear",
"progressive": 0,
"hoverLayerThreshold": null
},
{
"name": "free",
"type": "bar",
"data": [
12.7,
0,
4.8,
7.8
],
"markLine": {
"data": [
{
"yAxis": 40
}
]
},
"zlevel": 0,
"z": 2,
"coordinateSystem": "cartesian2d",
"legendHoverLink": true,
"barMinHeight": 0,
"barMinAngle": 0,
"itemStyle": {
"normal": {},
"emphasis": {}
}
},
{
"name": "misc",
"type": "bar",
"data": [
0.2,
8.2,
0.25,
6.7
],
"markLine": {
"data": [
{
"yAxis": 40
}
]
},
"zlevel": 0,
"z": 2,
"coordinateSystem": "cartesian2d",
"legendHoverLink": true,
"barMinHeight": 0,
"barMinAngle": 0,
"itemStyle": {
"normal": {},
"emphasis": {}
}
},
{
"name": "mya",
"type": "bar",
"data": [
6.9,
0,
0,
0
],
"markLine": {
"data": [
{
"yAxis": 40
}
]
},
"zlevel": 0,
"z": 2,
"coordinateSystem": "cartesian2d",
"legendHoverLink": true,
"barMinHeight": 0,
"barMinAngle": 0,
"itemStyle": {
"normal": {},
"emphasis": {}
}
},
{
"name": "sdyx",
"type": "bar",
"data": [
10.5,
6,
0,
0
],
"markLine": {
"data": [
{
"yAxis": 40
}
]
},
"zlevel": 0,
"z": 2,
"coordinateSystem": "cartesian2d",
"legendHoverLink": true,
"barMinHeight": 0,
"barMinAngle": 0,
"itemStyle": {
"normal": {},
"emphasis": {}
}
},
{
"name": "ss",
"type": "bar",
"data": [
1,
0,
0,
8.5
],
"markLine": {
"data": [
{
"yAxis": 40
}
]
},
"zlevel": 0,
"z": 2,
"coordinateSystem": "cartesian2d",
"legendHoverLink": true,
"barMinHeight": 0,
"barMinAngle": 0,
"itemStyle": {
"normal": {},
"emphasis": {}
}
},
{
"name": "ygj",
"type": "bar",
"data": [
0,
0,
24.45,
0
],
"markLine": {
"data": [
{
"yAxis": 40
}
]
},
"zlevel": 0,
"z": 2,
"coordinateSystem": "cartesian2d",
"legendHoverLink": true,
"barMinHeight": 0,
"barMinAngle": 0,
"itemStyle": {
"normal": {},
"emphasis": {}
}
},
{
"name": "yys_previz",
"type": "bar",
"data": [
5,
26,
10.9,
21
],
"markLine": {
"data": [
{
"yAxis": 40
}
]
},
"zlevel": 0,
"z": 2,
"coordinateSystem": "cartesian2d",
"legendHoverLink": true,
"barMinHeight": 0,
"barMinAngle": 0,
"itemStyle": {
"normal": {},
"emphasis": {}
}
}
],
"markArea": [
{
"zlevel": 0,
"z": 1,
"tooltip": {
"trigger": "item"
},
"animation": false,
"label": {
"normal": {
"show": true,
"position": "top"
},
"emphasis": {
"show": true,
"position": "top"
}
},
"itemStyle": {
"normal": {
"borderWidth": 0
}
}
}
],
"markLine": [
{
"zlevel": 0,
"z": 5,
"symbol": [
"circle",
"arrow"
],
"symbolSize": [
8,
16
],
"precision": 2,
"tooltip": {
"trigger": "item"
},
"label": {
"normal": {
"show": true,
"position": "end"
},
"emphasis": {
"show": true
}
},
"lineStyle": {
"normal": {
"type": "dashed"
},
"emphasis": {
"width": 3
}
},
"animationEasing": "linear"
}
],
"markPoint": [
{
"zlevel": 0,
"z": 5,
"symbol": "pin",
"symbolSize": 50,
"tooltip": {
"trigger": "item"
},
"label": {
"normal": {
"show": true,
"position": "inside"
},
"emphasis": {
"show": true
}
},
"itemStyle": {
"normal": {
"borderWidth": 2
}
}
}
],
"marker": [],
"visualMap": [],
"dataZoom": [
{
"type": "inside",
"zlevel": 0,
"z": 4,
"orient": "horizontal",
"xAxisIndex": [
0
],
"yAxisIndex": [],
"filterMode": "filter",
"throttle": 100,
"start": 0,
"end": 100,
"startValue": 0,
"endValue": 3,
"minSpan": null,
"maxSpan": null,
"minValueSpan": null,
"maxValueSpan": null,
"disabled": false,
"zoomLock": false,
"zoomOnMouseWheel": true,
"moveOnMouseMove": true,
"preventDefaultMouseMove": true,
"zAxisIndex": [],
"radiusAxisIndex": [],
"angleAxisIndex": [],
"singleAxisIndex": []
},
{
"type": "slider",
"filterMode": "weakFilter",
"showDataShadow": false,
"top": 780,
"height": 10,
"borderColor": "transparent",
"backgroundColor": "#e2e2e2",
"handleIcon": "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z",
"handleSize": 20,
"handleStyle": {
"shadowBlur": 6,
"shadowOffsetX": 1,
"shadowOffsetY": 2,
"shadowColor": "#aaa",
"color": "#a7b7cc"
},
"labelFormatter": "",
"zlevel": 0,
"z": 4,
"orient": "horizontal",
"xAxisIndex": [
0
],
"yAxisIndex": [],
"throttle": 100,
"start": 0,
"end": 100,
"startValue": 0,
"endValue": 3,
"minSpan": null,
"maxSpan": null,
"minValueSpan": null,
"maxValueSpan": null,
"show": true,
"right": "ph",
"width": "ph",
"left": null,
"bottom": null,
"dataBackground": {
"lineStyle": {
"color": "#2f4554",
"width": 0.5,
"opacity": 0.3
},
"areaStyle": {
"color": "rgba(47,69,84,0.3)",
"opacity": 0.3
}
},
"fillerColor": "rgba(167,183,204,0.4)",
"labelPrecision": null,
"showDetail": true,
"realtime": true,
"zoomLock": false,
"textStyle": {
"color": "#333"
},
"zAxisIndex": [],
"radiusAxisIndex": [],
"angleAxisIndex": [],
"singleAxisIndex": []
}
],
"brush": [],
"legend": [
{
"x": "center",
"y": "bottom",
"top": 30,
"left": "center",
"zlevel": 0,
"z": 4,
"show": true,
"orient": "horizontal",
"align": "auto",
"backgroundColor": "rgba(0,0,0,0)",
"borderColor": "#ccc",
"borderWidth": 0,
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14,
"inactiveColor": "#ccc",
"textStyle": {
"color": "#333"
},
"selectedMode": true,
"tooltip": {
"show": false
},
"right": null,
"bottom": null,
"selected": {},
"data": [
"free",
"misc",
"mya",
"sdyx",
"ss",
"ygj",
"yys_previz"
]
}
]
}
截图如下
