SOURCE

var myChart =echarts.init(document.getElementById('chart'))

myChart.setOption({
    title:{
        text:'总数',
        textStyle:{

        }
    },
    legend:{
       orient: "vertical",
    top: "20%",
    align: 'auto',
    right: 10,
    width: 200,
    show: true,
    icon: "rect",
    itemHeight: 2,
    itemWidth: 12,
    itemStyle: {},
    textStyle: {
      color: "#666666",
      fontSize: 12,
    },
        data:["铁路桥梁","公路桥梁","公铁两用桥梁","人行桥梁","运水桥梁","其他专用桥梁"]
    },
    tooltip: {
    show: true,
    formatter: (params) => {
      const div$ = document.createElement("div")
      div$.innerHTML = `<p style="font-size:12px;color:#000000;font-weight:400;opacity:0.45;">${params.data.name}</p>
  <p style="font-size:12px;color:#000000;opacity:0.65;"><span>${params.marker}</span><span>${params.seriesName}</span>
  <span>${params.percent}%</span></p>`
      return div$
    }
  },
    series:[{
       name: "桥梁占比",
      type: "pie", // 饼图
      radius: ["50%", "70%"],
      center: ["35%", "50%"],
      avoidLabelOverlap: false,
      // 关闭label
      label: { show: false,position:'center',margin:-10 },
      // 关闭指示线
      labelLine: { show: false },
      data: [{"value":19,"name":"铁路桥梁"},{"value":18,"name":"公路桥梁"},{"value":16,"name":"公铁两用桥梁"},{"value":7,"name":"人行桥梁"},{"value":17,"name":"运水桥梁"},{"value":23,"name":"其他专用桥梁"}],
      itemStyle: {
      }
    }]
})

<div id="chart"></div>

#chart{
    height: 300px;
    width:100%;
    display: flex;
}