echart图pie的分析

zhgc

案例一：


关于legend:

1.     legend: {
   
2.                         x : 'center',
   
3.                         y : 'top',
   
4.                         data: ['前壳刮伤','挂扣亮印','指示灯不亮','镜片刮伤','LCD屏内白点'],
   
5.                         textStyle: {
   
6.                                 color: '#cdddf7',
   
7.                                 fontSize:'10',
   
8.                         }
   
9.     },
   

复制代码

字体变小后， legend依然显示不全.还有属性：
top:10,
            legend: { //图例组件，颜色和名字
                x: '70%',
                y: 'center',
                orient: 'vertical',
                itemGap: 12, //图例每项之间的间隔
                itemWidth: 10,
                itemHeight: 10,
                icon: 'rect',
                data: ['行业一', '行业二', '行业三'],
                textStyle: {
                    color: [],
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                }
            },

zhgc

var optionOne = {
                title : {
                    text: '开通渠道饼图',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'horizontal',
                    x : 'center',
                    y : 'bottom',
                    data:['xxxxAPP','xxxx微信端','xxxxAPP','xxxAPP','xxx机顶盒']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'',
                        type:'pie',
                        radius : '65%',
                        center: ['50%', '50%'],
                        /* label: {
                            normal: {
                            show: true,
                            formatter: '{b}: {c}({d}%)'},
                            textStyle : {
                                fontWeight : 'normal',
                                fontSize : 15
                            },labelLine :{show:true}
                        }, */
                        itemStyle:{
                            normal:{
                               label:{
                                  show: true,
                                  formatter: '{b} : {c} ({d}%)'
                                  },
                                  labelLine :{show:true}
                                  }
                             },
                        data:[
                            {value:500, name:'xxxAPP'},
                            {value:400, name:'xxxx微信端'},
                            {value:300, name:'xxxxAPP'},
                            {value:200, name:'xxxAPP'},
                            {value:100, name:'xxx顶盒'}
                        ]
                    }
                ]
            };

zhgc

1.图中‘1’的文字大小调整在‘legend’对象下的‘textStyle’属性里
2.图中‘2’的文字大小调整在‘tooltip’对象下的‘textStyle’属性里
3.图中‘3’的文字大小调整在‘series’对象下的‘label’属性里

1. {
   
2.     "title": {
   
3.         "text": "",
   
4.         "subtext": "",
   
5.         "x": "center"
   
6.     },
   
7.     "tooltip": {
   
8.         "trigger": "item",
   
9.         "formatter": "{a} <br\/>{b} : {c}%",
   
10.         "textStyle": {
    
11.             "fontSize": 18
    
12.         }
    
13.     },
    
14.     "legend": {
    
15.         "orient": "vertical",
    
16.         "left": "left",
    
17.         "data": ["", "使用场景", "活动", "适用人群", "品牌", "款式", "物流", "价格", "功能", "服务", "质量"],
    
18.         "textStyle": {
    
19.             "fontSize": 18
    
20.         }
    
21.     },
    
22.     "toolbox": {
    
23.         "feature": {
    
24.             "dataView": {
    
25.                 "show": true,
    
26.                 "readOnly": false
    
27.             },
    
28.             "saveAsImage": {
    
29.                 "show": true
    
30.             }
    
31.         }
    
32.     },
    
33.     "series": [{
    
34.         "name": "",
    
35.         "type": "pie",
    
36.         "radius": ["0%", "100%"],
    
37.         "data": [{
    
38.             "name": "使用场景",
    
39.             "value": 0.23
    
40.         }, {
    
41.             "name": "活动",
    
42.             "value": 0.44
    
43.         }, {
    
44.             "name": "适用人群",
    
45.             "value": 0.83
    
46.         }, {
    
47.             "name": "品牌",
    
48.             "value": 1.09
    
49.         }, {
    
50.             "name": "款式",
    
51.             "value": 4.56
    
52.         }, {
    
53.             "name": "物流",
    
54.             "value": 7.56
    
55.         }, {
    
56.             "name": "价格",
    
57.             "value": 7.62
    
58.         }, {
    
59.             "name": "功能",
    
60.             "value": 17.03
    
61.         }, {
    
62.             "name": "服务",
    
63.             "value": 20.03
    
64.         }, {
    
65.             "name": "质量",
    
66.             "value": 40.6
    
67.         }],
    
68.         "label": {
    
69.             "normal": {
    
70.                 "show": true,
    
71.                 "textStyle": {
    
72.                     "fontSize": 18 }
    
73.             },
    
74.             "emphasis": {
    
75.                 "show": true
    
76.             }
    
77.         },
    
78.         "lableLine": {
    
79.             "normal": {
    
80.                 "show": true
    
81.             },
    
82.             "emphasis": {
    
83.                 "show": true
    
84.             }
    
85.         }
    
86.     }]
    
87. }

复制代码