Map.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <div ref="chartRef" :style="{ height, width }"></div>
  3. </template>
  4. <script lang="ts">
  5. import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
  6. import { useECharts } from '/@/hooks/web/useECharts';
  7. import { mapData } from './data';
  8. import { registerMap } from 'echarts';
  9. export default defineComponent({
  10. props: {
  11. width: {
  12. type: String as PropType<string>,
  13. default: '100%',
  14. },
  15. height: {
  16. type: String as PropType<string>,
  17. default: 'calc(100vh - 78px)',
  18. },
  19. },
  20. setup() {
  21. const chartRef = ref<HTMLDivElement | null>(null);
  22. const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  23. onMounted(async () => {
  24. const json = (await (await import('./china.json')).default) as any;
  25. registerMap('china', json);
  26. setOptions({
  27. visualMap: [
  28. {
  29. min: 0,
  30. max: 1000,
  31. left: 'left',
  32. top: 'bottom',
  33. text: ['高', '低'],
  34. calculable: false,
  35. orient: 'horizontal',
  36. inRange: {
  37. color: ['#e0ffff', '#006edd'],
  38. symbolSize: [30, 100],
  39. },
  40. },
  41. ],
  42. tooltip: {
  43. trigger: 'item',
  44. backgroundColor: 'rgba(0, 0, 0, .6)',
  45. textStyle: {
  46. color: '#fff',
  47. fontSize: 12,
  48. },
  49. },
  50. series: [
  51. {
  52. name: 'iphone4',
  53. type: 'map',
  54. map: 'china',
  55. label: {
  56. show: true,
  57. color: 'rgb(249, 249, 249)',
  58. fontSize: 10,
  59. },
  60. itemStyle: {
  61. areaColor: '#2f82ce',
  62. borderColor: '#0DAAC1',
  63. },
  64. data: mapData,
  65. },
  66. ],
  67. });
  68. });
  69. return { chartRef };
  70. },
  71. });
  72. </script>