vue2中echarts的使用

最新推荐文章于 2024-10-10 09:47:35 发布

waves0001

最新推荐文章于 2024-10-10 09:47:35 发布

阅读量1.6k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_46544034/article/details/124055891

版权

本文介绍了如何在 Vue 项目中全局引入 ECharts，并创建两个图表。在 main.js 中挂载 ECharts 到 Vue 的原型上，然后在组件中分别初始化并设置两个图表的配置项和数据，实现数据视图的展示。示例代码包括了一个柱状图和一个基于获取数据的折线图。

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

1 引入

个人是main.js中全局引用，并进行挂载

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

2 容器

个人是main.js中全局引用，并进行挂载
官方有中文文档ECharts.
上面API和属性介绍的很清晰
下面是组件中的使用

<template>
    <div class="data-view">
        <el-card>
            <div id="main1"></div>
        </el-card>
        <el-card>
            <div id="main2"></div>
        </el-card>
    </div>
</template>
<script>
import { dataview } from '@/api/api'
export default {
    data() {
        return {}
    },
    created() {
        // 第二个图表的绘制
        dataview().then(res => {
            // console.log(res)
            if (res.data.status === 200) {
                let { legend, xAxis, series } = res.data.data
                this.draw(legend, xAxis, series )
            }
        })
    },
    mounted() {
    // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("main1"))
		// 指定图表的配置项和数据
        myChart.setOption({
            title: {
                text: '联系',
            },
            tooltip: {},
            xAxis: {
                data: ['一', '二', '三', '四', '五', '六']
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data: [45, 46, 56, 34, 47, 48]
            }]
        })
    },
    methods: {
        draw(legend, xAxis, series) {
            let myChart2 = this.$echarts.init(document.getElementById("main2"))
            let option = {
                title: {
                    text: '会话量',
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legend
                },
                xAxis: {
                    type: 'category',
                    data: xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            }
            myChart2.setOption(option)
        }
    }
}
</script>
<style lang="scss" scoped>
.data-view {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-card{
        width: 50%;
        #main1, #main2 {
            height: 500px;
        }
    }
}
</style>
    </div>