找文章 / 找答案
精选问答 更多内容

关于ECHARTS, 如图所示,如何调整,才能让“两柱一线”的...

changda56玄铁三 显示全部楼层 发表于 2022-8-17 09:11:22 |阅读模式 打印 上一主题 下一主题
关于ECHARTS, 如图所示,如何调整,才能让“两柱一线”的刻度,保质一致;至少能实现,两柱的刻度是一致的。


const colors = ['#5470C6', '#91CC75', '#EE6666';
option = {
  color: colors,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    right: '20%'
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['成本', '收入', '利润'
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      // prettier-ignore
      data: options.column1,
    }
  ,
  yAxis: [
    {
      type: 'value',
      name: '成本',
      position: 'right',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0
        }
      },
      axisLabel: {
        formatter: '{value} 元'
      }
    },
    {
      type: 'value',
      name: '收入',
      position: 'right',
      alignTicks: true,
      offset: 80,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[1
        }
      },
      axisLabel: {
        formatter: '{value} 元'
      }
    },
    {
      type: 'value',
      name: '利润',
      position: 'left',
      alignTicks: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[2
        }
      },
      axisLabel: {
        formatter: '{value} 元'
      }
    }
  ,
  series: [
    {
      name: '成本总计',
      type: 'bar',
      data:options.column3,
    },
    {
      name: '收入总计',
      type: 'bar',
      yAxisIndex: 1,
      data:options.column2,
    },
    {
      name: '利润曲线',
      type: 'line',
      yAxisIndex: 2,
      data:options.column4,
    }
  
};



最佳答案

社区管理员
yhdata_yzm 关注Ta

2022-08-17 09:11:23

代码私信发我下,直接复制你这个有问题
查看完整内容
回复

使用道具 举报

精彩评论9

yhdata_yzm 显示全部楼层 发表于 2022-8-17 09:11:23
changda56 发表于 2022-8-17 13:56
这是“自定义绘图”组件,引入的是echarts的JS代码,没有关于“轴”的设置。得用改JS代码。 ...

代码私信发我下,直接复制你这个有问题
回复

使用道具 举报

yhdata_bear 显示全部楼层 发表于 2022-8-17 10:07:37
收到,正在分析中,预计需要一段时间,请您耐心等待。
回复

使用道具 举报

lwaaa白银三 显示全部楼层 发表于 2022-8-17 10:24:42
轴-行轴-坐标轴,隐藏
回复

使用道具 举报

changda56玄铁三 显示全部楼层 发表于 2022-8-17 10:33:21
lwaaa 发表于 2022-8-17 10:24
轴-行轴-坐标轴,隐藏

请用代码示下,谢谢。
回复

使用道具 举报

lwaaa白银三 显示全部楼层 发表于 2022-8-17 11:20:21
changda56 发表于 2022-8-17 10:33
请用代码示下,谢谢。

在设置里面
回复

使用道具 举报

changda56玄铁三 显示全部楼层 发表于 2022-8-17 13:56:35

这是“自定义绘图”组件,引入的是echarts的JS代码,没有关于“轴”的设置。得用改JS代码。
回复

使用道具 举报

changda56玄铁三 显示全部楼层 发表于 2022-8-17 16:32:39
yhdata_yzm 发表于 2022-8-17 14:48
代码私信发我下,直接复制你这个有问题

我已经找到解决方案了。谢谢了。
回复

使用道具 举报

yhdata_yzm 显示全部楼层 发表于 2022-8-17 16:37:07
changda56 发表于 2022-8-17 16:32
我已经找到解决方案了。谢谢了。

怎么解决的呢
回复

使用道具 举报

changda56玄铁三 显示全部楼层 发表于 2022-8-17 17:15:47
axisLine, axisLabel,formatter 把这些相关的配置项,给它拿掉,就可以了。(见附件截图)
微信截图_20220817171523.png
回复

使用道具 举报

高级模式
您需要登录后才可以回帖 登录 | 免费注册

  • 官方微信

    欢迎关注永洪服务号!收费为0,价值无限

    扫码关注
  • 新浪微博

    让每位用户轻松挖掘数据价值!

    访问新浪微博
  • 智能客服
50W

会员等你来哦

Copyright   ©2012-2024  北京永洪商智科技有限公司  (京ICP备12050607) 京公网安备110110802011451号 |《永洪社区协议》
返回顶部