Echarts饼图和柱状图&legend调整位置

 饼图位置和他的legend

//饼图调整图位置与legend位置
const options = {
        title: {
          text: '河北省人民政府国有资产监督管理委员会2024年度责任追究人次',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: '',
          x: 'right', // 可设定图例在左、右、居中
          y: 'center', // 可设定图例在上、下、居中
          left: 'right'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            center: ['30%', '50%'], // 调整图位置,[0]左右,[1]上下
            data: [
              { value: 1048, name: '组织处理' },
              { value: 735, name: '扣减薪酬' },
              { value: 580, name: '禁入限制' },
              { value: 484, name: '党纪政务处分' },
              { value: 300, name: '移送国家检察机关或司法机关' },
              { value: 300, name: '其他' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

柱状图

grid: {
    top: '15%',// 距离上面的边距
    left: '15%', // 距离下面的边距
},

//center: ['30%', '50%'] 不生效

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 echarts 提供的图例组件和切换组件来实现饼图柱状图的切换。具体操作如下: 1. 在 option 中设置 legend,包含饼图柱状图的名称。 2. 在 option 中设置 series,分别对应饼图柱状图的数据。 3. 在 option 中设置 toolbox,里面包含一个切换组件,用于切换饼图柱状图。 示例代码如下: ```js option = { ... legend: { data:['饼图', '柱状图'], selected: { '饼图': true, '柱状图': false } }, series: [{ name: '饼图', type: 'pie', data: [ {value: 335, name: 'A'}, {value: 310, name: 'B'}, {value: 234, name: 'C'}, {value: 135, name: 'D'}, {value: 1548, name: 'E'} ], label: { show: true, formatter: '{b}: {c} ({d}%)' } }, { name: '柱状图', type: 'bar', data: [320, 332, 301, 334, 390, 330, 320], label: { show: true, position: 'top' } }], toolbox: { feature: { mySwitch: { show: true, title: { pie: '切换到饼图', bar: '切换到柱状图' }, iconStyle: { emphasis: { borderColor: '#1E90FF' } }, icon: 'path://M303.557 497.504c-7.81 0-15.679-2.97-21.678-8.969l-157.084-157.084c-11.949-11.949-11.949-31.36 0-43.308s31.36-11.949 43.309 0l135.405 135.404v-358.395c0-16.277 13.199-29.477 29.477-29.477s29.477 13.199 29.477 29.477v358.394l135.404-135.404c11.948-11.949 31.36-11.949 43.308 0s11.949 31.36 0 43.309l-157.084 157.084c-6 6-13.87 8.969-21.679 8.969z', onclick: function (params, charts) { var option = charts.getOption(); if (option.legend[0].selected['饼图']) { option.legend[0].selected = { '饼图': false, '柱状图': true }; option.series[0].name = '柱状图'; option.toolbox.feature.mySwitch.title = { pie: '切换到饼图', bar: '切换到柱状图' }; } else { option.legend[0].selected = { '饼图': true, '柱状图': false }; option.series[0].name = '饼图'; option.toolbox.feature.mySwitch.title = { pie: '切换到柱状图', bar: '切换到饼图' }; } charts.setOption(option); } } } } ... }; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值