Highcharts pie常用方法: legend 样式、 colors、events自定义

1、Higcharts 设置标题换行;
2、Higcharts 图像颜色;
3、自定义legend 事件
4、自定义legend 样式
属性配置代码:

option = {
    
    
        chart: {
    
    
          spacing: [40, 0, 40, 0]
        },
        title: {
    
    
          align: 'center',
          floating: true,
          useHTML: true,//自定义标题设置  userHtml: 为true
          text: ``
        },
        tooltip: {
    
    
        },
        credits: {
    
    
          enabled: true//隐藏右下角水印
        },
        legend: {
    
    
          labelFormatter: function () {
    
    //自定义样式
            return `<div style='fontSize: 14px; width: 112px;whiteSpace: nowrap; overflow: hidden; textOverflow: ellipsis'>${
      
      this.name}</div> <div style="fontSize: 14px; color: #777777">${
      
      this.y} 亿元</div>`
          },
          useHTML: true,//应许自定义 legend 样式
          itemDistance: 70,//定义legenditem 间距
          itemStyle: {
    
     height: 40, padding: 10 },
          margin: 50
        },
        plotOptions: {
    
    
          pie: {
    
    
            allowPointSelect: true,
            cursor: 'pointer',
            colors: ['#1BA0EA','#37D99E','#7ED3F4','#7E9AF4','#007DFF','#00BFC9','#A051E9','#E82E90','#E88B00','#41BA41','#ADD7FF'],//定义饼图颜色按照自定义颜色渲染
            dataLabels: {
    
    
              enabled: true,
              formatter: function (param) {
    
    //自定义dataLabel 样式
                return `<div style='width: 70px;whiteSpace: nowrap; overflow: hidden; textOverflow: ellipsis'>${
      
      this.point.name}</div> <div>${
      
      this.point.y} 亿元</div>`
              },
              useHTML: true,
              style: {
    
    
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
              }
            },
            showInLegend: true,
            events: {
    
    
              click: function (e) {
    
     // 同样的可以在点击事件里处理 定义饼图点击事件
                
              }
            },
            point: {
    
    
              events: {
    
    
                legendItemClick: function (e) {
    
    //从自定义legend 点击事件
                 
                  return false; // 直接 return false 即可禁用图例点击事件
                }
              }
            }
          }
        },
        series: [{
    
    
          type: 'pie',
          innerSize: '65%',//设置饼图内外环比例
          size: '150',//固定饼图大小
          name: '',
          data: [{
    
    name: 'test'; y: 12}],
          events: {
    
    
            legendItemClick: function () {
    
    

            },
            click: function (e) {
    
    

            }

          }
        }]
      }

猜你喜欢

转载自blog.csdn.net/weixin_47659945/article/details/129119713
今日推荐