Vue使用ECharts

最新推荐文章于 2024-06-04 23:08:49 发布

coffee_mao

最新推荐文章于 2024-06-04 23:08:49 发布

阅读量938

点赞数

分类专栏：框架文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/qq_46724069/article/details/129184275

版权

框架专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue简介

Vue文档

vue是一款用于构建用户界面的JavaScript框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

ECharts简介

快速入门 ECharts

Echarts实例

Apache ECharts 一个基于` JavaScript 的开源可视化图表库。

例如折线图代码

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

在这里插入图片描述

Vue使用 Echarts

官方的使用ECharts，HTML中使用如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

在Vue文件使用如下，npm下载echarts

npm install echarts --save

main.js文件中实现添加

// 导入并且绑定 echarts
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

Vue文件中使用，显示随机的数据，规定在3s实现动态的变化

<template>
    <div class="Echarts">
        <el-card id="main" style="width: 600px;height:400px;">
        </el-card>
    </div>
</template>
  
<script>
export default {
    name: 'Reader',
    data(){
        return{
            data: this.getRandomData()
        }
    },
    computed: {
        option() {
            return {
                xAxis: {
                    type: 'category',
                    data: this.data.map(d => d.time)
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    type: 'line',
                    data: this.data.map(d => d.value)
                }]
            }
        }
    },
    methods: {
        getRandomData(){
            return [
                {
                    time: '2023-02-22',
                    value: Math.random()*100
                },
                {
                    time: '2023-02-22',
                    value: Math.random()*100
                },
                {
                    time: '2023-02-22',
                    value: Math.random()*100
                },
                {
                    time: '2023-02-22',
                    value: Math.random()*100
                }
            ];
        },
        FoldLineChart() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('main'));
            
            // 获取到option对象
            var option = this.option

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    },
    mounted() {
        this.FoldLineChart();
    },
    created(){
        //this.FoldLineChart();
        setInterval(() => {
            this.data=this.getRandomData();
            this.FoldLineChart();
        }, 3000);
    }
}
</script>
  
<style></style>

运行结果如图

在这里插入图片描述