echarts legend图例样式调整

贝塔贝卡贝

已于 2022-04-24 22:31:38 修改

阅读量3.2k

点赞数

文章标签：前端

于 2022-04-22 16:20:41 首次发布

本文链接：https://blog.csdn.net/Kiruthika/article/details/124348832

版权

echarts中默认legend图例是这样的：
在这里插入图片描述
但是我们需求是这样的：

legend样式调整成如上需要控制legend中的itemHeight、itemWidth这两个属性值

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    type: 'scroll',
    orient: 'horizontal',
    right:10,
    top: 200,
    textStyle:{
      fontSize:16,
      fontWeight:600
    },
    icon:"rect",
    itemHeight:60,
    itemWidth:10
  },
  series: [
    {
      name: 'Access From',
      center:["26%","36%"],
      type: 'pie',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};