echarts 饼图(圆环、南丁格尔图)

水深无声 2021-07-25 02:33 835阅读 0赞

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在扇区上的放大动画效果。适用于圆环
        },
      ]

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 2]  
代码示例:

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201016110708931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/b83bb0de0e6240c49cebd730636bb112.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210724/46b6815a10674bf5bcf7ecc770c5da55.png