ECharts

饼图

`

{tooltip: {trigger: 'item'},color: ['rgb(78, 253, 254)', 'rgb(27, 194, 55)', 'rgb(150, 254, 46)', 'rgb(254, 224, 44)', 'rgb(241, 179, 28)', 'rgb(234, 147, 59)', 'rgb(253, 102, 60)'],series: [{name: '',type: 'pie',radius: ['65%', '78%'],itemStyle: {borderColor: '#112654',borderWidth: 2},label: {show: true,position: 'outside',margin: 30,formatter: '{b}\n{d|{d}%}',rich: {d: {// 视觉映射得到的颜色，如系列色color: 'inherit',fontWeight: 500,fontSize: 24,lineHeight: 29,}},color: 'rgb(211, 242, 255)',fontWeight: 400,fontSize: 20,lineHeight: 30,},labelLine: {show: true,length: 32,length2: 48,},data: asData.value,// 在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。avoidLabelOverlap: true}]
}

折线图

{grid: {show: false,left: 50,top: 10,bottom: 30},tooltip: {show: true},xAxis: {type: 'category',data: props.xData,// 坐标轴轴线axisLine: {show: false},// 坐标轴刻度axisTick: {show: false},// 坐标轴刻度标签axisLabel: {// 是否隐藏重叠的标签hideOverlap: true,color: 'rgba(255, 250, 255, 0.7)',fontWeight: 400,fontSize: 20,lineHeight: 30},// 坐标轴在 grid 区域中的分隔线splitLine: {show: true,lineStyle: {color: 'rgb(60, 91, 117)',width: 1,type: [4, 4],}}},yAxis: {type: 'value',// 坐标轴刻度标签axisLabel: {// 是否隐藏重叠的标签hideOverlap: true,color: 'rgba(255, 250, 255, 0.7)',fontWeight: 400,fontSize: 20,lineHeight: 30},// 坐标轴在 grid 区域中的分隔线splitLine: {show: true,lineStyle: {color: 'rgb(60, 91, 117)',width: 1,type: [4, 4],}}},series: [{data: props.yData,type: 'line',// 折线拐点标志的样式itemStyle: {color: 'rgb(68, 215, 182)',},// 区域填充样式areaStyle: {// 渐变色color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(68, 215, 182, 0.3)' // 0% 处的颜色}, {offset: 1, color: 'rgba(68, 215, 182, 0)' // 100% 处的颜色}],}}}]
}