echart饼状图常用配置

echart饼状图

经过前面的铺垫，废话不多说直接上代码

let tearcherStudentPie = Echart.init(document.getElementsByClassName('teacher-student-pie')[0]);
tearcherStudentPie.setOption({
  title: {
    text: '师生比例图',
    ...setEchartTitle, //在常用标题博文中出现的配置
  },
  //当鼠标移上去时，显示数据提示
  tooltip: {
    show: true,
  },
  // 绘图的配置
  series: {
    width: '350px', //控制绘图的宽度
    height: '184px', //控制绘图高度
    center: ['50%', '70%'], //绘图位置控制
    type: 'pie', //饼状图的类型pie  bar条形图  line折线图
    // selectedOffset: 0,  //选中之后的偏移量
    

    
    // 定义饼状图的引导线
    labelLine: {
      length: 20, //引导线第一段长度
      length2: 40, //引导线第二段长度
      lineStyle: {
        color: '#9fceff', //引导线颜色
      },
    },
    //饼状图数据样式配置
    data: [
      { name: '35%老师', 
      	value: 35, 
      	itemStyle: { color: '#1cd4e4' } //老师饼状图颜色},
      {
        name: '65%学生',
        value: 65,
        itemStyle: {
          color: {  //学生饼状图颜色用了一个渐变色
          
            type: 'radial',  //radial为镜像渐变， line为线性渐变
            x: 0.55,  //x，y控制渐变的圆心
            y: 0.5, 
            r: 0.5, //半径
            //颜色配置
            colorStops: [
              {
                offset: 0, //必须存在不能超过1，表示这一颜色的范围
                color: '#1d93f0', // 0% 处的颜色
              },
              {
                offset: 0.9,
                color: '#1d93f0',
              },
              {
                offset: 0.91,
                color: '#125095',
              },
              {
                offset: 0.99,
                color: '#125095',
              },
              {
                offset: 1,
                color: '#0b356f', // 100% 处的颜色
              },
            ],
          },
          // borderWidth: 10,
          // borderColor: '#125096',
        },
      },
    ],
    //饼状图内的文字设置
    label: {
      normal: {
        // 设置圆饼图引导线周围的文字和位置
        formatter: '{b|{b}}{a|}\n\n',
        // 文字的位置,数组第一个为0,第二个可以调节引导线周围文字的位置
        padding: [0, -50],
        //formatter需要用到，可以查一查echarts的富文本，具体用法
        rich: {
          a: {
            color: '#9fceff',
            fontSize: 12,
            lineHeight: 10, //通过lineheight定义文字的高度
          },
          b: {
            fontSize: 12,
            lineHeight: 10,
            color: '#9fceff',
          },
        },
      },
    },
    // radius: [0, '75%'], //同样可以确定圆饼图的大小，用了width和height就没用了
  },
});
//将圆饼图的一部分设置为高亮模式，也就是鼠标悬浮的样式
tearcherStudentPie.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 }); //设置默认高亮

看结果图