normal pie

在这里插入图片描述

// 行业分布统计
                industryTypeChart: function () {
    
    
                    let that = this;
                    var chartDom = document.getElementsByClassName('bottom-right-industry')[0];
                    var myChart = echarts.init(chartDom);
                    let option;
                    option = {
    
    
                      // 背景色
                      // backgroundColor: '#093036',

                      // title样式
                      // title: {
    
    
                      //     text: '玫瑰图',
                      //     left: 'center',
                      //     top: 20,
                      //     textStyle: {
    
    
                      //         color: '#ccc'
                      //     }
                      // },

                      // hover详情效果(文字的样式也是可以自定义的(官方文档直接搜tool))
                      tooltip: {
    
    
                          trigger: 'item',
                      },
                      // 图例 
                      legend: {
    
    
                        // 图例组件离容器上下左右的距离:https://echarts.apache.org/zh/option.html#legend.left
                       left: 'auto' ,
                       top: 'auto' ,
                       right: 'auto' ,
                       bottom: 5,
                       // 图例列表的布局朝向
                        orient: 'horizontal',
                        // 字体
                        textStyle: {
    
    
                            color: "#fff",
                            fontSize: 16
                        },
                        // 图例宽高 一般别设置,内部会自动处理的比较完美
                        // itemHeight: 24,
                        // itemWidth: 50
                      },
                     series: [
                     {
    
    
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            selectedMode: 'single',
            data: [
                {
    
    value: 1048, name: '搜索引擎'},
                {
    
    value: 735, name: '直接访问'},
                {
    
    value: 580, name: '邮件营销'},
                {
    
    value: 484, name: '联盟广告'},
                {
    
    value: 300, name: '视频广告'}
            ],
            label: {
    
    
                     color:'#fff'
                     },
            emphasis: {
    
    
                itemStyle: {
    
    
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
                     ]
                   };

                    option && myChart.setOption(option);

                    // setTimeout(function () {
    
    
                    //     that.enterpriseTypeChart = echarts.init(document.querySelector(
                    //         '.education_alumni_type_chart'));
                    //     that.enterpriseTypeChart.setOption(option);
                    // }, 10)
                },

猜你喜欢

转载自blog.csdn.net/weixin_43131046/article/details/126534509
pie
今日推荐