关于ECharts的使用总结——饼图、雷达图、仪表盘

一、饼图

为饼图准备的数据是一个对象数组，每个对象有name和value两个属性。

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

之后在option中只需要配置series即可：

      series: [
        {
          type: 'pie',
          data: pieData,
          label: { // 饼图文字描述的显示
            show: true, // 显示文字
            //formatter: 'hehe' // 决定文字显示的内容
            formatter: function(arg){
              // console.log(arg)　　arg对象中包含的内容很丰富
              return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
          },
          // radius: 20 // 饼图的半径
          // radius: '20%' // 百分比参照的是div容器的宽度和高度中较小值的一半
          // radius: ['50%', '75%'] // 环形图：第0个元素代表的是內圆的半径 第1个元素外圆的半径
          roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的
          // selectedMode: 'single' // 选中的效果,能够将选中的区域偏离圆点一小段距离
          selectedMode: 'multiple',
          selectedOffset: 30
        }
      ]

二、雷达图

雷达图（radar）需要配置两个选项，一个是通用的series，另一个是它特有的radar：

      radar: { 
        indicator: dataMax, // 配置各个维度的最大值
        shape: 'polygon' // 配置雷达图最外层的图形 circle polygon
      },

dataMax是一个对象数组，每个对象代表雷达图上的一个维度，包含name和max两个属性：

    var dataMax = [
      {
        name: '易用性',
        max: 100
      },
      {
        name: '功能',
        max: 100
      },
      {
        name: '拍照',
        max: 100
      },
      {
        name: '跑分',
        max: 100
      },
      {
        name: '续航',
        max: 100
      }
    ]

series中一个对象就是一张雷达图，，一个雷达图中可以显示多组数据（对应data中的多个对象）。data.value中的五个元素，对应dataMax中的五项维度。

      series: [
        {
          type: 'radar', // radar 此图表是一个雷达图
          label: { // 设置标签的样式
            show: true // 显示数值
          },
          areaStyle: {}, // 将图上每组数据构成的封闭区域填充阴影
          data: [
            {
              name: '华为手机1',
              value: [80, 90, 80, 82, 90]
            },
            {
              name: '中兴手机1',
              value: [70, 82, 75, 70, 78]
            }
          ]
        }
      ]

 

三、仪表盘

仪表盘（gauge）的配置十分简单，只需要指定仪表显示区间（min和max）和指针相关属性（data）即可，这些全都包含在series选项中：

      series: [
        {
          type: 'gauge',
          data: [
            {
              value: 97,
              itemStyle: { // 指针的样式
                color: 'pink' // 指针的颜色
              }
            }, // 每一个对象就代表一个指针
            {
              value: 85,
              itemStyle: {
                color: 'green'
              }
            }
          ],
          min: 50 // min max 控制仪表盘数值范围
        }
      ]

效果如图所示：