深圳全飞鸿

标题: echart图pie的分析 [打印本页]
作者: zhgc    时间: 2021-8-16 14:37
标题: echart图pie的分析
案例一：


关于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    时间: 2021-8-20 18:35
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    时间: 2023-4-21 17:59

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. }
复制代码






欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2