echarts 饼图配置详解

             1
            title: {

             2              text: ‘某站点用户访问来源‘,
 3              subtext: ‘模拟数据‘,
 4// x 设置水平安放位置，默认左对齐，可选值：‘center‘ | ‘left‘ | ‘right‘ | {number}（x坐标，单位px） 5              x: ‘center‘,
 6// y 设置垂直安放位置，默认全图顶端，可选值：‘top‘ | ‘bottom‘ | ‘center‘ | {number}（y坐标，单位px） 7              y: ‘top‘,
 8// itemGap设置主副标题纵向间隔，单位px，默认为10， 9              itemGap: 30,
10              backgroundColor: ‘#EEE‘,
11// 主标题文本样式设置12             textStyle: {
13                fontSize: 26,
14                fontWeight: ‘bolder‘,
15                color: ‘#000080‘
16             },
17// 副标题文本样式设置18             subtextStyle: {
19                fontSize: 18,
20                color: ‘#8B2323‘
21             }
22        },

             1
            legend: {

             2
            //
             orient 设置布局方式，默认水平布局，可选值：‘horizontal‘（水平） | ‘vertical‘（垂直）
             3             orient: ‘vertical‘,
 4// x 设置水平安放位置，默认全图居中，可选值：‘center‘ | ‘left‘ | ‘right‘ | {number}（x坐标，单位px） 5             x: ‘left‘,
 6// y 设置垂直安放位置，默认全图顶端，可选值：‘top‘ | ‘bottom‘ | ‘center‘ | {number}（y坐标，单位px） 7             y: ‘center‘,
 8             itemWidth: 24,   // 设置图例图形的宽 9             itemHeight: 18,  // 设置图例图形的高10            textStyle: {
11               color: ‘#666‘  // 图例文字颜色12            },
13// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔14             itemGap: 30,
15             backgroundColor: ‘#eee‘,  // 设置整个图例区域背景颜色16             data: [‘搜索引擎‘,‘直接访问‘,‘邮件营销‘,‘联盟广告‘,‘视频广告‘]
17        },

             1
            series: [

             2
                        {

             3               name: ‘访问来源‘,
 4               type: ‘pie‘,
 5// radius: ‘50%‘,  // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高) 6               radius: [‘30%‘, ‘60%‘],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小 7               center: [‘50%‘, ‘50%‘],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置 8              data: [
 9                   {value:335, name:‘搜索引擎‘},
10                   {value:310, name:‘直接访问‘},
11                   {value:234, name:‘邮件营销‘},
12                   {value:135, name:‘联盟广告‘},
13                   {value:148, name:‘视频广告‘}
14              ],
15// itemStyle 设置饼状图扇形区域样式16              itemStyle: {
17// emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读18// emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影19                emphasis: {
20                   shadowBlur: 10,
21                   shadowOffsetX: 0,
22                   shadowColor: ‘rgba(30, 144, 255，0.5)‘
23                }
24              },
25// 设置值域的那指向线26              labelLine: {
27                normal: {
28                   show: false// show设置线是否显示，默认为true，可选值：true | false29                }
30              },
31// 设置值域的标签32              label: {
33                normal: {
34                   position: ‘inner‘,  // 设置标签位置，默认在饼状图外 可选值：‘outer‘ | ‘inner（饼状图上）‘35// formatter: ‘{a} {b} : {c}个 ({d}%)‘   设置标签显示内容 ，默认显示{b}36// {a}指series.name  {b}指series.data的name37// {c}指series.data的value  {d}%指这一部分占总数的百分比38                   formatter: ‘{c}‘
39                }
40              }
41            }
42         ]

             1
            tooltip: {

             2
            //
             trigger 设置触发类型，默认数据触发，可选值：‘item‘ | ‘axis‘
             3             trigger: ‘item‘,
 4             showDelay: 20,   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms 5             hideDelay: 20,   // 隐藏延迟，单位ms 6             backgroundColor: ‘rgba(255,0,0,0.7)‘,  // 提示框背景颜色 7            textStyle: {
 8               fontSize: ‘16px‘,
 9               color: ‘#000‘  // 设置文本颜色 默认#FFF10            },
11// formatter设置提示框显示内容12// {a}指series.name  {b}指series.data的name13// {c}指series.data的value  {d}%指这一部分占总数的百分比14             formatter: ‘{a} <br/>{b} : {c}个 ({d}%)‘
15           }