前言

前一篇介绍了横向柱图图。本篇将介绍基础饼图使用，并将其封装一层Qt。
本篇的demo使用隐藏js代码的方式，实现了一个饼图的基本交互方式，并预留了Qt模块对外的基础接口。

Demo演示

请添加图片描述

ECharts代码效果调试

使用ECharts的在线调试器，先调试出大致预期的效果。

option = {
  legend: {
    top: '90%',
    show: false
  },
  series: [
    {
      selectedMode: 'single',    // 选择模式
      selectedOffset: 10,       // 选取后偏移，需要先设置选择模式才生效
      type: 'pie',               // 图例类型
      radius: ['60%', '90%'],     // 同心圆双边界区域
      itemStyle: {	             // 数据项样式
        borderRadius: 0,       // 边界圆角
        borderColor: '#FF0000',  // 边界颜色
        borderWidth: 0        // 边界宽度
      },
      label: {
        show: true,
        fontSize: '32',
        fontWeight: 'bold',
        formatter: '{b}\n\n{d}%',
        position: 'center'
      },
      emphasis: {
        // 高亮状态的扇区和标签样式
        label: {
          show: false,
          fontSize: '32',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: [
        {
          value: 5.6,
          name: '开机率',
          itemStyle: {
            color: 'rgb(41, 235, 255)',
            shadowBlur: 10,      // 外阴影
            shadowOffsetX: 0,    // 外阴影x轴偏移
            shadowOffsetY: 0,    // 外阴影y轴偏移
            shadowColor: 'rgb(41, 235, 255)' // 外阴影颜色
          }
        },
        {
          value: 5.2,
          name: '',
          itemStyle: {
            color: 'rgba(45,62,113)',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(45,62,113)'
          }
        }
      ]
    }
  ]};