echarts使用理解与问题_echarts minangle

1.饼图 pie

1.minAngle属性

  设置最小角度，即当数值角度不够时，强制设为该最小角度。保证数据良好显示。

2.柱状图 bar

1.当以y轴作为类目轴时，左侧类目显示名称不全问题

为坐标轴添加 containLabel  属性，防止坐标轴溢出 

  grid: {
          left: "5%",
          bottom: 0,
          containLabel: true   //防止坐标轴溢出，即坐标轴刻度包含在grid中
        },

 2.设置带图片的刻度名称

就是自定义y轴的刻度名称 使用formatter属性；本来三个蓝色五边形图标是一样的，rich中就配置了一个图片，结果第一个图片显示全了，后两个走形了。所以同一张图片在rich中配置了三个，才正常了，搞不懂什么问题。

option = {
        legend: {
          show: true,
          left: '1%',
          top: 0.2*htmlFontSize,
          orient: 'horizontal',
          padding: [0.24 * htmlFontSize, 5],
          itemGap: 0.2 * htmlFontSize,
          textStyle: {
            color: '#49b6db',
            fontSize: 0.14 * htmlFontSize
          }
        },
        grid: {
          left: "5%",
          bottom: 0,
          containLabel: true   //防止坐标轴溢出，即坐标轴刻度包含在grid中
        },
        xAxis: {
          type: 'value',
          splitLine: {   //网格线
            show: false,
          },
          axisLabel: {
            show: false,   //坐标轴刻度线
          }
 
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            show: true,
            color: '#49b6db',
            fontSize: 0.14 * htmlFontSize,
            formatter: function (value) {
              let text = "";
              if (value == "保养数量") {
                icon = "label1"
              } else if (value == "临近保养") {
                icon = "label2"
              }
              if (value == "保养超期") {
                icon = "label3"
              }
              return '{value|' + value + '}{' + icon + '| }';
            },
            rich: {
              value: {
                align: 'center',
                padding: [0, 0.12 * htmlFontSize, 0, 0]
              },
              /* 虽然图片相同，但必须是三份，不认图片变形 */
              label1: {
                height: 0.2 * htmlFontSize,
                align: 'center',
                verticalAlign: 'middle',
                backgroundColor: {
                  image: './images/videoicon2.png'   //文字后面的蓝色五边形
                }
              },
              label2: {
                height: 0.2 * htmlFontSize,
                align: 'center',
                verticalAlign: 'middle',
                backgroundColor: {
                  image: './images/videoicon3.png'    //文字后面的蓝色五边形
                }
              },
              label3: {
                height: 0.2 * htmlFontSize,
                align: 'center',
                verticalAlign: 'middle',
                backgroundColor: {
                  image: './images/videoicon4.png'    //文字后面的蓝色五边形
                }
              },
 
            }
          },
          axisLine: {   //坐标轴轴线
            show: false,
          },
          axisTick: {   // 刻度线
            show: false
          },
          inverse: true,   //反转坐标轴
          data: ['保养数量', '临近保养', '保养超期']
        },
        series: [
          {
            name: '当天统计',
            type: 'bar',
            label: {
              show: true,
              color: "#49b6db",
              fontSize: 0.12 * htmlFontSize,
              position: 'right'
            },
            barWidth: 0.1 * htmlFontSize,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0, color: '#8F071E' // 0% 处的颜色
                }, {
                  offset: 1, color: '#EA4E60' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
 
            },
            data: [20, 30, 40],
 
          },
          {
            name: '本月统计',
            type: 'bar',
            label: {
              show: true,
              color: "#49b6db",
              fontSize: 0.12 * htmlFontSize,
              position: 'right'
 
            },
            barWidth: 0.1 * htmlFontSize,
 
            itemStyle: {   //柱子颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0, color: '#0167E8' // 0% 处的颜色
                }, {
                  offset: 1, color: '#13ACE8' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
 
            },
            data: [186, 100, 80]
          },
        ]
      };