ECharts饼图的实现步骤

  • 步骤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(x轴) 和 yAxis(y轴)

 

posted @ 2020-12-02 20:32  Amerys  阅读(347)  评论(0)    收藏  举报