Preface
Integrating ECharts in uni-app can provide powerful charting capabilities for our applications. We will talk in detail about how to use ECharts in uni-app and configure four different charts.
Benefits of using echarts in uniapp:
Data visualization: ECharts provides rich chart types and interactive functions to display data in an intuitive and visual way. In uniapp projects, using ECharts can easily create various charts, such as line charts, bar charts, pie charts, etc., help users better understand and analyze data.
User experience improvement: By using ECharts to create interactive charts, you can add more user interactivity and operability to uniapp projects. For example, dynamic control and display of chart data can be achieved through interactive operations such as clicking, dragging, and zooming to improve user experience.
Data display and monitoring: In some scenarios where real-time monitoring and display data, ECharts can provide intuitive and clear data display effects to help users understand the changes in data in real time. For example, in the monitoring system, ECharts can be used to display real-time data indicators to discover and solve problems in a timely manner.
Custom expansion capabilities: ECharts provides rich configuration options and expansion capabilities, and can be customized and customized development according to project needs. In uniapp projects, ECharts' API and plug-in mechanism can be used to achieve more personalized chart display effects and meet the special needs of the project.
Cross-platform compatibility: uniapp is a cross-platform development framework that can develop applications on multiple platforms at the same time, such as mini programs, H5, App, etc. As a JavaScript-based library, ECharts has good compatibility on various platforms, so using ECharts in uniapp projects can easily achieve consistent data visualization on different platforms.
Install the ECharts plugin
First, we need to install the ECharts plugin in the uni-app project. Open the terminal or command line, enter the root directory of the uni-app project, and execute the following command:
npm install echarts --save
Running this command will install the ECharts plugin and add it to the project's dependencies.
Introducing the ECharts library
In the pages that need to use ECharts, we need to introduce the ECharts library. In the corresponding Vue page, you can use the following code to introduce the ECharts library:
import * as echarts from 'echarts' // IntroducedEChartsLibrary
Create Charts instances and chart containers
Next, in VuemountedDuring the life cycle, create an ECharts instance and specify a DOM element to host the chart.
mounted() {
()
},
methods: {
initChart() {
const chartContainer = this.$ // Get the chart container DOM = (chartContainer) // Create an ECharts instance and pass it into the chart container }
}In the template, we need to specify a DOM container for the chart. For example, it can be<template>Add the following code to the tag:
<view ref="chartContainer" class="chart-container"></view>
Configure and render charts
Now we can start configuring and rendering the charts. In the Vue page, configure and render charts using the API provided by ECharts. Can be called bysetOptionMethod to configure the data and style of the chart.
Below we will demonstrate four different charts: bar chart, line chart, pie chart, and scatter chart.
Configure histogram
A bar chart is a graph that represents data using rectangles, suitable for displaying numerical comparisons in different categories.
methods: {
initChart() {
const chartContainer = this.$
= (chartContainer)
const option = {
title: {
text: 'His chart example' // Title text },
xAxis: {
type: 'category', // The x-axis type is the category axis data: ['Project 1', 'Project 2', 'Project 3', 'Project 4'] // x-axis category data },
yAxis: {
type: 'value' // The y-axis type is the numerical axis },
series: [{
type: 'bar', // The chart type is a bar chart data: [120, 200, 150, 80] // Bar chart data }]
}
(option) // Apply configuration to chart instance }
}Configure line chart
Line charts can be used to show the trend of data over time or other continuity variables.
methods: {
initChart() {
const chartContainer = this.$
= (chartContainer)
const option = {
title: {
text: 'Line Chart Example'
},
xAxis: {
type: 'category', // The x-axis type is the category axis boundaryGap: false, // Cancel the blank at both ends of the x-axis data: ['on Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] // x-axis category data },
: {
type: 'value' // The y-axis type is the numerical axis },
series: [{
type: 'line', // The chart type is a line chart data: [120, 180, 150, 80, 70, 110, 130] // Line chart data }]
}
(option)
}
}Configure Pie Chart
Pie charts are used to show the proportion and distribution of different parts relative to the whole.
methods: {
initChart() {
const chartContainer = this.$
= (chartContainer)
const option = {
title: {
text: 'Pie Chart Example'
},
series: [{
type: 'pie', // The chart type is pie chart data: [
{value: 335, name: 'Project 1'}, // Pie chart data {value: 310, name: 'Project 2'},
{value: 234, name: 'Project 3'},
{value: 135, name: 'Project 4'},
{value: 1548, name: 'Project 5'}
]
}]
}
(option)
}
}Configure scatter plots
Scatter plots are used to show the relationship between two associated variables and are suitable for revealing patterns or trends between variables.
methods: {
initChart() {
const chartContainer =
= (chartContainer)
option = {
title: {
text: 'Scatter plot example'
},
xAxis: {},
yAxis {},
series: [{
symbolSize: 20, // Size of scatter plot points data: [
[10.0, 8.04], // Scatter plot data, each data point contains two numerical values [8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter' // The chart type is scatter plot }]
}
(option)
}
}Destroy a chart example
Before Vue components are destroyed, the ECharts instance needs to be manually destroyed to free up resources.
beforeDestroy() {
if () {
()
}
}This is the article about using ECharts in uni-app - configuring four different charts. For more related content on uni-app using ECharts, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!