Vue之echarts圆饼图详解

圆饼图

1. 1. 案例分析

代码：

   

option = {
    backgroundColor: '#2c343c',

    title: {
        text: 'Customized Pie',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:274, name:'联盟广告'},
                {value:235, name:'视频广告'},
                {value:400, name:'搜索引擎'}
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
};

 

图：

1. 首先是在指定标签初始化一张图
   1. 设置字体颜色【设置副标题、主标题字体颜色】

title : {
  subtext:this.subtext,
  x:'center',
  subtextStyle:{
    color:'#ffffff'
  }
},

通过subtextStyle里面设置字体的属性值，在这里我设置为显示为白色。

 

1. 1. 设置每一块扇形的颜色

{value:556, name:'正常',itemStyle:{color:'#4f8bf9'}},
{value:40, name:'告警',itemStyle:{color:'#fea31e'}},
{value:30, name:'离线',itemStyle:{color:'#959595'}},]

通过对每一块扇形的itemStyle进行设置，来设置扇形的内容，我仅仅修改了每个扇区的颜色，效果如下：

 

1. 1. 修改引线文字格式

series : [
  {
    name:'访问来源',
    type:'pie',
    radius : '55%',
    center: ['50%', '60%'],
    data:this.datas,
    label: {
      normal: {
        //  {b}  代表显示的内容标题
        // {c}代表数据值

//{d}代表占百分比
        formatter: ' {b}：{d}% ',
        borderWidth: 20,
        borderRadius: 4,
      }
    },

  }
]

在这里我仅仅让引线显示的文字为：name: 百分比

效果如下图：

1. 1. 修改选中扇区的动作

series : [
  {
    name:'访问来源',
    type:'pie',
    radius : '55%',
    center: ['50%', '60%'],
    data:this.datas,
    selectedMode: 'single',

selectedOffset:20,


    label: {
      normal: {
        // \n\n可让文字居于牵引线上方，很关键
        //  {b}  代表显示的内容标题
        // {c}代表数据
        formatter: ' \n\n{b}：{d}% ',
        borderWidth: 20,
        borderRadius: 4,
      }
    },

  }
]

通过对selectedMode进行设置，默认为true，可以通过修改来选择动作模式。

在这里，我的选择为single，还有另外一个选项为 'multiple'。

其次selectedOffset显示偏离距离。

single的动作效果图如下：

multiple的动作效果图：

              每个扇区都彼此分离。

 

1. 1. 修改legend样式

   

 legend: {

        // orient: 'vertical',

        // top: 'middle',

        bottom: 10,

        left: 'center',

        data: ['西凉', '益州','兖州','荆州','幽州']

},

效果图如下，legend位于底部中部，离最低端10：

在这里，通过设置bottom在显示数据为底部，显示的值依次为data数组中的内容。同时，可以设置的样式有如下【摘取局部】，更多详情可以参照官网的api和配置：