前端 echart pie饼图左右布局

理想三旬642

已于 2023-12-11 16:05:16 修改

阅读量183

点赞数

文章标签：前端

于 2023-12-04 10:31:57 首次发布

本文链接：https://blog.csdn.net/weixin_60592115/article/details/134777805

版权

关键参数

源码

    let option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical', // 设置图例的排列方向为垂直
                        right: 0, // 设置图例在图表的右侧
                        top: 'center', // 设置图例在图表中垂直居中
                        itemWidth: 5,
                        itemHeight: 5,
                        textStyle: { fontSize: 10, },
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            left: "-30%",
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2,
                                normal: {
                                    color: function (colors) {

                                        return colorList[colors.dataIndex];
                                    }
                                },

                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: []
                        }
                    ]
                };
///自适应
  window.addEventListener("resize", function () {
                    countChart.resize();
                    areaChart.resize();
                })