信通院-灾备 图表源码(在产品图表库基础上进行修改),开发逻辑和产品图表库一致
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.js 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. import Chart from "../../../src/chart/bar/ChartBar23/ChartBar23";
  2. import Tooltip from '../../../src/chart/commonOptions/tooltip';
  3. let bar = new Chart(document.querySelector(".c1"), {});
  4. window.addEventListener("resize", function () {
  5. bar.resize()
  6. });
  7. setTimeout(()=>{
  8. console.log(6000);
  9. // bar.setOption(opt);
  10. },6000)
  11. const opt = {
  12. color: ["#0054ff", "#cb703d"],
  13. bg: {
  14. backgroundColor: '#0b0c0e'
  15. },
  16. grid: {
  17. left:'18%',
  18. top:'20%',
  19. right:'18%',
  20. bottom:'18%',
  21. containLabel: false
  22. },
  23. legend: {
  24. left: "18%",
  25. top: '6%',
  26. itemHeight: 12,
  27. itemWidth: 12,
  28. itemAngelR: 0,
  29. textStyle: {
  30. fontSize: 16,
  31. color: '#ffffff'
  32. }
  33. },
  34. tooltip: {
  35. titleColor: '#ffffff',
  36. bgStyle: {
  37. borderColor: 'rgba(255,255,255,0.1)',
  38. borderWidth: 2,
  39. backgroundColor: '#000000',
  40. },
  41. tooltipText: Tooltip.option.tooltipText
  42. },
  43. xAxis: {
  44. type: "category",
  45. name: '年份',
  46. nameTextStyle: {
  47. fontSize: 12,
  48. color: '#ffffff',
  49. },
  50. namePosition: 'end',
  51. axisLine: {
  52. show: true,
  53. lineStyle: {
  54. color: 'rgba(255,255,255,0.1)',
  55. width: 2,
  56. type: 'solid'
  57. }
  58. },
  59. axisTick: {
  60. show: true,
  61. alignWithLabel: true,
  62. length: 2,
  63. lineStyle: {
  64. color: '#ffffff',
  65. }
  66. },
  67. splitLine: {
  68. show: false,
  69. },
  70. axisLabel: {
  71. show: true,
  72. maxShow:'',
  73. overHidden:true ,
  74. textStyle: {
  75. fontSize:12,
  76. fontWeight:'normal',
  77. color: '#ffffff'
  78. }
  79. },
  80. highLightColor: 'rgba(255,255,255,0.5)',
  81. data: ['2014', '2015', '2016', '2017', '2018', '2019'],
  82. },
  83. yAxis: {
  84. type: 'value',
  85. nameTextStyle: {
  86. color: '#ffffff',
  87. fontSize: 14
  88. },
  89. axisLine: {
  90. show: true,
  91. lineStyle: {
  92. color: '#ffffff',
  93. width: 1,
  94. }
  95. },
  96. axisTick: {
  97. show: true,
  98. lineStyle: {
  99. color: '#ffffff',
  100. },
  101. length: 2,
  102. alignWithLabel: true
  103. },
  104. splitLine: {
  105. show: false
  106. },
  107. axisLabel: {
  108. textStyle: {
  109. color: '#ffffff'
  110. }
  111. },
  112. },
  113. shape: {
  114. barGap: '30%',
  115. barCategoryGap: '40%',
  116. },
  117. series: [{
  118. name: '类别一',
  119. data: [1550, 1550, 1550, 1550, 1550, 1550]
  120. }, {
  121. name: '类别二',
  122. type: 'bar',
  123. data: [1550, 1550, 1550, 1550, 1550, 1550]
  124. }
  125. ]
  126. };