Vue3 使用Echarts

记录学习过程，如有错误欢迎指出

在Vue中使用到数据可视化的地方还是挺多的，如一些后台管理项目等

安装Echarts

npm install echarts -D

基础例子

<template>
  <div>
    <div id="main" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script setup>
//引入echarts
import * as echarts from "echarts";
//注意这里引入了onMounted这个钩子，等会有用
import { onMounted } from "vue";


// echarts标准格式
const echartInit = () => {
    //获取DOM元素并初始化
  var myChart = echarts.init(document.getElementById("main"));
  // 指定图表的配置项和数据
  var option = {
    //这里的yAxis就是竖轴，xAxis就是横轴
    // yAxis and xAxis 交换可以改变横向或竖向
    yAxis:{
      data:['jack','blob','lucy']
    },
    xAxis:{
    },
    // 数据的来源
    series:[
      {
        name:'source',
        // bar就是柱状图
        type:'bar',
        // 数据
        data:[10,20,30]
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};


// 这里需要注意，不能在setup内执行getElementById操作，因为setup是在文档加载完毕之前执行，那么
// 取到的一定是null导致init失败，所以需要在onMounted中执行
onMounted(() => {
  echartInit();
});
</script>

基本步骤就是这些，主要是echartInit();不要在setup中直接调用，需要写到一个钩子中

其他图表

柱状图的series的type是bar，折线图是line，散点图scatter，饼图pin，其他可以到官方文档中的查到

通用配置

下列的所有配置均可以用于所有类型的图表

//所有配置和series同级
tooltip:{
    trigger:'axis', //可选值item
    triggerOn:'click', //可选值mouserover
    // formatter:'{b}的成绩是{c}' //还支持回掉函数
    formatter:(arg)=>{
        console.log(arg);
        return arg[0]['axisValue']
    }
},
toolbox:{
    feature:{
        // 开启导出图片
        saveAsImage:{},
        // 显示会原始数据，并且可以编辑
        dataView:{},
        // 还原数据
        restore:{},
        // 区域缩放
        dataZoom:{},
        // 作用：可以将图表显示为下面数组里有的图表类型
        magicType:{
            type:['bar','line']
        }
    }
},
// 需要和series配合使用
legend:{
    data:['math','chinese']
}

其他配置

可查看官方文档 API->配置项(官网)-(echarts.apache.org/zh/option.h…)

记录学习过程，如有错误欢迎指出