信通院-灾备 图表源码(在产品图表库基础上进行修改),开发逻辑和产品图表库一致

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. import ChartTable from '../../../src/chart/table/ChartTable7/ChartTable7';
  2. let body = document.getElementsByTagName("body")[0];
  3. // let tooltipBox = new tooltip2(body,opt2);
  4. let bar=new ChartTable(document.querySelector(".c1"),{});
  5. // window.addEventListener('resize',()=>{
  6. // chart.resize();
  7. // });
  8. setTimeout(()=>{
  9. // console.log(555,bar)
  10. // bar.table.stopAnimate();
  11. },3000)
  12. let opt = {
  13. bg:{
  14. backgroundColor:"#1C334B"
  15. },
  16. grid:{
  17. left: "20%",
  18. right: "20%",
  19. top: "20%",
  20. bottom: "20%"
  21. },
  22. table: {
  23. visibleNum:5,
  24. headFontSize:14,
  25. tableFontSize:14,
  26. tableHeaderColor:"#040a13",
  27. headBgColor:"rgba(31,90,128,0.5)",
  28. headBorderColor:"rgba(31,90,128,0)",
  29. lineBgColor:"#b1bd2a",
  30. tableTextColor:"#ffffff",
  31. fillColor:"rgba(0,0,0,0)",
  32. borderColor:"rgba(31,90,128,0.5)",
  33. rankingTop1:"#e71f49",
  34. rankingTop2:"#e76a1f",
  35. rankingTop3:"#e7991f",
  36. rankingTop4:"#00ff00",
  37. rankingTopTextColor:"#040a13"
  38. },
  39. series: [{
  40. name: '序号',
  41. data: [1, 2, 3, 4, 5,6, 7, 8, 9]
  42. },
  43. {
  44. name: '分类1',
  45. data: ['类型1','类型2','类型3','类型4','类型5','类型6','类型7','类型8','类型9'],
  46. },
  47. {
  48. name: '属性2',
  49. data: ['属性1','属性2','属性3','属性4','属性5','属性6','属性7','属性8','属性9'],
  50. }
  51. ,
  52. {
  53. name: '属性3',
  54. data: ['属性1','属性2','属性3','属性4','属性5','属性6','属性7qwewqewqewqweqwqewqewq','属性8','属性9'],
  55. }
  56. ]
  57. };