饼图可视化图表

饼图没有坐标轴，不考虑x轴y轴数据

代码如下


  <style>
        .main{
            width: 600px; 
            height: 400px; 
            /* outline: 1px dashed pink; */
            margin: 20px auto 0;
        }
    </style>
</head>
<body>
    
 
 
    <!-- 2.为echarts  准备一个具备大小（宽高 ）的dom
        注意：一定要有高度，否则可视化图表  显示不出来
    -->
    <div id="main" class="main"></div>
 
    <!-- 1.引入echarts -->
    <script src="./js/echarts.min.js"></script>
    <script>
    // 3.基于准备好的dom，初始化echarts实例
    var mycharts = echarts.init(document.getElementById('main'));//将数据初始化，渲染到 指定的dom节点上
    // 4.指定图表的配置项和数据
    var option = {
        // title--->图表标题
        title:{
            // text--->主标题的文本
            text:'大数据分析',
            // 图表标题的位置
            left:'center',
            top:'bottom',
            textStyle:{
                // 主标题文字颜色
                color:'skyblue',
                // 主标题文字字体大小，默认是18像素
                fontSize:'20',
            }
        },
        tooltip:{
            show:true,
        },
         // 图例组件
        legend:{
          orient:'vertical',
        //   调整图例上方的显示位置
          left:'right',
          data:['视频广告','联盟广告','邮件营销','直接访问','搜索引擎']
 
        },
        // 图表类型（数组对象）
        series:[{
            // 设置形状为饼图
            type:'pie',
            radius:'55%',//饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的55%长度    
            // 数据数组，name 为数据项名称，value 为数据项值       
             data:[          
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ],
            // 设置饼图的颜色
            itemStyle:{
                color:function(colors){
                    let colorList = ['lightblue','lightgreen','yellow','lightpink','yellowgreen'];
                    return colorList[colors.dataIndex];
                }
            }
          }],
       
    };
    // 5.使用刚刚指定的配置项和数据显示图表
    mycharts.setOption(option);
    </script>

预览效果如下

注意：在图例组件下：legend里面的 orient:'vertical', 一定要设置，否则图例上方的显示位置会默认在左上角显示

相关阅读:
第二章：25+ Python 数据操作教程（第二十一节PIP连接错误：SSL 证书验证失败解决办法）
系统设计 - 我们如何通俗的理解那些技术的运行原理 - 第八部分：Linux、安全
【数据挖掘】数据挖掘、关联分析、分类预测、决策树、聚类、类神经网络与罗吉斯回归
Linux-8-进程通信
华为WATCH 4系列升级鸿蒙4有哪些新变化
java计算机毕业设计进出货管理系统源码+mysql数据库+系统+lw文档+部署
golang安装和基础配置
软件要想做的好，测试必定少不了
$attrs
【os.path】的相关用法（持更）

原文地址：https://blog.csdn.net/m0_71814235/article/details/126848536