echarts-x轴 y轴配置(字体颜色,线的颜色,分割线,y周单位颜色)

2021-8-13    前端达人 前端及开发文章及欣赏


  1. //var myChart = this.$echarts.init(document.getElementById("echart-twoline")); //vue
  2. var myChart = echarts.init(document.getElementById("echart-twoline"));//jquery
  3. var option = {
  4. tooltip: {
  5. trigger: 'axis',
  6. axisPointer: {
  7. type: 'shadow'
  8. }
  9. },
  10. legend: {
  11. data: ['计划劳务资源', "实际劳务资源"],
  12. //align: 'left',
  13. right: 10,
  14. textStyle: {
  15. color: "#fff"
  16. },
  17. itemWidth: 14,
  18. itemHeight: 10,
  19. itemGap: 13,
  20. },
  21. grid: {
  22. left: '3%',
  23. right: '4%',
  24. bottom: '3%',
  25. containLabel: true
  26. },
  27. xAxis: [{
  28. type: 'category',
  29. data: ['1月','2月','3月', '4月'],
  30. axisLine: {/x轴线的颜色以及宽度
  31. show: true,
  32. lineStyle: {
  33. color: "rgba(219,225,255,1)",
  34. width: 0,
  35. type: "solid"
  36. }
  37. },
  38. axisTick: {
  39. show: false,
  40. },
  41. axisLabel: {//x轴文字的配置
  42. show: true,
  43. textStyle: {
  44. color: "rgba(219,225,255,1)",
  45. }
  46. },
  47. splitLine: {//分割线配置
  48. show:false,
  49. lineStyle: {
  50. color: "rgba(219,225,255,1)",
  51. }
  52. }
  53. }],
  54. yAxis: [{
  55. type: 'value',
  56. name:"单位:人",//y轴上方的单位
  57. nameTextStyle:{//y轴上方单位的颜色
  58. color:'#151515'
  59. },
  60. axisLabel: {//y轴文字的配置
  61. textStyle: {
  62. color: "rgba(219,225,255,1)",
  63. margin: 15
  64. },
  65. // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
  66. },
  67. axisTick: {
  68. show: false,
  69. },
  70. axisLine: {//y轴线的颜色以及宽度
  71. show: false,
  72. lineStyle: {
  73. color: "rgba(219,225,255,1)",
  74. width: 1,
  75. type: "solid"
  76. },
  77. },
  78. splitLine: {//分割线配置
  79. show:false,
  80. lineStyle: {
  81. color: "rgba(219,225,255,1)",
  82. }
  83. }
  84. }],
  85. series: [{
  86. name: '计划劳务资源',
  87. type: 'bar',
  88. data: [38,38,42,48],
  89. barWidth: 10, //柱子宽度
  90. barGap: .5, //柱子之间间距
  91. itemStyle: {
  92. normal: {
  93. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  94. offset: 0,
  95. color: 'rgba(0, 153, 239, 0.8)'
  96. }, {
  97. offset: 1,
  98. color: 'rgba(66, 187, 255, 1)'
  99. }]),
  100. opacity: 1,
  101. }
  102. }
  103. }, {
  104. name: '实际劳务资源',
  105. type: 'bar',
  106. data: [40, 30, 42, 50],
  107. barWidth: 10,
  108. barGap: .5,
  109. itemStyle: {
  110. normal: {
  111. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  112. offset: 0,
  113. color: 'rgba(0, 242, 159, 1)'
  114. }, {
  115. offset: 1,
  116. color: 'rgba(76, 240, 254, 1)'
  117. }]),
  118. opacity: 1,
  119. }
  120. }
  121. }]
  122. };
  123. myChart.setOption(option);
  124. window.addEventListener("resize", () => {
  125. myChart.resize();
  126. });

 

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn + 博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档