• 周四. 12月 1st, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

echarts 饼图环形图图例位置

admin

11月 28, 2021

   option = {
        title: {
          text: '',
          textStyle: {
            color: '#17F0E3',
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return `${params.name}${params.value}  占比%`
          },
        },
        legend: {
          orient: '', //删除此项图例是水平展示,添加此项图例垂直展示
          x: 'right', //x : 左(left)、右(right)、居中(center)
          y: 'bottom', //y : 上(top)、下(bottom)、居中(center)
          padding: [0, 0, 0, 0], //padding:[0,30,0,0] [(上),(右)、(下)、(左)]

          icon: 'pin',

          textStyle: {
            //图例文字的样式
            color: '#fff',
            fontSize: 12,
          },
          data: ['加油消费车', '加气消费车', '充电消费车', '未消费车'],
        },
        grid: {
          //设置图表撑满整个画布
          top: '12px',
          left: '12px',
          right: '16px',
          bottom: '12px',
          containLabel: true,
        },
        series: [
          {
            hoverAnimation: false, //鼠标悬浮是否有区域弹出动画,false:无  true:有
            name: '',
            type: 'pie',
            radius: ['75%', '85%'], //设置饼图大小宽度
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                formatter: function (data) {
                  // 设置圆饼图中间文字排版
                  return data + '
' + '车流里总数'
                },
              },
              emphasis: {
                show: false, //文字至于中间时,这里需为true
                textStyle: {
                  //设置文字样式
                  fontSize: '12',
                  color: '#fff',
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 450,
                name: '加油消费车',
                itemStyle: { color: '#59CFFF' },
              },
              {
                value: 620,
                name: '加气消费车',
                itemStyle: { color: '#7B79FF' },
              },
              {
                value: 80,
                name: '充电消费车',
                itemStyle: { color: '#23B89A' },
              },
              { value: 170, name: '未消费车', itemStyle: { color: '#B3B3B3' } },
            ],
          },
        ],
      }

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注