Echarts bar、環形圖混合圖

效果以下

 

var option = {
       title : {
        x:'6%',
        y:'bottom',
        textStyle: {
            fontSize: 10, color: '#72879C'
        },
        text:'12er3'
    },
     tooltip: {
        trigger: 'item',
        formatter: function(param) {
            console.log(param)
            if (param.componentSubType=="bar") {
                if (param.seriesIndex==1) {
                    return 
                }
                return param.name+"："+param.data+"%";
            } else {
               return param.data.name+"："+param.data.value+"%";
            }
        }
    },
     grid: [
         {
             left: '0%',
             right: '0%',
             top: '5%',
             bottom: '85%',
             containLabel: true
         },
         {
            top: '2%',
            left: '1%',
            right: '2%',
            bottom: '2%',
            containLabel: true
        }
     ],
     xAxis: [{
         type: 'value',
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        show: false
     }
     ],
     yAxis: [
         {
             type: 'category',
             data: ['佔比'],
             inverse: false,
             axisTick: {
              show: false
             },
             axisLabel: {
              margin: 20,
              textStyle: {
                fontSize: 18,
                color: '#fff'
              }
             },
             axisLine: {
              show: false
             }
         }
     ],
     series: [
         {
             name: '外銷',
             type: 'bar',
             barWidth: 14,
             label: {
                 normal: {
                     show: true,
                     position: 'right',color:'#fff'
                 }
             },
             data: [16.28],
             itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#57eabf' // 0% 處的顏色
                }, {
                  offset: 1,
                  color: '#2563f9' // 100% 處的顏色
                }], false),
                barBorderRadius: 14
              }
            }
         }, {
            type: "bar",
            barWidth: 14,
            xAxisIndex: 0,
            barGap: "-100%",
            data: [100],
            itemStyle: {
              normal: {
                color: "#444a58",
                barBorderRadius: 14
              }
            },
            zlevel: -1
         },
           {
            type:'pie',
            center: ['50%', '60%'],
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                     textStyle: {
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                     value: 9182.57,
                     name: '外銷塊煤'
                 },
                 {
                     value: 4202.42,
                     name: '內銷塊煤'
                 },
                 {
                     value: 6361.68,
                     name: '外銷面煤'
                 },
                 {
                     value: 11489.29,
                     name: '內銷面煤'
                 }
             ]
        }
     ]
 };