extjs开发———用extJS简单写一个饼状图

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

flowchart 箭头图标勿删

先上效果图：

js编写部分简单如下，先插入一个模块，然后给模块中添加内容。

var myChart1 = echarts.init(document.getElementById('myChart1'));

option = {

  title: {

    text: '会员通过率',

    x: 'center',

  },

  tooltip: {

    trigger: 'item',

    formatter: "{a} <br/>{b} : {c} ({d}%)"

  },

  series: [

    {

      name: '',

      type: 'pie',

      radius: '55%',

      center: ['50%', '60%'], //饼状图的分块比例

      data: [

        {

          value: 525, //饼状图的右边所占比例

          name: '已通过',

          itemStyle: {

            emphasis: {

              shadowBlur: 10,

              shadowOffsetX: 0,

              shadowColor: 'rgba(230,235,235,0.5)'

            },

            normal: { color: '#32d925' }

          }

        },

        {

          value: 475, //左边所占比例数

          name: '已通过',

          itemStyle: {

            emphasis: {

              shadowBlur: 10,

              shadowOffsetX: 0,

              shadowColor: 'rgba(230,235,235,0.5)'

            },

            normal: { color: '#c5ac22' }

          }

        },

      ],

    }

  ]

};

myChart1.setOption(option);