olddataset/web/Vchart/pie/chart_0017_pie.html

<div id="chart" style="width:100%;height:520px;"></div>
<script src="https://cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script>
<script>
  const textureMap = {
  NVDA: 'circle',
  JAWS: 'horizontal-line',
  VoiceOver: 'vertical-line',
  ZoomText: 'bias-rl',
  Other: 'grid'
};

const spec = {
  type: 'pie',
  data: {
    id: 'pieData',
    values: [
      {
        name: 'NVDA',
        y: 40.6
      },
      {
        name: 'JAWS',
        y: 40.1
      },
      {
        name: 'VoiceOver',
        y: 12.9
      },
      {
        name: 'ZoomText',
        y: 2
      },
      {
        name: 'Other',
        y: 4.4
      }
    ]
  },
  categoryField: 'name',
  valueField: 'y',
  padAngle: 2, // The angular padding applied to sides of the arc, in degree.
  pie: {
    style: {
      texture: datum => textureMap[datum.name]
    },
    state: {
      hover: {
        centerOffset: 10
      }
    }
  },
  label: {
    visible: true,
    style: {
      text: datum => {
        // return [datum.name, `${datum.y}%`]; // Text wrap
        return `${datum.name}: ${datum.y}%`;
      },
      fontSize: 12
    },
    line: {
      line1MinLength: 30
    }
  },
  legends: {
    visible: true
  }
};


  const vchart = new VChart.default(spec, { dom: "chart" });
  vchart.renderSync();

  // Just for the convenience of console debugging, DO NOT COPY!
  window['vchart'] = vchart;
  // 只要记得：dom 要写成 "chart"
</script>