echarts 实现同一组legend控制两个饼图示例

实现同一组legend控制两个饼图示例,代码如下:

var options = {
    title: [
      {
        text: '保管'+ '\n' +'专业',
        x: "center",
        y: "center",
        left: "23.5%",
        top: "28%",
        textAlign: "center",
        textStyle: {
          color: "#fff",
          //fontSize: 16,
          fontWeight: "normal",
          //align: "center",
        },
      },
      {
        text: '救生\n专业',
        //x: "center",
        //y: "center",
        left: "73.5%",
        top: "28%",
        textAlign: "center",
        textStyle: {
          color: "#fff",
          //fontSize: 16,
          fontWeight: "normal",
          //align: "center",
        },
      },
    ],
    tooltip: {
      //trigger: 'item',
    },
    legend: {
      bottom: '0%',
      left: 'center',
      itemStyle:{
        // color:"#fff"
        borderWidth:1,
        borderRadius:0,
      },
      textStyle:{
        color:"#fff"
      }
    },
    color: ["#199ED8","#36B442","#FC3","#D97634","#D9001B"],
    series: [
      {
        name: '保管专业',
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['25%', '40%'],
        avoidLabelOverlap: false,
        
        label: {
          show: true,
          color:"#fff",
          formatter: (params) => {
            return params.value;
          },
        },
        labelLine:{
            length:5,
            length2:0,
            lineStyle:{
              color:"transparent"
            }
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: "#fff"
        },
        data: [
          {name:"可接受",value:4},
          {name:"低",value:4},
          {name:"中",value:4},
          {name:"高",value:4},
          {name:"特高",value:4}
        ]
      },
      {
        name: '救生专业',
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['75%', '40%'],
        avoidLabelOverlap: false,
        
        label: {
            show: true,
            color:"#fff",
            formatter: (params) => {
                return params.value;
            },
        },
        labelLine:{
            length:5,
            length2:0,
            lineStyle:{
              color:"transparent"
            }
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: "#fff"
        },
        data: [
            {name:"可接受",value:4},
            {name:"低",value:4},
            {name:"中",value:4},
            {name:"高",value:4},
            {name:"特高",value:4}
        ]
      }
    ]
}

 

posted @ 2024-11-29 09:40  smil、梵音  阅读(54)  评论(0编辑  收藏  举报