echarts2.vue 1020 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <div ref="echarts2" class="echarts2"></div>
  3. </template>
  4. <style scoped lang="scss">
  5. .echarts2 {
  6. height: 18vh;
  7. width: 100%;
  8. }
  9. </style>
  10. <script setup>
  11. import * as echarts from 'echarts'
  12. const echarts2 = ref()
  13. onMounted(() => {
  14. echarts2View()
  15. })
  16. function echarts2View() {
  17. const myChart2 = echarts.init(echarts2.value)
  18. const option2 = {
  19. series: [
  20. {
  21. type: 'pie',
  22. radius: ['45%', '70%'],
  23. avoidLabelOverlap: false,
  24. label: {
  25. alignTo: 'labelLine',
  26. lineHeight: 15,
  27. edgeDistance: 10,
  28. color: '#FFFFFF',
  29. fontSize: '14'
  30. },
  31. emphasis: {
  32. label: {
  33. show: false
  34. }
  35. },
  36. labelLine: {
  37. show: true
  38. },
  39. data: [
  40. { value: 1048, name: '国家级' },
  41. { value: 735, name: '省级' }
  42. ]
  43. }
  44. ]
  45. }
  46. myChart2.setOption(option2)
  47. window.addEventListener('resize', function () {
  48. myChart2.resize()
  49. })
  50. }
  51. </script>