单挑折现示例

最新推荐文章于 2024-05-15 22:50:31 发布

勇气大爆炸

最新推荐文章于 2024-05-15 22:50:31 发布

阅读量398

点赞数 5

文章标签：前端 echarts javascript

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

版权

echartOption: {
          grid: {
            left: 0,
            right: 0,
            top: 60,
            bottom: 16,
            // 是否显示刻度标签 如果是true 就显示 否则反之
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'none', // 默认为直线，可选为：'line' | 'shadow'
            },
            confine: true,
            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) => {
              if (params[0].value == 0) return
              let level = this.echartData[params[0].dataIndex].level
              let total = this.echartData[params[0].dataIndex].total
              let str = `<p>徐州市</p><p>${params[0].name}</p>
                        <p><span>${params[0].marker}排名：</span>第${level}名</p>
                        <p><span>${params[0].marker}得分：</span>${total}</p>`
              return str
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: [],
            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',
              },
            },
          },
          series: [
            {
              data: [],
              type: 'line',
              symbol: 'circle',
              symbolSize: 8,
              itemStyle: {
                color: this.$eachrtColor.green,
                borderColor: '#fff',
                borderWidth: 2,
              },
              lineStyle: {
                width: 2,
                color: this.$eachrtColor.green,
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 10,
                formatter: (params) => {
                  console.log(params)
                  console.log(this.rankLength)
                  if (params.value == 0) return '暂无数据'
                  let level = 1 - params.value + this.rankLength
                  return '第' + level + '名'
                },
              },
            },
          ],
        },