<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);
},