Home > Article > Web Front-end > How to use Vue and Element-UI for chart display of data

How to use Vue and Element-UI for chart display of data

WBOYOriginal: 2023-07-22 08:03:271399browse

How to use Vue and Element-UI to display data in charts

Introduction:
Modern web applications usually need to display a large amount of data, and data visualization is a very effective way. Vue is a popular JavaScript framework, and Element-UI is a component library based on Vue. They provide some powerful tools for processing chart display of data. This article will introduce how to use Vue and Element-UI to display data charts and provide code examples.

1. Preparation
First, we need to install Vue and Element-UI. You can install it through npm or yarn:

npm install vue
npm install element-ui

yarn add vue
yarn add element-ui

2. Create a Vue instance
Introduce the CSS files of Vue and Element-UI into the HTML file:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-button @click="showChart">显示图表</el-button>
        <el-chart :options="chartOptions" v-if="show"></el-chart>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                show: false, // 是否显示图表
                chartOptions: {
                    // 图表的配置项，详细的配置项可以参考官方文档
                }
            },
            methods: {
                showChart() {
                    this.show = true;
                }
            },
            created() {
                // 在此处可以初始化图表的配置项
            }
        });
    </script>
</body>
</html>

3. Configuring charts
Using Element-UI’s el-chart component can easily use charts in Vue. The options properties of el-chart are used to configure the style and data of the chart. You can initialize the chart in the created hook function. The following is a simple example:

data: {
    chartOptions: {
        title: {
            text: '柱状图',
            left: 'center'
        },
        tooltip: {},
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10]
        }]
    }
},
created() {
    // 在此处可以初始化图表的配置项
    // 可以通过this.chartOptions来获取和修改图表的配置项
}

4. Update chart data
If you need to dynamically update the chart data, you can modify the chartOptions attribute in the Vue method. The following is a simple example of updating chart data in a button click event:

methods: {
    updateData() {
        this.chartOptions.series[0].data = [10, 15, 20, 25, 30];
    }
}

5. Other types of charts
Element-UI provides a variety of chart types, including bar charts, line charts, and pie charts. Figure etc. You can change the chart type by modifying the series properties. The following is an example of a line chart:

data: {
    chartOptions: {
        title: {
            text: '折线图',
            left: 'center'
        },
        tooltip: {},
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10]
        }]
    }
}

Conclusion:
It is very simple to use Vue and Element-UI to display data in charts. You only need to introduce the el-chart component of Element-UI into Vue and configure the style and data of the chart in the options attribute to realize the chart display of data. By modifying the chartOptions attribute, you can also dynamically update chart data. I hope this article can help you use Vue and Element-UI to display data in charts.

Reference materials:

Vue official documentation: https://cn.vuejs.org/
Element-UI official documentation: https://element. eleme.cn/#/zh-CN/component/installation

The above is the detailed content of How to use Vue and Element-UI for chart display of data. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to create a table that dynamically loads data using Vue and Element-UINext article：How to create a table that dynamically loads data using Vue and Element-UI

See more

How to use Vue and Element-UI for chart display of data

Related articles