柱状图-显示异常数据

最新推荐文章于 2024-05-12 22:40:26 发布

勇气大爆炸

最新推荐文章于 2024-05-12 22:40:26 发布

阅读量80

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_38260470/article/details/137017129

版权

Option: {
          grid: {
            left: 0,
            right: 0,
            top: 60,
            bottom: 16,
            // 是否显示刻度标签 如果是true 就显示 否则反之
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            },
            backgroundColor: 'rgba(255, 255, 255, 0.94)',
            borderWidth: 1,
            borderColor: '#F4F4F4',
            borderRadius: 6,
            boxShadow: '0px 2px 4px rgba(207, 149, 104, 1)',
            padding: 10,
            textStyle: {
              color: '#333',
            },
            formatter: (params) => {
              let level = this.echartData[params[0].dataIndex].level
              let total = this.echartData[params[0].dataIndex].total
              let str = `<div class='flex-sb-column' style='align-items: stretch;line-height: 20px;'>
                        <p class='flex-sb'><span style='font-weight: bold;'>${params[0].name}</span><span>第${level}名</span></p>
                        <p style='display: flex;'><span style='color: #999;'>得分：</span>${total}</p></div>`
              return str
            },
          },
          xAxis: {
            type: 'category',
            data: [],
            boundaryGap: true,
            axisTick: {
              show: false, //不显示坐标轴刻度
            },
            axisLine: {
              show: false, //不显示坐标轴轴线
            },
            // 坐标轴文字样式
            axisLabel: {
              interval: 0,
              fontSize: 14,
              fontFamily: 'Microsoft YaHei',
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: false, //不显示刻度标签
            },
            axisTick: {
              show: false, //不显示坐标轴刻度
            },
            axisLine: {
              show: false, //不显示坐标轴轴线
            },
            splitLine: {
              lineStyle: {
                // 分隔线颜色，可以设置成单个颜色。
                // 也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色。
                color: '#F4F4F4',
              },
            },
          },
          color: [this.$eachrtColor.orange],
          series: [
            {
              type: 'bar',
              data: [],
              barWidth: 16,
              itemStyle: {
                color: '#F9A664',
              },
              label: {
                show: true,
                position: 'top',
                color: '#666666',
                formatter: (params) => {
                  return this.echartData[params.dataIndex].total
                },
              },
            },
          ],
        },