G2 - 帕累托图

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>帕累托图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script>
var data = [
  {factor: '划痕', times: 56},
  {factor: '气泡', times: 19},
  {factor: '缺口', times: 11},
  {factor: '污痕', times: 7},
  {factor: '杂质', times: 3}
];
var Stat = G2.Stat;
var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 450,
  plotCfg: {
    margin: [20, 90, 90, 80]
  }
});

chart.source(data, {
  'times': {
    alias: '次数'
  },
  '..percent': {
    alias: '累计百分比',
    formatter: function (value) {
      value = value || 0;
      value = value * 100;
      var digits = 0; // 默认展示小数点后面两位数
      if (value > 0 && value < 0.01) {
        digits = (1 / value + '').indexOf('.') + 1;
      }

      return value.toFixed(digits) + '%';
    }
  }
});
chart.legend('factor', {
  position: 'bottom'
});
chart.axis('times', {
  title: null
});
chart.axis('..percent', {
  title: null
});
chart.axis('factor', {
  tickLine: null, // 不展示刻度线
});
chart.interval().position('factor*times').color('factor').tooltip('times');
chart.line().position(Stat.summary.cumulative(Stat.summary.percent('factor*times')))
  .size(2)
  .tooltip('..percent');
chart.render();
</script>


      </body>
    </html>
          

帕累托图

Pareto chart, 根据“关键的少数和次要的多数”原理，用双直角坐标系表示，左边纵坐标表示频数，右边纵坐标表示频率。分析线表示累积频率，横坐标表示影响质量的各项因素，按影响程度的大小(即出现频数多少)从左到右排列，通过对排列图的观察分析可以抓住影响质量的主要因素。

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>帕累托图</title>
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js"></script>
        <script src="https://unpkg.com/g2-react@1.2.0/dist/index.js"></script>
        <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/babel">
    const Chart = createG2(chart => {
      const Stat = G2.Stat;
      chart.col('times', {
          alias: '次数'
        });
      chart.col('..percent', {
        alias: '累计百分比',
        formatter: function (value) {
          value = value || 0;
          value = value * 100;
          let digits = 0; // 默认展示小数点后面两位数
          if (value > 0 && value < 0.01) {
            digits = (1 / value + '').indexOf('.') + 1;
          }

return value.toFixed(digits) + '%';
        }
      });
      chart.legend('factor', {
        position: 'bottom'
      });
      chart.axis('times', {
        title: null
      });
      chart.axis('..percent', {
        title: null
      });
      chart.axis('factor', {
        tickLine: null, // 不展示刻度线
      });
      chart.interval().position('factor*times').color('factor').tooltip('times');
      chart.line().position(Stat.summary.cumulative(Stat.summary.percent('factor*times')))
        .size(2)
        .tooltip('..percent');
      chart.render();
    });

const MyComponent = React.createClass({
      getInitialState() {
        return {
          data: [
            {factor: '划痕', times: 56},
            {factor: '气泡', times: 19},
            {factor: '缺口', times: 11},
            {factor: '污痕', times: 7},
            {factor: '杂质', times: 3}
          ],
          forceFit: true,
          height: 450,
          plotCfg: {
            margin: [20, 90, 90, 80]
          },
        };
      },
      render() {
        return (
          <div>
            <Chart
              data={this.state.data}
              width={this.state.width}
              height={this.state.height}
              plotCfg={this.state.plotCfg}
              forceFit={this.state.forceFit} />
          </div>
        );
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script>

</body>
    </html>