vue3如何引入echarts

梓旭 • • vue

首先使用npm安装echarts

npm i echarts --save

在你需要引入echarts的页面引入echarts

import { onMounted, reactive, ref } from "@vue/runtime-core"
import * as echarts from 'echarts'

然后：

1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart = ref(null);

2.定义在本vue实例中的echarts实例

let myEcharts = reactive({});
3.定义好echarts的配置数据
let option = {
    title: {
        text: 'Stacked Line'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads'],
        selected: {
            'Union Ads': false, //图例为‘全部’的一项默认置灰
            'Video Ads': false
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [0, 0, 0, 0, 0, 0, 0],

        },
        {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
    ]
};
4.使用onMounted钩子函数初始化echarts
onMounted(() => {
    //初始化echarts
    init();
})

5.初始化echarts实例方法

const init = () => {
    //3.初始化container容器
    myEcharts = echarts.init(chart.value);
    //5.传入数据
    myEcharts.setOption(option);
    //additional：图表大小自适应窗口大小变化
    window.onresize = () => {
        myEcharts.resize();
    }
}

完整代码：

 

html

<el-card>
                <div class="about">
                    <h2> 最近订单走势
                    </h2>
                    <div id="container" ref="chart">

                    </div>
                </div>
            </el-card>

 

 

css

<style scoped>
#container {
    box-sizing: border-box;
    height: 400px;
    width: 600px;
    margin: 0 auto;
}
</style>

js

<script setup>
import { onMounted, reactive, ref } from "@vue/runtime-core"
import * as echarts from 'echarts'

//1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart = ref(null);

//2.定义在本vue实例中的echarts实例
let myEcharts = reactive({});

//3.定义好echarts的配置数据
let option = {
    title: {
        text: 'Stacked Line'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads'],
        selected: {
            'Union Ads': false, //图例为‘全部’的一项默认置灰
            'Video Ads': false
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [0, 0, 0, 0, 0, 0, 0],

        },
        {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
    ]
};

//4、onMounted钩子函数
onMounted(() => {
    //初始化echarts
    init();
})

//5、初始化echarts实例方法
const init = () => {
    //3.初始化container容器
    myEcharts = echarts.init(chart.value);
    //5.传入数据
    myEcharts.setOption(option);
    //additional：图表大小自适应窗口大小变化
    window.onresize = () => {
        myEcharts.resize();
    }
}

 

梓旭梓旭
THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录