图表4 饼图

Qwe7

发布于 2022-06-16 11:40:35

89800

代码可运行

文章被收录于专栏：网络收集网络收集

运行总次数：0

代码可运行

4、图表4 饼图

1.饼图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
  <html lang="en">

  <head>
    <script src="js/echarts.min.js"></script>
  </head>

  <body>
    <div style="width: 600px;height:400px"></div>
    <script>
      var mCharts = echarts.init(document.querySelector("div")) var option = {}
      mCharts.setOption(option)
    </script>
  </body>

</html>

此时 option 是一个空空如也的对象

步骤2 准备数据

var pieData = [{
  value: 11231,
  name: "淘宝",
}, {
  value: 22673,
  name: "京东"
}, {
  value: 6123,
  name: "唯品会"
}, {
  value: 8989,
  name: "1号店"
}, {
  value: 6700,
  name: "聚美优品"
}]

步骤3 准备配置项在 series 下设置 type:pie

var option = {
  series: [{
    type: 'pie',
    data: pieData
  }]
}

注意:

饼图的数据是由 name 和 value 组成的字典所形成的数组

饼图无须配置 xAxis 和 yAxis

2.饼图的常见效果

显示数值

label.show : 显示文字

label.formatter : 格式化文字

var option = {
  series: [{
    type: 'pie',
    data: pieData,
    label: {
      show: true,
      formatter: function (arg) {
        return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
      }
    }
  }]
}

南丁格尔图

南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大

roseType:‘radius’
var option = {
  series: [{
    type: 'pie',
    data: pieData,
    label: {
      show: true,
      formatter: function (arg) {
        return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
      }
    },
    roseType: 'radius'
  }]
}