1、设置数据类型
[{name:'名称',value:数值}]
2、饼图的显示和样式
series:[
{
type:'pie',
data:pieData,
label:{
show:true,
formatter: '{b}花费{c}:{d}%' 显示文本信息,或者回调函数return 设置
{a}:系列名。
{b}:数据名。
{c}:数据值。
{d}:百分比。
{@xxx}:数据中名为'xxx'的维度的值,如{@product}表示名为'product'` 的维度的值。
{@[n]}:数据中维度n的值,如{@[3]}` 表示维度 3 的值,从 0 开始计数。
},
radius:20 设置饼图半径,数值或百分比(参照容器最小边)
radius:'20%'
radius:['50%','75%'], 圆环,第一个内圆半径,第二个外圆半径
roseType:'radius', 南丁格尔图,根据数值确定半径,每一个弧半径都不同
selectedMode:'single', 点击饼块,脱离圆点一部分,'single'|'multiple',单选和多选
selectedOffset:30, 设置选中偏移量
center:['n%','n%'], 设置饼图在图表中的位置,50%代表正中心
hoverAnimation:false, 关闭饼图hover在扇区上的放大动画效果。适用于圆环
},
]
效果图:
代码示例:
export default {
name: 'App',
mounted:function(){
var myMap=echarts.init(document.querySelector('.map'));
var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']
var yData1=[88,92,63,77,94,80,72,86];
var yData2=[80,90,60,70,90,70,62,76];
var pieData=[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]
var option = {
series:[
{
type:'pie',
data:pieData,
label:{
show:true,
formatter: '{b}花费{c}:{d}%' //或者回调函数return 设置
},
// radius:20 //设置饼图半径,数值或百分比(参照容器最小边)
// radius:'20%'
// radius:['50%','75%'], //将饼图设置成圆环,第一个内圆半径,第二个外圆半径
roseType:'radius', //南丁格尔图,根据数值确定半径,每一个弧半径都不同
selectedMode:'single', //点击饼块,脱离圆点一部分,'single'|'multiple',单选和多选
selectedOffset:30 //设置选中偏移量
},
]
};
myMap.setOption(option);
// };
}
}