baozhengrui

导航

echart图的两边分布图例

·


function init2() {

   var myChart = echarts.init(echart2.value)
   let sum = 0;
   for (let item of chartData.value) {
       sum += item.value;
   }
   var option = {
       title: {
           // text: "{a|总数}" + "\n{c|" + sum + "}",
           // x: "center",
           // y: "center",
           // textStyle: {
           //     rich: {
           //         a: {
           //             fontSize: 14,
           //             color: "#5e5e5e",
           //         },
           //         c: {
           //             fontSize: 14,
           //             color: "#5e5e5e",
           //             padding: [10, 0],
           //         },
           //     },
           // },
           text: '新兵需求占比图',
           top:'0%',
           left:'center'
       },
       color: ["#85acfb","#cfdffd","#85e2bd","#daf6eb","#8795ae","#dbdfe6","#f8ce52","#fdf0cb","#9488fb","#d5d0fd","#93d6f1","#def2fb","#b088cb",],
       tooltip: {
           trigger: "item",
           formatter: "{b} : {c}%",
       },
       toolbox: {
           show: true,
       },
       legend: [
           {
               x: 'left',
               orient: 'vertical',
               left:'10%',
               data: [],
               top: "center", //水平位置,【left\center\right\数字】
               align: "left", //字在图例的左边或右边【left/right】
               orient: "vertical", //图例方向【horizontal/vertical】
               icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
               textStyle: {
                   color: "#8C8C8C",
               },
           },
           {
               top: "center", //水平位置,【left\center\right\数字】
               left:'85%',
               align: "right", //字在图例的左边或右边【left/right】
               orient: "vertical", //图例方向【horizontal/vertical】
               icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
               textStyle: {
                   color: "#8C8C8C",
               },
               x: 'right',
               orient: 'vertical',
               data: [],
           },
       ],
       series: [
           {
               type: "pie",
               radius: ["20%", "40%"],
               label: {
                   normal: {
                       show: true,
                       formatter: "{b}",
                   },
                   emphasis: {
                       show: true,
                   },
               },
               data: chartData.value,
           },
       ],
   };
   option.legend[0].data = chartData.value.slice(0, chartData.value.length/2)
   option.legend[1].data = chartData.value.slice(-(chartData.value.length / 2))
   myChart.setOption(option);
   window.addEventListener('resize', () => {
       myChart.resize();
   })
}

posted on 2024-11-18 11:18  芮艺  阅读(2)  评论(0编辑  收藏  举报