imooc1

技术方向下课程数

by lai chendong

HTML

<script src="//apps.bdimg.com/libs/echarts/2.1.9/source/echarts-all.js"></script>

JavaScript

/**
 * 画饼图
 * @param title
 * @param data
 * @constructor
 */
function Pie(title, data) {
  this.title = title;
  this.data = data;

  this.render = function() {
    var div = document.createElement("div");
    div.setAttribute('style', 'height:500px;margin-bottom:20px');
    document.body.appendChild(div);
    var myChart = echarts.init(div, 'macarons');
    option = {
      title: {
        text: this.title,
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      toolbox: {
        show: false,
        feature: {
          mark: {
            show: true
          },
          dataView: {
            show: true,
            readOnly: false
          },
          magicType: {
            show: true,
            type: ['pie', 'funnel']
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          }
        }
      },
      calculable: false,
      series: [{
        name: this.title,
        type: 'pie',
        radius: [30, 200],
        roseType: 'area',
        data: this.data
      }]
    };
    myChart.setOption(option);
  }
}

new Pie('技术方向下课程数', [{
  'name': '前端开发',
  'value': 199
}, {
  'name': '后端开发',
  'value': 198
}, {
  'name': 'UI设计',
  'value': 15
}, {
  'name': '移动开发',
  'value': 180
}, {
  'name': '运维&测试',
  'value': 33
}, {
  'name': '数据库',
  'value': 35
}, {
  'name': '云计算&大数据',
  'value': 22
}, {
  'name': 'Photoshop',
  'value': 2
}]).render()