echarts 去掉网格线、设置渐变色、标题图表位置、反转

最新推荐文章于 2024-05-15 14:35:51 发布

曾经沧海海

最新推荐文章于 2024-05-15 14:35:51 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue echarts 顺序反转渐变色去掉网格线图表位置

本文链接：https://blog.youkuaiyun.com/m0_37684037/article/details/103711271

版权

vue 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在Echarts中实现去除网格线，调整图表标题位置，设置柱状图的渐变色以及进行坐标轴反转。通过splitLine属性可以去掉网格线，x和y轴的反转则通过xAxis和yAxis配置实现，而渐变色可以通过LinearGradient函数来设置。此外，还涉及到了图表grid的布局和坐标轴内容的定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

去掉网格线：splitLine

          yAxis: [
            {
              // y轴不显示
              axisLine: {
                show: false
              },
              // 刻度不显示
              axisTick: {
                show: false
              },
              // 网格线不显示
              splitLine: {
                show: false
              },
              // 以上三个都不显示
              show: false,
              type: 'value'
            }
          ],

title位置：x

          // title: [
          //   {
          //     text: 'vvv',
          // 设置title的位置
          //     // x: '20%',
          //     textAlign: 'center'
          //   }
          // ],

图表的位置：grid

          grid: [{
            top: '10',
            width: '80%',
            bottom: '16%',
            // left: 10,
            containLabel: true
          }],

顺序反转：inserve

          xAxis: [
            {
              type: 'category',
              data: this.pvUvInfo.xKeyList,
              inverse: true
            }
          ],

x坐标、y坐标反转

xAxis yAxis中的内容替换就行

柱形图四角圆润、添加渐变色、展示柱子的值

如果x坐标、y坐标反转后，设置渐变色 color: new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [{

series: [
            {
              type: 'bar',
              smooth: true,
              barWidth: '20%',
              data: this.pvUvInfo.valueList,
              itemStyle: {
                normal: {
                  // 柱状角成椭圆形
                  barBorderRadius: 2,
                  //设置y轴方向的渐变色，
                  color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'blue'
                  }, {
                    offset: 1,
                    color: '#0099FF'
                  }]),
                  // 设置柱子顶部展示值
                  label: {
                    show: true,
                    position: 'top'
                  }
                }
              }
            }
          ]

坐标倾斜：

         xAxis: [
            {
              type: 'category',
              // gridIndex: 1,
              data: this.beidouTop10.xKeyList,
              // inverse: true,
              axisLabel: {
                interval: 0,
                rotate: 40
              }
            }
          ],