资讯专栏INFORMATION COLUMN

echarts双x轴和双y轴的配置

Steven / 3990人阅读

摘要:最近的项目中用到了的双轴和双轴的设置,特此记录一下鼠标悬停提示内容坐标轴指示器,坐标轴触发有效十字线显示标准保费增长轴轴显示两组数据第个轴两个轴左边轴金额元右边轴增长用于指定图标显示类型第一个柱状图的数据标准保费第一个柱状图的数据第二个柱状

最近的项目中用到了echarts的双x轴和双y轴的设置,特此记录一下;

</>复制代码

  1. option = {
  2. tooltip: { //鼠标悬停提示内容
  3. trigger: "axis",
  4. axisPointer: { // 坐标轴指示器,坐标轴触发有效
  5. type: "cross" // 十字线显示
  6. }
  7. },
  8. legend: {
  9. y: "20px",
  10. data: ["标准保费", "增长"],
  11. selectedMode: false,
  12. },
  13. xAxis: [
  14. //X轴
  15. {
  16. type: "category",
  17. data: [1, 2, 3, 4, 5, 6],
  18. axisLabel: {interval: 0},
  19. },
  20. //x轴显示两组数据 第2个X轴
  21. {
  22. type: "category",
  23. axisLine: {show: false},
  24. axisTick: {show: false},
  25. axisLabel: {show: false, interval: 0},
  26. splitArea: {show: false},
  27. splitLine: {show: false},
  28. data: [1, 2, 3, 4, 5, 6],
  29. }
  30. ],
  31. yAxis: [ //两个y轴 左边y轴
  32. {
  33. type: "value",
  34. name: "金额(元)",
  35. axisLabel: {
  36. show: true,
  37. interval: "auto",
  38. formatter: "{value} "
  39. },
  40. splitNumber: 10,
  41. splitLine: {
  42. show: true,
  43. lineStyle: {
  44. type: "dashed"
  45. }
  46. },
  47. // splitArea: {
  48. // show: false
  49. // },
  50. // max: 100,
  51. // interval: 10,
  52. },
  53. //右边y轴
  54. {
  55. type: "value",
  56. name: "增长",
  57. axisLabel: {
  58. show: true,
  59. interval: "auto",
  60. formatter: "{value} %"
  61. },
  62. splitNumber: 10,
  63. splitLine: {
  64. show: true,
  65. lineStyle: {
  66. type: "dashed"
  67. }
  68. },
  69. splitArea: {
  70. show: false
  71. },
  72. // max: 100,
  73. // interval: 10,
  74. }
  75. ],
  76. series: [ //用于指定图标显示类型
  77. //第一个柱状图的数据
  78. {
  79. name: "标准保费",
  80. type: "bar",
  81. yAxisIndex: "0",// 第一个柱状图的数据
  82. itemStyle: {normal: {color: "#2d91ff", label: {show: true}}},
  83. data: [100,200, 30, 90,210,110]
  84. },
  85. //第二个柱状图的数据
  86. {
  87. name: "承保",
  88. type: "bar",
  89. xAxisIndex: 1, //第二个柱状图的数据
  90. itemStyle: {
  91. normal: {
  92. color: "#d5e9ff",
  93. label: {
  94. show: true, formatter: function (p) {
  95. return p.value > 0 ? (p.value + "
  96. ") : "";
  97. }
  98. }
  99. }
  100. },
  101. data: [120, 300, 100, 170, 300,200]
  102. },
  103. /右边Y轴的数据
  104. {
  105. name: "增长",
  106. type: "line",
  107. symbol: "emptyCircle",
  108. showAllSymbol: true, //动画效果
  109. symbolSize: 3,
  110. smooth: true, //光滑的曲线
  111. yAxisIndex: "1",
  112. itemStyle: {
  113. normal: {
  114. color: "#ffb348",
  115. label: {
  116. show: true,
  117. formatter: "{c}%",
  118. textStyle: {
  119. color: "#000000"
  120. }
  121. }
  122. }
  123. },
  124. data: [3, 9, 2, 5, 7, 10]
  125. },
  126. ]
  127. };

效果图如下


重点在设置参数如下
xAxisIndex: 1,
yAxisIndex: "1",
数据我是随便写的,大家仅供参考,详细设置请查看官方文档
完结!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106003.html

相关文章

  • 手把手教你用echarts和SovitChart开发带渐变色的柱状图

    摘要:我们在开发应用的时候经常美工会设计一些样式比较特殊的图表,这对于前端开发人员来说会增加开发量,如下图就是笔者开发过程中要求制作的带渐变色效果的柱状图今天在这里教大家如何用原生和如何用图表开发工具来实现。 我们在开发web应用的时候经常美工会设计一些样式比较特殊的图表,这对于前端开发人员来说会...

    RaoMeng 评论0 收藏0
  • echarts解决个人觉得奇葩产品需求

    摘要:如图下面的四个点其实横坐标和纵坐标都是一样的,即个点的轴和轴的值是一样的,这样的画点就会重合无法去分辨解决思路保留一个在正确点显示其他重复的点依据这个点环绕显示确定半径,和角度下面是代码图片描述去重 showImg(https://segmentfault.com/img/bVbvJD0?w=954&h=569); 如图:下面的四个点其实横坐标和纵坐标都是一样的,(即4个点的x轴和y轴...

    alexnevsky 评论0 收藏0
  • ECharts折线图多个折线每次只显示一条

    摘要:问题一个折线图中有多条折线。通过设置为与后,对轴进行复用,并每次只展示一条折线,这样能够较好的展示每个折线的变化趋势与大致范围,不过一次看不了多个折线的参考文章文档配置项文档折线图多条折线的时候怎么控制每次只能限制条 问题 一个折线图中有多条折线。由于折线之间数值范围相差较大(折线A范围[0-50],折线B范围[10000-20000]……),如果用单Y轴来表示,折线的变化趋势不明显。...

    _DangJin 评论0 收藏0
  • highcharts: 如何解决「移动端将图表旋转90度,tooltip表现不正常」?

    摘要:背景在项目中使用是很容易的,移动端也适配的不错,按照官网教程即可。修改完成后,发现的表现符合预期了。经过测试图表的其他基本功能正常。由于的功能太多,这样的源码修改功能对其他的功能有无影响,还不能完全确定。 背景 在项目中使用highcharts是很容易的,移动端也适配的不错,按照官网教程即可。但是在移动端,由于手机端屏幕太小,需求方希望可以弄一个全屏图,把手机横过来观察曲线。 正常:s...

    Yumenokanata 评论0 收藏0
  • echartsX轴和Y轴滚动条

    摘要:给轴设置滚动条默认为默认为滑动条的左右个滑动条的大小组件高度左边的距离右边的距离右边的距离两边未选中的滑动条区域的颜色是否显示数据阴影默认即拖拽时候是否显示详细数值信息默认是否实时更新下面这个属性是里面拖到默认为默认为 showImg(https://segmentfault.com/img/bVbuOaQ?w=1172&h=513); dataZoom: [//给x轴设置滚动条 ...

    Zack 评论0 收藏0

发表评论

0条评论

Steven

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<