饼图可视化图表

饼图没有坐标轴，不考虑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', 一定要设置，否则图例上方的显示位置会默认在左上角显示

相关阅读:
MySQL数据库的备份与恢复
二、浏览器--事件循环（也叫事件环，也叫event loop）--任务队列（等待执行的任务（存放的定时器，http，事件等进程））--渲染三者的关系
Blender与Substance Painter从头到尾制作科幻飞行器视频教程
强化学习 double DQN 代码注释解析
华为云云证书（SSL）管理服务
21.Python函数（六）【函数式编程下半篇】
python使用pyautogui自动化模拟鼠标、键盘操作、截屏、识别图片位置
124、★最长递增子序列-LeetCode-300
基于java足球赛会管理系统
halcon知识：区域（Region）上的轮廓算子（2）

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