• 饼图可视化图表

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

    代码如下

    1.   <style>
    2.         .main{
    3.             width: 600px; 
    4.             height: 400px; 
    5.             /* outline: 1px dashed pink; */
    6.             margin: 20px auto 0;
    7.         }
    8.     </style>
    9. </head>
    10. <body>
    11.     
    12.  
    13.  
    14.     <!-- 2.为echarts  准备一个具备大小（宽高 ）的dom
    15.         注意：一定要有高度，否则可视化图表  显示不出来
    16.     -->
    17.     <div id="main" class="main"></div>
    18.  
    19.     <!-- 1.引入echarts -->
    20.     <script src="./js/echarts.min.js"></script>
    21.     <script>
    22.     // 3.基于准备好的dom，初始化echarts实例
    23.     var mycharts = echarts.init(document.getElementById('main'));//将数据初始化，渲染到 指定的dom节点上
    24.     // 4.指定图表的配置项和数据
    25.     var option = {
    26.         // title--->图表标题
    27.         title:{
    28.             // text--->主标题的文本
    29.             text:'大数据分析',
    30.             // 图表标题的位置
    31.             left:'center',
    32.             top:'bottom',
    33.             textStyle:{
    34.                 // 主标题文字颜色
    35.                 color:'skyblue',
    36.                 // 主标题文字字体大小，默认是18像素
    37.                 fontSize:'20',
    38.             }
    39.         },
    40.         tooltip:{
    41.             show:true,
    42.         },
    43.          // 图例组件
    44.         legend:{
    45.           orient:'vertical',
    46.         //   调整图例上方的显示位置
    47.           left:'right',
    48.           data:['视频广告','联盟广告','邮件营销','直接访问','搜索引擎']
    49.  
    50.         },
    51.         // 图表类型（数组对象）
    52.         series:[{
    53.             // 设置形状为饼图
    54.             type:'pie',
    55.             radius:'55%',//饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的55%长度    
    56.             // 数据数组，name 为数据项名称，value 为数据项值       
    57.              data:[          
    58.                 {value:235, name:'视频广告'},
    59.                 {value:274, name:'联盟广告'},
    60.                 {value:310, name:'邮件营销'},
    61.                 {value:335, name:'直接访问'},
    62.                 {value:400, name:'搜索引擎'}
    63.             ],
    64.             // 设置饼图的颜色
    65.             itemStyle:{
    66.                 color:function(colors){
    67.                     let colorList = ['lightblue','lightgreen','yellow','lightpink','yellowgreen'];
    68.                     return colorList[colors.dataIndex];
    69.                 }
    70.             }
    71.           }],
    72.        
    73.     };
    74.     // 5.使用刚刚指定的配置项和数据显示图表
    75.     mycharts.setOption(option);
    76.     </script>

    预览效果如下

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

  • 相关阅读:
    以go rabbitmq为例子--用最少的时间最好的掌握消息队列
    三菱PLC slmp（mc）协议
    ChatGPT总结（持续更新）
    创建.NET程序Dump的几种姿势
    Vue中组件的三种注册方式
    Spring之aop
    基于大功率白光 LED 的可见光通信
    医学图像分割常见评价指标(单目标)——包含源码讲解和指标缺陷
    管易云与网易互客对接集成发货单查询2.0连通编辑订单(管易包裹物流=＞互客销售订单物流（修改）V1)
    Vue3+ts(day07：pinia)
  • 原文地址：https://blog.csdn.net/m0_71814235/article/details/126848536