VUE3利用 echarts 绘制折线图

六和七

已于 2024-02-27 19:54:09 修改

阅读量1.8k

点赞数 9

分类专栏： VUE3 文章标签： echarts 前端 javascript

于 2024-02-26 20:57:32 首次发布

本文链接：https://blog.csdn.net/lq_001/article/details/136308234

版权

VUE3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue3项目中安装并使用Echarts库，通过一个DEMO展示了如何初始化图表、设置数据和配置选项，以及链接到更多关于折线图设置和堆叠效果的教学资源。

摘要由CSDN通过智能技术生成

前期资料

Echarts 官网样式预览: https://echarts.apache.org/examples/zh/index.html#chart-type-line

Echarts 的Github地址： https://github.com/ecomfe/vue-echarts

Echarts制作的VUE3代码参考： https://stackblitz.com/edit/vue-echarts-vue-3?file=src%2FApp.vue

安装 Echarts

这里默认你已经安装好了 VUE3。如未完成，请看这里：VUE3环境搭建开发准备。

1.安装 Echarts

echarts 和 vue-echarts 都需要安装。
运行命令：npm i echarts vue-echarts

2.DEMO

在VUE工程 components 中新建 VUE 文件，插入以下代码：

<template>
    <!-- echarts容器默认宽高为0,所以需要id,在下面样式style中对对容器进行设置-->
    <div ref="myChart" id="mychart"></div>
</template>

<script>
// 引用 echarts
import * as echarts from 'echarts'

export default{
    name: "myChart",
    mounted() {
        // 1.echarts的init方法
        let myEcharts = echarts.init(this.$refs.myChart)
        // 2.设置数据
        let xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        let data = [150, 230, 224, 218, 135, 147, 260]
        // 3.配置项,从echarts网站复制，
        let option = {
            xAxis: {
                type: 'category',
                data: xdata
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: data,
                type: 'line',
                smooth: true
                }
            ]
        };
        // 4.设置配置项
        myEcharts.setOption(option)
    }
}
</script>

<style>
#mychart{
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
</style>