通过echarts实现极坐标系

功能

通过echart图表中的js代码,使柱状图实现缩放

用法

1.1 新建表格

页面内新建任意数里的表格后

1.2 新增echart图表

将js代码复制到echart图表中

v1.2代码

  1. dataSet = dataSet.map((data, i) => dataSet.map(d => d[i]));
  2. var 地区 = dataSet[0];
  3. var 数值1 = dataSet[1];
  4. var 数值2 = dataSet[2];
  5. var 数值3 = dataSet[3];
  6. option = {
  7. angleAxis: {
  8. },
  9. radiusAxis: {
  10. type: 'category',
  11. data: 地区,
  12. z: 10
  13. },
  14. polar: {
  15. },
  16. series: [{
  17. type: 'bar',
  18. data: 数值1,
  19. coordinateSystem: 'polar',
  20. name: '科研数量',
  21. stack: 'a',
  22. emphasis: {
  23. focus: 'series'
  24. }
  25. }, {
  26. type: 'bar',
  27. data:数值2,
  28. coordinateSystem: 'polar',
  29. name: '购买数量',
  30. stack: 'a',
  31. emphasis: {
  32. focus: 'series'
  33. }
  34. }, {
  35. type: 'bar',
  36. data: 数值3,
  37. coordinateSystem: 'polar',
  38. name: '并发数量',
  39. stack: 'a',
  40. emphasis: {
  41. focus: 'series'
  42. }
  43. }],
  44. legend: {
  45. show: true,
  46. data: ['科研数量', '购买数量', '并发数量']
  47. }
  48. };