echart图--饼图基本属性

猪猪大魔王db

已于 2022-07-05 17:05:40 修改

阅读量518

点赞数 1

分类专栏： echarts 文章标签： echarts javascript 前端

于 2022-07-05 16:52:48 首次发布

本文链接：https://blog.csdn.net/qq_42654348/article/details/125623363

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

echart图–饼图基本属性
引入的在线的echart.js
可以直接运行看一看，后面都有写注释

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>饼图（数值占比情况）</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  </head>
  <body>
    <div class="lineEchart" style="width: 600px; height: 600px;"></div>
    <script>
      var myechart = echarts.init(document.querySelector("div"));
      var pieDataArr = [
        { name: "淘宝", value: 1234 },
        { name: "唯品会", value: 4321 },
        { name: "京东", value: 2341 },
        { name: "聚优", value: 3214 }
      ];
      var option = {
        series: [
          {
            type: "pie",
            data: pieDataArr,
            label: {
              //饼图文字显示
              show: true, //显示文字
              // formatter:'hehe'//决定文字显示内容不一样
              formatter: function (arg) {
                // console.log(arg);
                return (
                  arg.name + "平台" + arg.value + "元\n" + arg.percent + "%"
                );
              }
            },
            // radius: "20%" //饼图半径,百分比是按照宽度和高度中较小的那一部分的一半来进行百分比设置
            radius: ["50%", "75%"], //第0个元素代表内圆半径，第一个元素代表外圆半径
            // roseType: "radius", //南丁格尔图  饼图的每个区域的半径是不同的
            // selectedMode: "single"//选中效果，能够偏离圆点一小段距离，会回到原点
            selectedMode: "multiple", //一次可以选中多个
            selectedOffset: 30 //偏离的距离更远
          }
        ]
      };
      myechart.setOption(option);
    </script>
  </body>
</html>