echarts 饼状图 label 字体设置

 1、给label按需设置样式,在 series 的 label 中用 formatter 格式化内容,在rich中设置样式

 option = {

        tooltip: {

          trigger: 'axis'

        },

        legend: {

          orient: 'vertical',

          top: 'center',

          right: '3%',

          itemWidth: 10, // 图例 icon 与 name 之间的距离

          itemHeight: 5, // icon 大小

          icon: 'circle', // icon 形状

          textStyle: {

            fontWeight: 'bold' // 字体

          }

        },

        series: [

          {

            type: 'pie',

            radius: ['40%', '70%'], // 圆半径

            center: ['42%', '50%'], // 圆中心位置

            avoidLabelOverlap: false,

            // hoverAnimation: false, // 为false 时关闭动画 且 emphasis不设置

            emphasis: { // 动画样式--鼠标划过面积时的label动画效果设置

              label: {

                show: true,

                fontSize: 14,

                fontWeight: 'bold'

              }

            },

            labelLine: { // 引导线

              show: true,

              smooth: true // 是否平滑

            },

            label: {  // 自定义label 样式 + 内容
                        //  {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

              formatter: ' { b }  \n  { c | { c } } 起   ({d} %)',

              rich: {        // 在rich中可以分别给 a,b,c,d 设置样式

                c: {

                  lineHeight: 26,

                  fontWeight: 'bold'

                }

              }

            },

            data: accidentRankingDataList

          }

        ]

      }

 2、效果图

echarts 饼状图 label 字体设置_第1张图片

你可能感兴趣的:(echarts,前端,javascript)