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

先上效果图:
在这里插入图片描述
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);

备注:需要固定样式可以放在你自己的某个DIV之中,样式引用参照上一篇的柱状图的JS和CSS

posted @ 2018-11-08 09:54  沉默的小猴子  阅读(354)  评论(0编辑  收藏  举报