Vue2使用Echarts实现可视化（详细讲解）

最新推荐文章于 2024-08-05 22:43:05 发布

爱生活，更爱技术

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量2.2k

点赞数 21

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_54421200/article/details/135735427

版权

本文介绍了如何在Vue应用中下载并配置Echarts库，展示了一个固定数据的渐进折线图实例。还展示了如何在组件中全局挂载Echarts，并通过后端数据填充动态内容，以及如何设置视觉映射和图表选项。

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

一、下载Echarts

npm install echarts --save

二、main.js配置

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

全局挂载echarts 方便调用，也可以在某个组件里进行引用，这里我就不演示了

三、在.vue文件中使用

这里的展示的是渐进折线图，数据是固定的，你们可以自己从后端获取数据后进行填充。

<template>
    <div ref="mains" style="width: 830px;height: 300px">
    </div>
</template>

<script>
    let data= [["2000-06-05", 116], ["2000-06-06", 129],
        ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73],
        ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68],
        ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245],
        ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111],
        ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137],
        ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94],
        ["2000-06-25", 71]]
    const dateList = data.map(function (item) {
        return item[0];
    });
    const valueList = data.map(function (item) {
        return item[1];
    });
    export default {
        name: "ChatHistoryAnalysis",
        data() {
            return {
                chartInstance: null,
            }
        }, mounted() {
            this.initEcharts()
        },
        methods: {
            dateList(data) {
                data.map(function (item) {
                    return item[0];
                })
            },
            valueList(data) {
                data.map(function (item) {
                    return item[1];
                });
            },
            initEcharts() {
                this.chartInstance = this.$echarts.init(this.$refs.mains);
                const option = {
                    // Make gradient line here
                    visualMap: [
                        {
                            show: false,
                            type: 'continuous',
                            seriesIndex: 0,
                            min: 0,
                            max: 400
                        },
                        {
                            show: false,
                            type: 'continuous',
                            seriesIndex: 1,
                            dimension: 0,
                            min: 0,
                            max: dateList.length-1
                        }
                    ],
                    title: [
                        {
                            left: 'center',
                            text: '近期活跃视图'
                        },
                    ],
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: [

                        {
                            data: dateList,
                            gridIndex: 0
                        }
                    ],
                    yAxis: [
                        {
                            gridIndex: 0
                        }
                    ],
                    grid: [
                        {
                            top: '10%'
                        }
                    ],
                    series: [
                        {
                            type: 'line',
                            showSymbol: false,
                            data: valueList
                        },

                    ]
                };
                this.chartInstance.setOption(option)
            }
        }
    }
</script>

<style scoped>

</style>

注意：一定要有宽度和高度，否则不会展示出来