<div id="main1" style="height: 250px;width: 380px;"></div>
pie() {
				var echarts = require('echarts');
				var myChart = echarts.init(document.getElementById('main1'));

				//字符串截取
				var plantCap = [{
					name: '西南',
					value: '50'
				}, {
					name: '西北',
					value: '30'
				}, {
					name: '华北',
					value: '25'
				}, {
					name: '华南',
					value: '20'
				}, {
					name: '华东',
					value: '16'
				}, {
					name: '华中',
					value: '10'
				}, {
					name: '东北',
					value: '7'
				}];

				var datalist = [{
					offset: [15, 20],
					symbolSize: 96,
					opacity: .95,
					color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.7, [{
							offset: 0,
							color: "rgba(3,142,99,0)"
						},
						{
							offset: 1,
							color: "rgba(3,142,99,1)"
						}
					]),
				}, {
					offset: [10, 70],
					symbolSize: 90,
					opacity: .88,
					color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.7, [{
							offset: 0,
							color: "rgba(149,149,29,0)"
						},
						{
							offset: 1,
							color: "rgba(149,149,29,1)"
						}
					]),
				}, {
					offset: [40, 75],
					symbolSize: 76,
					opacity: .84,
					color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.7, [{
							offset: 0,
							color: "rgba(3,87,124,0)"
						},
						{
							offset: 1,
							color: "rgba(3,87,124,1)"
						}
					]),
				}, {
					offset: [50, 20],
					symbolSize: 70,
					opacity: .8,
					color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.7, [{
							offset: 0,
							color: "rgba(143,99,48,0)"
						},
						{
							offset: 1,
							color: "rgba(143,99,48,1)"
						}
					]),
				}, {
					offset: [60, 50],
					symbolSize: 65,
					opacity: .75,
					color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.7, [{
							offset: 0,
							color: "rgba(5,122,29,0)"
						},
						{
							offset: 1,
							color: "rgba(5,122,29,1)"
						}
					]),
				}, {
					offset: [35, 45],
					symbolSize: 56,
					opacity: .7,
					color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.7, [{
							offset: 0,
							color: "rgba(95,14,133,0)"
						},
						{
							offset: 1,
							color: "rgba(95,14,133,1)"
						}
					]),
				}, {
					offset: [65, 75],
					symbolSize: 50,
					opacity: .68,
					color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.7, [{
							offset: 0,
							color: "rgba(199,14,91,0)"
						},
						{
							offset: 1,
							color: "rgba(199,14,91,1)"
						}
					]),
				}];
				var datas = [];
				for (var i = 0; i < plantCap.length; i++) {
					var item = plantCap[i];
					var itemToStyle = datalist[i];
					datas.push({
						name:  item.name,
						value: itemToStyle.offset,
						symbolSize: itemToStyle.symbolSize,
						label: {
							normal: {
								textStyle: {
									fontSize: 11
								}
							}
						},
						itemStyle: {
							normal: {
								color: itemToStyle.color,
								opacity: itemToStyle.opacity
							}
						},
					})
				}
				
			    var optionData =datas
				
				
				let option = {
					grid: {
						show: false,
						top: 10,
						bottom: 10
					},
					// tooltip: {
					// 	trigger: 'item',
					// 	formatter: "{a} <br/>{b} : {c} ({d}%)"
					// },

					legend: {
						formatter: function(name) {
							return name
							// return optionData[0].name
						},
						orient: 'vertical',
						x: '300',
						y: 'center',
						itemHeight: 6,
						textStyle: {
							color: '#fff',
							// padding: [0, -75]

						},
						data: ['西南:50', '西北:30', '华北:25', '华南:20', '华东:16', '华中:10', '东北:7']
					},

					xAxis: [{
						gridIndex: 0,
						type: 'value',
						show: false,
						min: 0,
						max: 100,
						nameLocation: 'middle',
						nameGap: 5
					}],
					yAxis: [{
						gridIndex: 0,
						min: 0,
						show: false,
						max: 100,
						nameLocation: 'middle',
						nameGap: 30
					}],
					series: [{
							name: '西南:50',
							type: 'scatter',
							symbol: 'circle',
							symbolSize: 120,
							label: {
								normal: {
									show: true,
									formatter: '{b}',
									color: '#fff',
									textStyle: {
										fontSize: '20'
									}
								},
							},
							// itemStyle: {
							//     normal: {
							//         color: '#00acea'
							//     }
							// },
							data: datas
						},
						{
							name: '西北:30',
							type: 'scatter',
						},
						{
							name: '华北:25',
							type: 'scatter',
						},
						{
							name: '华南:20',
							type: 'scatter',
						},
						{
							name: '华东:16',
							type: 'scatter',
						},
						{
							name: '华中:10',
							type: 'scatter',
						},
						{
							name: '东北:7',
							type: 'scatter',
						}
					]
				};

				myChart.setOption(option);

			},

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注