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 | false
29                 }
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的name
37                   // {c}指series.data的value  {d}%指这一部分占总数的百分比
38                   formatter: ‘{c}‘
39                 }
40               }
41             }
42         ]
series的radius设为50%时

echarts 饼图配置详解

 

series的radius设为[‘30%‘, ‘60%‘],  的时候:

echarts 饼图配置详解

 

 提示框设置

 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‘  // 设置文本颜色 默认#FFF
10             },
11             // formatter设置提示框显示内容
12             // {a}指series.name  {b}指series.data的name
13             // {c}指series.data的value  {d}%指这一部分占总数的百分比
14             formatter: ‘{a} <br/>{b} : {c}个 ({d}%)‘
15           }

背景颜色设置

 1 backgroundColor: ‘red‘ 

饼图每块颜色设置

 1 color: [‘#7EC0EE‘, ‘#FF9F7F‘, ‘#FFD700‘, ‘#C9C9C9‘, ‘#E066FF‘, ‘#C0FF3E‘] 


echarts 饼图配置详解

上一篇:node开发命令行脚本 / commander


下一篇:logging.Formatter日志格式