通俗易懂的echarts在vue中的使用指南

简洁明了的学习如何在vue中使用echarts

1. 安装与导入

npm install echarts

假设在vue单文件中使用，组合式api

import * as echarts from "echarts";

2. 准备配置项

可以参照官网的配置，通常而言我们可能需要动态的增添数据，因此最好使用ref/reactive来进行包裹，变成响应式对象，这里data可以绑定一个响应式对象，方便修改数据

const optionPie = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    // top: '10%',
    bottom: "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: yearData.value
    }
  ]
})

3. 绑定到dom元素并初始化

比方说我们想把图表挂载到某个div上 <div ref="pieDom" class="chart"></div>

const pieDom = ref() // 使用ref创建虚拟DOM引用，使用时用pieDom.value
var myPieChart: any;
onMounted(
  () => {
    myPieChart = echarts.init(pieDom.value);//注意生命周期钩子
    myPieChart.setOption(optionPie.value, true);//每当想要更新时再次调用即可更新，可以watch想要的数据，然后更新
  }
)

4. 注意事项，一定要在onMounted中进行初始化，防止还没挂载dom元素就试图绑定echarts导致报错

入门小案例，GitHub地址github.com/Moon-18/Dat…