Apache ECharts 图表留白问题

129 篇文章 3 订阅
9 篇文章 0 订阅
1、仪表盘:在series 中修改radius 文档:https://echarts.apache.org/zh/option.html#series-gauge.radius
const caliOption = {
  series: [
    {
      type: "gauge",
      min: 0,
      max: 100, //设置刻度盘内数值区间
      splitNumber: 5, // 设置间隔区域的显示数量
      radius: "100%", // 设置半径大小
      axisLine: {
        lineStyle: {
          width: 10,
          color: [
            [0.25, "#6495f9"],
            [0.5, "#65dbac"],
            [0.75, "#667898"],
            [1, "#f6c02a"],
          ],
        },
      },
      // 指针
      // pointer: {
      //   itemStyle: {
      //     color: '#6495f9'
      //   }
      // },
      // 另一种指针
      anchor: {
        show: true,
        showAbove: true,
        size: 14,
        itemStyle: {
          borderWidth: 4,
          color: "#6495f9",
        },
      },
      // 小刻度
      axisTick: {
        // distance: ,
        length: 4,
        lineStyle: {
          color: "#979797",
          width: 2,
        },
      },
      // 整数刻度
      splitLine: {
        // distance: -30,
        length: 8,
        lineStyle: {
          color: "#979797",
          width: 4,
        },
      },
      // 显示的刻度文字
      axisLabel: {
        color: "#979797",
        distance: 20,
        fontSize: 14,
        splitNumber: 2,
      },
      // 得分配置
      detail: {
        valueAnimation: true,
        formatter: "{value}%",
        offsetCenter: [0, "70%"],
      },
      // 考核得分的样式修改
      title: {
        offsetCenter: [0, "30%"], // 改变标题的位置
        textStyle: {
          color: "979797",
          fontSize: 14,
          shadowColor: "#000", //默认透明
        },
      },
      data: [
        {
          value: 0,
          // name: "巡检覆盖率"
        },
      ],
    },
  ],
};
2、有x.y轴的柱状图、散点图、折线图等, 使用grid:{left: ,right: ,…} 文档:https://echarts.apache.org/zh/option.html#grid
// 覆盖率统计
const regionInspOption = {
  legend: {},
  tooltip: {},
  grid: {
    // 四周留白区域设置
    top: 50,
    right: 10,
    left: 70,
    bottom: 10,
    containLabel: true,
  },
  dataset: {
    source: [
      [
        "product",
        "水位",
        "水位",
        "水质",
        "水位",
        "站",
        "站",
      ],
      ["海珠区", 43.3, 85.8, 93.7, 45, 85, 77],
      ["越秀区", 83.1, 73.4, 55.1, 15, 45, 77],
      ["白云区", 86.4, 65.2, 82.5, 45, 35, 77],
      ["天河区", 72.4, 53.9, 39.1, 75, 45, 77],
      ["荔湾区", 43.3, 85.8, 93.7, 45, 45, 77],
      ["番禺区", 83.1, 73.4, 55.1, 45, 15, 77],
      ["增城区", 86.4, 65.2, 82.5, 45, 45, 77],
      ["南沙区", 72.4, 53.9, 39.1, 25, 45, 77],
      ["花都区", 83.1, 73.4, 55.1, 45, 45, 77],
      ["从化区", 86.4, 65.2, 82.5, 45, 5, 77],
      ["黄埔区", 72.4, 53.9, 39.1, 45, 45, 77],
    ],
  },
  xAxis: { type: "category" },
  yAxis: {
    type: "value",
    name: "%",
    axisLine: {
      show: true,
      lineStyle: {
        // 纵轴颜色
      },
    },
    axisLabel: {
      formatter: "{value}",
    },
  },
  series: [
    { type: "bar" },
    { type: "bar" },
    { type: "bar" },
    { type: "bar" },
    { type: "bar" },
    { type: "bar" },
  ],
};

这世界不停的在开花,我想放进你心里一朵!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值