echarts使用理解与问题

最新推荐文章于 2023-10-15 13:19:15 发布

漫天绯羽

最新推荐文章于 2023-10-15 13:19:15 发布

阅读量822

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_36762151/article/details/128161896

版权

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]
          },
        ]
      };