自定义组件库-封装第三方图表,如echarts
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

CustomSpirits.js 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import utils from 'utils/index.js';
  2. import * as echarts from 'echarts';
  3. // import * as echarts from 'echarts/core';
  4. import styleConfig from './config/styleConfig';
  5. import dataConfig from './config/dataConfig';
  6. export default class CustomChartBar{
  7. constructor(dom, opts){
  8. console.log('dom', dom)
  9. console.log('opts', opts)
  10. opts = opts || {};
  11. if(opts.getConfig === true){
  12. return;
  13. }
  14. this.chart = null;
  15. this._dom = dom;
  16. this.init(opts);
  17. }
  18. init(opts){
  19. this.chart = echarts.init(this._dom);
  20. this.setOption(opts);
  21. }
  22. setOption(opts, data){
  23. // this.chart.setOption(this.mergeOption(opts, data), {notMerge:true});
  24. this.chart.setOption(opts, {notMerge:true});
  25. }
  26. // mergeOption(style, dataConfig){
  27. // style = utils.deepCopy(style);
  28. // style.xAxis.data = dataConfig.defaultData[dataConfig.configList[0].defaultKey];
  29. // style.color = style.color.color;
  30. // style.yAxis = {
  31. // type:'value'
  32. // }
  33. // style.series = [];
  34. // let series = dataConfig.configList[1].defaultKey;
  35. // if(Array.isArray(series) === true){
  36. // series.forEach( item => {
  37. // style.series.push({
  38. // data:dataConfig.defaultData[item],
  39. // type:'bar'
  40. // })
  41. // })
  42. // }else{
  43. // style.series = [
  44. // {
  45. // data: dataConfig.defaultData[series],
  46. // type: 'bar'
  47. // }
  48. // ]
  49. // }
  50. // return style;
  51. // }
  52. getConfig(){
  53. return{
  54. styleConfig:utils.deepCopy(styleConfig),
  55. dataConfig:utils.deepCopy(dataConfig),
  56. fun:{
  57. getColName: this.getColName,
  58. themeMerge: this.themeMerge,
  59. }
  60. }
  61. }
  62. themeMerge(style, dataConfig){
  63. style = utils.deepCopy(style);
  64. style.xAxis.data = dataConfig.xAxis[0].data;
  65. style.color = style.color.color;
  66. style.yAxis = {
  67. type:'value'
  68. }
  69. style.series = [];
  70. let series = dataConfig.series;
  71. if(Array.isArray(series) === true){
  72. series.forEach( item => {
  73. style.series.push({
  74. data:item.data,
  75. type:'bar'
  76. })
  77. })
  78. }
  79. return style;
  80. }
  81. getColName(dataConfig){
  82. let column = {};
  83. dataConfig = JSON.parse(JSON.stringify(dataConfig));
  84. let dataConfigKey = dataConfig.configList;
  85. column.xAxis = [dataConfigKey[0].defaultKey];
  86. column.series = dataConfigKey[1].defaultKey;
  87. return column;
  88. }
  89. resize(){
  90. // this.chart && this.chart.setOption && this.chart.setOption(this.opts)
  91. this.chart.resize();
  92. }
  93. dispose(){
  94. this.chart.dispose();
  95. }
  96. }