DemoChart.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <div class="container">
  3. <div id="main"></div>
  4. <div id="main1" ref="elRef"></div>
  5. </div>
  6. </template>
  7. <script lang="ts">
  8. // https://vega.github.io/vega/usage/
  9. import { defineComponent, onMounted, ref, unref } from 'vue';
  10. import { useECharts } from '/@/hooks/web/useECharts';
  11. import echarts from 'echarts';
  12. export default defineComponent({
  13. name: 'DemoChart',
  14. setup() {
  15. const elRef = ref<any>(null);
  16. const { setOptions } = useECharts(elRef);
  17. // onMounted(() => {
  18. // const el = unref(elRef);
  19. // if (!el || !unref(el)) return;
  20. // const chart = echarts.init(el);
  21. // window.addEventListener('resize', () => {
  22. // chart!.resize();
  23. // });
  24. // // removeResizeFn = removeEvent;
  25. // var option = {
  26. // title: {
  27. // text: 'ECharts entry example',
  28. // },
  29. // tooltip: {},
  30. // legend: {
  31. // data: ['Sales'],
  32. // },
  33. // xAxis: {
  34. // data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks'],
  35. // },
  36. // yAxis: {},
  37. // series: [
  38. // {
  39. // name: 'Sales',
  40. // type: 'bar',
  41. // data: [5, 20, 36, 10, 10, 20],
  42. // },
  43. // ],
  44. // };
  45. // chart && chart.setOption(option as any);
  46. // });
  47. onMounted(() => {
  48. var myChart = echarts.init(elRef.value);
  49. // specify chart configuration item and data
  50. var option = {
  51. title: {
  52. text: 'ECharts entry example',
  53. },
  54. tooltip: {},
  55. legend: {
  56. data: ['Sales'],
  57. },
  58. xAxis: {
  59. data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks'],
  60. },
  61. yAxis: {},
  62. series: [
  63. {
  64. name: 'Sales',
  65. type: 'bar',
  66. data: [5, 20, 36, 10, 10, 20],
  67. },
  68. ],
  69. };
  70. setOptions(option);
  71. // use configuration item and data specified to show chart
  72. // myChart.setOption(option);
  73. // window.addEventListener('resize', () => {
  74. // myChart.resize();
  75. // });
  76. });
  77. return { elRef };
  78. },
  79. });
  80. </script>
  81. <style>
  82. .container {
  83. width: 100%;
  84. }
  85. #main,
  86. #main1 {
  87. width: 40%;
  88. height: 300px;
  89. }
  90. </style>