axis-arrow.html 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="lib/esl.js"></script>
  5. <script src="lib/config.js"></script>
  6. <meta name="viewport" content="width=device-width, initial-scale=1" />
  7. </head>
  8. <body>
  9. <style>
  10. html, body, #main, .chart {
  11. width: 100%;
  12. }
  13. .chart {
  14. height: 300px;
  15. }
  16. </style>
  17. <div id="main"></div>
  18. <script>
  19. require([
  20. 'echarts'
  21. ], function (echarts) {
  22. var options = [{
  23. title: {
  24. text: 'x: default; y: default'
  25. },
  26. xAxis: {
  27. data: ['a', 'b', 'c', 'd', 'e']
  28. },
  29. yAxis: {
  30. },
  31. series: [{
  32. type: 'line',
  33. data: [2, 3, 5, 1, 6]
  34. }]
  35. }, {
  36. title: {
  37. text: 'x: ["none", "arrow"]; y: "arrow" of size 30x20'
  38. },
  39. xAxis: {
  40. data: ['a', 'b', 'c', 'd', 'e'],
  41. axisLine: {
  42. symbol: ['none', 'arrow'],
  43. lineStyle: {
  44. color: 'green'
  45. }
  46. }
  47. },
  48. yAxis: {
  49. axisLine: {
  50. symbol: 'arrow',
  51. symbolSize: [30, 20]
  52. }
  53. },
  54. series: [{
  55. type: 'line',
  56. data: [2, 3, 5, 1, 6]
  57. }]
  58. }, {
  59. title: {
  60. text: 'x: "none"; y: ["none", "arrow"], inversed'
  61. },
  62. xAxis: {
  63. data: ['a', 'b', 'c', 'd', 'e'],
  64. axisLine: {
  65. symbol: 'none'
  66. }
  67. },
  68. yAxis: {
  69. axisLine: {
  70. symbol: ['none', 'arrow']
  71. },
  72. inversed: true
  73. },
  74. series: [{
  75. type: 'line',
  76. data: [2, 3, 5, 1, 6]
  77. }]
  78. }];
  79. var main = document.getElementById('main');
  80. for (var i = 0; i < options.length; ++i) {
  81. var container = document.createElement('div');
  82. container.setAttribute('class', 'chart');
  83. main.appendChild(container);
  84. var chart = echarts.init(container);
  85. chart.setOption(options[i]);
  86. }
  87. });
  88. </script>
  89. </body>
  90. </html>