echarts之饼图

饼图

最基本的实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>饼图</title>
  <!--  1。引入echart.js文件-->
  <script src="lib/echarts.min.js"></script>
</head>
<body>

<!--2。准备一个呈现图表的盒子-->
<div style="width: 600px;height: 400px"></div>

<script>
    //3。初始化echarts实力对象
    var mCharts = echarts.init(document.querySelector('div'));
    //就是需要设置给饼图的数据
    var pieData = [{value: 11231, name: "淘宝",}, {value: 22673, name: "京东"}, {value: 6123, name: "唯品会"},
        {value: 8989, name: "1号店"}, {value: 6700, name: "聚美优品"}]
    //4。准备配置项
    var option = {
        series: [
            {
                type: 'pie',
                data: pieData
            }
        ]
    }

    //5。将配置项设置给echarts实例对象
    mCharts.setOption(option);
</script>
</body>
</html>

饼图的最常见的效果

  • 显示数值
    label.show : 显示文字
    label.formatter : 格式化文字
<div style="width: 600px;height: 400px"></div>
var option = {
        series: [
            {
                type: 'pie',
                data: pieData,
                //饼图中的文字展示
                label: {
                    show: true, //展示文字
                    formatter: function (arg) {
                        console.log(arg)
                        return arg.name+'平台'+arg.value+'元'+arg.percent
                    } //决定文字显示的内容
                }
            }
        ]
    }

  • 圆环
    radius
    单个radius，百分比参照的是宽度和高度中较小的值的一半来进行百分比设置。
    radius:'20%'. 意思是：400px/2*20%=40px
    radius:['50%',"75%"] 数组的第一项是内半径，第二项是外半径, 通过 Array , 可以将饼图设置为圆环图
   var option = {
        series: [
            {
                type: 'pie',
                data: pieData,
                //饼图中的文字展示
                label: {
                    show: true, //展示文字
                    formatter: function (arg) {
                        console.log(arg)
                        return arg.name+'平台'+arg.value+'元'+arg.percent
                    } //决定文字显示的内容
                },
                // radius:'20%'
                radius:['50%',"75%"]

            }
        ]
    }

  • 南丁格尔图
    南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大
    var option = {
        series: [
            {
                type: 'pie',
                data: pieData,
                //饼图中的文字展示
                label: {
                    show: true, //展示文字
                    formatter: function (arg) {
                        console.log(arg)
                        return arg.name+'平台'+arg.value+'元'+arg.percent
                    } //决定文字显示的内容
                },
                // radius:'20%'
                radius:['50%',"75%"],
                roseType:'radius'

            }
        ]
    }

  • 选中效果
    selectedMode: 'multiple'
    选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可
    选 'single' ， 'multiple' ，分别表示单选还是多选
    selectedOffset: 30
    选中扇区的偏移距离
          series: [
          {
              type: 'pie',
              data: pieData,
              //饼图中的文字展示
              label: {
                  show: true, //展示文字
                  formatter: function (arg) {
                      console.log(arg)
                      return arg.name+'平台'+arg.value+'元'+arg.percent
                  } //决定文字显示的内容
              },
              // radius:'20%'
              // radius:['50%',"75%"],
              roseType:'radius',
              // selectedMode:'single'
              selectedMode:'multiple',
              // selectedOffset: 30

          }
      ]
  }
posted @ 2022-08-06 00:25  King-DA  阅读(646)  评论(0)    收藏  举报