Vue3调用Apache Echarts

先下载

npm install echarts

那个网页用就在那引入

import * as echarts from "echarts";

写代码

在template写一个div

<div ref="main" style="background:#eee; width: 1300px; height: 500px"></div>

在script 标签要带setup属性

//声明main的ref
const main = ref();
//
onMounted(
        () => {
            init()
        }
    )
    function init () {
        var myChart = echarts.init(main.value);
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
//
                dimensions: ['product', '套装门', '亮窗门', '套装门套'],

                source: [
                { product: '周一', 套装门: 43.3, 亮窗门: 85.8, 套装门套: 93.7 },
                { product: '周二', 套装门: 83.1, 亮窗门: 73.4, 套装门套: 55.1 },
                { product: '周三', 套装门: 86.4, 亮窗门: 65.2, 套装门套: 82.5 },
                 
                ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
        }
           option && myChart.setOption(option);
    };

如果有更好的方法欢迎留言