Login
芋圆社区 > 编程 > Echarts > Echarts常用修改总结

Echarts常用修改总结

187
0
2022-09-05
2022-10-13
Hey、小怪兽


目录


  • • 注:点击标题可锚点链接跳转
  • • 柱体半圆角(添加:2022-09-05)
  • • 横向柱状图(添加:2022-09-05)
  • • 坐标轴基础配置(添加:2022-09-05)

柱体半圆角


  • • 通过series-itemStyle-borderRadius控制柱体的圆角半径
  • option = {
      xAxis: [
        { type: 'category', position: 'bottom', data: ['测试1', ''] },
        { type: 'category', position: 'bottom', data: ['', '测试2'] }
      ],
      yAxis: { type: 'value' },
      series: [
        { type: 'bar', xAxisIndex: 0, barWidth: 30, data: [90], color: '#3279F1' },
        {
          type: 'bar',
          xAxisIndex: 1,
          barWidth: 30,
          data: ['', 90],
          color: '#3279F1',
          itemStyle: {
            // borderRadius: 5 统一设置四个角的圆角大小
            // borderRadius: [5, 5, 0, 0](顺时针左上,右上,右下,左下)
            // 让柱状图柱体头部变成半圆,一般根据你的barWidth的值设置
            borderRadius: [30, 30, 0, 0]
          }
        }
      ]
    };

横向柱状图


  • • 这是最基础的普通柱状图,注意看xAxis和yAxis的type:
  • • 只需要交换这两个type就可以做到横向柱状图了:
  • option = {
      xAxis: {
        type: 'value',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'category'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };

坐标轴基础配置


  • • 整理了一下,横纵坐标都有四个基础配置:
  • - axisLine:横纵坐标轴的主线
  • - axisTick:横纵坐标轴的刻度线
  • - axisLabel:横纵坐标轴的标签
  • - splitLine:横纵坐标轴的图表区域的分割线
  • • 上图是我全部设置成true的图表,可以将下列代码复制到Echarts官网代码调试里把true改成false试试:
  • option = {
      xAxis: {
        type: 'value',
        data: ['测试1', '测试2', '测试3', '测试4'],
        axisLine: { show: true },
        axisTick: { show: true },
        axisLabel: { show: true },
        splitLine: { show: true }
      },
      yAxis: {
        type: 'category',
        axisLine: { show: true },
        axisTick: { show: true },
        axisLabel: { show: true },
        splitLine: { show: true }
      },
      series: [
        {
          type: 'bar',
          barWidth: 40,
          data: [120, 80, 60, 130]
        }
      ]
    };
    

下一篇:Echarts渐变内置生成器

Comment

Message Board

编程导航

Echarts常用修改总结

Echarts渐变内置生成器

多列柱状图重叠

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点