echarts 饼图环形图图例位置_其他

 

 

 

 
option = {
   title: {
          text: '',
          textStyle: {
            color: '#17F0E3',
          },
        },
        tooltip: {
          trigger: 'item',
          formatter:function (params){
              return`${params.name}${params.value}  占比%`
                        }
        },
        legend: {
          orient: '',
          x: 'right', //可设定图例在左、右、居中
          y: 'bottom', //可设定图例在上、下、居中
          icon: 'pin',
          //   padding:['0%','20%','50%','0%'],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          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 + '\n' + '车流里总数'
                },
              },
              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' } },
            ],
          },
        ],
};