Echarts关于饼图，柱状图，折线图的应用

Echarts关于饼图的运用

1. 环形进度图
   
   

如图就是一个环形的进度条这里的颜色我用了一个渐变的色调。

    this.circleOption = {
   
      title: {
   
        text: "", // 这里的text值指的是我们的环形图主标题就是我们这里的‘交付率’
        left: "center",
        top: "32%",
        textStyle: {
   
          color: "#304D5D",
          fontSize: 1.4 * this.basicDataService.deviceRatio.ratio
        }, 
        subtext: "", // 这里的subtext指的是我们的副标题，这里就是我们的‘100%’的数值
        subtextStyle: {
   
          color: "#6adeb8",
          fontSize: 2.6 * this.basicDataService.deviceRatio.ratio // 这里的字体我用了一个基础的比例值来进行赋值
        }
      },
      series: {
   
        name: '',
        type: 'pie',
        radius: ['90%', '95%'], // 这里的半径是来规定我们环形图的大小的，半径越大环形图越大。而这两个值分别决定我们内圆半径和外圆半径的
        avoidLabelOverlap: false, // 这个值是用来进行我们环形图tooltip显示可能会覆盖一些数值显示，因为这里没有设置tooltip所以不需要管
        label: {
   
          normal: {
   
            show: false
          },
          emphasis: {
   
            show: false
          }
        },
        labelLine: {
   
          normal: {
   
            show: false
          }
        },
        data: []
      }
    }
    // 这里的函数我是用来给eCharts配置进行动态赋值
    // 这里的赋值我主要是用来赋值数据和名称
    renderCharts(data: number, name: string) {
   
    this.circleOption.title.text = name
    this.circleOption.title.subtext = data + '%'
    this.circleOption.title.subtextStyle.color = '#6adeb8'
    let process = data > 100 ? 100: (data < 0 ? 0 : data) // 注意我们的环形图正常来说比列达到100%就是已经满值了，所以超过100的我们就按100来进行显示，同理低于0的我们就按0来进行显示（注意，这里的data一定是要数据类型）
    this.circleOption.series.data = [
      {
   
        value: process, // 这里的value指的就是我们的数值
        name: '',
        itemStyle: {
   
          color: {
   
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
   
              offset: 0, color: '#66d4d6' // 0% 处的颜色
            }, {
   
              offset: 0.4, color: '#66d4d6' // 50% 处的颜色
            }, {
   
              offset: 1, color: '#4fa3ee' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }, // 这里我是采用了一个渐变的颜色在不同位置来规定它的颜色
          shadowBlur: 3, // 这里是设置阴影
          shadowColor: '#4fa3ee',
        }
      },
      {
   
        value: 100 - process,  // 这里的值就是我们未到达100的数据
        itemStyle: {
   
          color: '#fff',
          shadowBlur: 8,
          shadowColor: '#66d4d6',
        }// 我们可以给未达到100的环形图距离设置颜色这里我就设置为白色了
       }
    ]
    this.eCharts.init(this.cycle_charts_one.nativeElement).setOption(this.circleOption) // 这里是采用Angular进行的一种eCharts的渲染
    } 

2.环形组成比例图


如图就是一个我们环形组件的比例图，可以很好显示各个数据的占比

   this.circleOption = {
   
      color: [], // 这里的颜色我是用动态赋值的，我们也可以已开始定义好
      tooltip: {
   
        trigger: 'item', // 饼图的提示一般是设置为item，柱状图，折线图设置为axis
        formatter: `{b}({d}${
     this.unit})`, // b是我们的数值name，d是我们的比列值，unit是我传入的单位
        confine: true
      },
      title: {
   
        text: "", // 我们的主标题
        left: "center",
        top: "32%",
        textStyle: {
   
          color: "#304D5D",
          fontSize: 1.4 *  this.basicDataService.deviceRatio.ratio
        },
        subtext: '', // 副标题
        subtextStyle: {
   
          color: "#101010",
          fontSize: 2.1 *  this.basicDataService.deviceRatio.ratio,
          fontWeight: "bolder",
          rich: {
   
            a: {
   
               fontSize: 1.6 * this.basicDataService.deviceRatio.ratio
            }
          } // 这里我们可以自定义一些其他内容的单独的样式,这里我就是对于单位进行单独的样式设置
        },
        itemGap: 5,
      },
      series: [{
   
        name: '',
        type: 'pie',
        silent: false,
        radius: ['80%', '90%'],
        avoidLabelOverlap: false,
        labelLine: {
   
          normal: {
   
            show: false
          }
        },
        label: {
   
          normal: {
   
            show: false
          },
          emphasis: {
   
            show: false
          }
        },
        data: []
      }]
    }
    // 这里是动态添加数据并渲染
      renderCharts() {
   
    if(this.subtextUnit) {
   
      this.circleOption.title.subtext = this.currentSubtext + `{a|${
     this.subtextUnit}}` // 注意这里我们因为一开始是以定义a来设置样式的,所以这里的内容也需要加上‘a|’来进行单独内容的样式设置
    }else {
   
      this.circleOption.title.subtext = this.currentSubtext
    }
    this.circleOption.title.text = this.currentText