Echarts的基本使用

' 1.先引入Echarts

npm i echarts

2.导入echarts

import * as echarts from echarts

3.定义一个div

<div class='box' style='width:500px;height:500px'></div>
//定义一个Echarts图表的储存空间要定义样式宽和高

4.在script中获取dom节点

import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

// 定义图表的配置选项
const option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
}

// 在组件挂载时初始化图表
onMounted(() => {
  // 获取图表容器元素
  const box1 = document.querySelector('.box')
  // 初始化ECharts实例
  const mayCart = echarts.init(box1)
  // 设置图表的配置选项
  mayCart.setOption(option)
})

5.图表就能正常显示了