vue3 封装echarts

原创已于 2023-09-06 10:17:20 修改 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #windows #前端

于 2023-09-06 09:03:27 首次发布

本文详细介绍了在Vue项目中安装、引入并全局绑定ECharts库，以及如何配置图表、设置延迟加载数据和初始化图表的过程。

第一步先安装echarts

npm install echarts -S

第二步引入引入到main.ts 全局

import * as echarts from 'echarts';
const app = createApp(App).use(store);
app.config.globalProperties.$echarts = echarts  //绑定实例

第三步就开始使用了

const option = ref({
    title: {
        show: true,
        text: "ECharts 入门示例",
    },
    xAxis: {
        type: "category",
        data: [],
        axisLabel: {
            interval: 0,
            rotate: 30,
        },
    },
    yAxis: {
        type: "value",
    },
    series: [
        {
            data: [],
            type: "bar",
        },
    ],
});

onMounted(() => {
//设置一个延迟期不设置可以用别的方法
    setTimeout(() => {
        init();
    }, 600)
//这里是调用封装的接口 函数  然后一个一个找
    postEhart().then((res: { data: { arr: never[]; list: never[] } }) => {
        option.value.xAxis.data = res.data.arr;
        option.value.series[0].data = res.data.list;
    });
});

function init() {
//找到id盒子
    var myChart = echarts.init(document.getElementById('mainyou'));
    const optionValue = option.value;      //option 上面什么这就是什么
    myChart.setOption(optionValue);
}