利用echats饼图的各种样式

效果图：

  为 ECharts 准备一个具备大小（宽高）的 容器

<div class="problem-span-echats"></div>

 

.problem-span-echats {
    width: 100%;
    height: 100%;
  }

初始化echats实例： 

// ref="lieAExercise"定义该div也就是画布的名字，在$echarts.init(this.$refs.lieAExercise) 图表初始化的时候使用
                // this.$refs.lieAExercise 也可以替换为 document.getElementById('lieAId') 或者 document.getElementByClassName('lieA')
                this.lieA = echarts.init(this.$refs.lieAExercise);

 var dom = document.getElementsByClassName("problem-span-echats")[0];
        var myChart = echarts.init(dom);

echarts接口仅有一个方法init，执行init时传入一个具备大小（如果没有指定容器的大小将会按照0大小来处理即无法看到图表）的dom节点（width、height可被计算得到即可，不一定可见）后即可实例化出图表对象。

所以在最外层容器给了宽和高。

先贴整体代码在做详细介绍：

option = ({
          //圆环图各环节的颜色
          color: ['rgb(117,254,123)', 'rgb(253,230,90)', 'rgb(82,136,248)'],
          // 指定图表的配置项和数据
            series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '75%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                formatter: '{b} {d}%',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 18
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
           // 圆环图各环节的名称和值(系列中各数据项的名称和值)
            data: [{
                value: 25,
            
                name: '上学'
              },
              {
                value: 11,
            
                name: '工作'
              }, {
                value: 64,
       
                name: '学习'
              }
            ]
          }]
        })
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }

radius:

• number：直接指定外半径值。

• string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。

比如现在的值是radius: ['50%', '75%'],改成radius: ['20%', '75%'],

再改成radius: ['50%', '35%'],

radius也可以写成radius: [50, 75],

背景渐变色

然后实现一个背景渐变色：

效果图：

 将这段代码放到setOption里：

线性渐变

 x: 0,                 // 左上角x
    y: 0,                 // 左上角y
    x2: 0,                // 右下角x
    y2: 1,                // 右下角y

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置 

        
           backgroundColor: { // 背景颜色
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
							offset: 0,
							color: 'rgba(0,0,0,0.4)' // 0% 处的颜色
						}, {
							offset: 0.5,
							color: 'rgba(65,184,131,0.4)' // 50% 处的颜色
						}, {
							offset: 1,
							color: 'rgba(0,255,255,0.4)' // 100% 处的颜色
						}],
						globalCoord: false // 缺省为 false
					},