prefacio
Este artículo integra Apache ECharts basado en Vue3 y lo encapsula como un componente separado para que lo llamen otras páginas.
1. Crea un proyecto Vue3
1.1 Instalar Vue CLI globalmente
Abra una ventana de línea de comando en cualquier página e ingrese el siguiente comando para instalar Vue CLI globalmente
npm install -g @vue/cli
1.2 Cree un proyecto prototipo de Vue basado en Vue CLI
En su propio directorio de desarrollo, cree un proyecto prototipo de Vue con el siguiente comando
# 此处在D盘Vue目录下操作
vue create demo-project
El primero está seleccionado de forma predeterminada y presione Entrar para crear un proyecto Vue 3.
Se muestra la siguiente página, que indica que el proyecto Vue3 se creó correctamente
1.3 Instalar Apache ECharts
En el directorio de trabajo, ingrese el siguiente comando para instalar globalmente
npm install echarts -S
Después de que la instalación sea exitosa, se mostrará la siguiente página
1.4 Abrir y ejecutar el proyecto
Abra el proyecto con Visual Studio Code, la dirección de descarga del sitio web oficial de Visual Studio Code , después de abrir, puede ver el directorio del proyecto:
entre ellos, escribimos principalmente nuestro código de interfaz de usuario en el directorio src.
Mantenga presionada la tecla de atajo ctrl+` para abrir la terminal e ingrese el comando para ejecutar el proyecto
npm run serve
Abra el navegador e ingrese la URL http://localhost:8080/. Si se muestra la siguiente interfaz, significa que el proyecto se construyó con éxito. A continuación, comience a escribir el código:
2. Integre los gráficos electrónicos de Apache
2.1 Cómo usar el sitio web oficial
Primero, Apache ECharts visita el sitio web oficial https://echarts.apache.org/zh/index.html , abre la página principal y hace clic en Inicio rápido. No entraré en detalles aquí. Puede usar videos en línea como referencia y estudio.
A continuación, elija su propio gráfico de acuerdo con sus necesidades. , haga clic en todas las instancias, aquí puede encontrar una imagen que se ve alta y elegante para operar: después de hacer clic, seleccione
el código en el lugar de edición de código en el extremo izquierdo, y copie todos los datos en la opción (asegúrese de copiar todos, no se los pierda) , los extraemos primero y luego definimos los datos de respuesta en tiempo real que se utilizarán
2.2 Encapsular componentes echart
Primero, componentscreamos MyChart.vueun archivo en el directorio como un componente de gráfico separado, e introduciremos App.vuenuestro componente de gráfico a continuación.
El código del componente de gráfico es el siguiente, y las funciones principales se presentarán más adelante.
<template>
<br/>
<div>
<button @click="changeData">改变数据</button>
<span> </span>
<button @click="recoveryData">恢复数据</button>
</div>
<div id="myEChart" style='height: 500px; width: auto;'></div>
</template>
<script>
// 导入echarts依赖
import * as echarts from 'echarts'
import {
onMounted, reactive } from 'vue';
export default {
data() {
return {
};
},
setup() {
// 在组件挂载的时候，初始化图表信息
onMounted(() => {
// Echarts重新加载数据但不重新渲染的原因和解决方法
document.getElementById("myEChart").setAttribute('_echarts_instance_', '');
let myChart = echarts.init(document.getElementById("myEChart"));
getChartSetting().then(() => {
myChart.setOption(option);
});
window.addEventListener("resize", function () {
myChart.resize();
});
});
let scheduleList = reactive([]);
let option = reactive({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Direct',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Email',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Search Engine',
type: 'bar',
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
emphasis: {
focus: 'series'
},
markLine: {
lineStyle: {
type: 'dashed'
},
data: [[{
type: 'min' }, {
type: 'max' }]]
}
},
{
name: 'Baidu',
type: 'bar',
barWidth: 5,
stack: 'Search Engine',
emphasis: {
focus: 'series'
},
data: [620, 732, 701, 734, 1090, 1130, 1120]
},
{
name: 'Google',
type: 'bar',
stack: 'Search Engine',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 290, 230, 220]
},
{
name: 'Bing',
type: 'bar',
stack: 'Search Engine',
emphasis: {
focus: 'series'
},
data: [60, 72, 71, 74, 190, 130, 110]
},
{
name: 'Others',
type: 'bar',
stack: 'Search Engine',
emphasis: {
focus: 'series'
},
data: [62, 82, 91, 84, 109, 110, 120]
}
]
});
function changeData() {
console.log("进入修改函数");
scheduleList = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
option.xAxis[0].data = scheduleList;
refreshChart();
}
function recoveryData() {
console.log("进入恢复函数");
scheduleList = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
option.xAxis[0].data = scheduleList;
refreshChart();
}
function refreshChart() {
console.log("进入刷新图表函数");
// Echarts重新加载数据但不重新渲染的原因和解决方法
document.getElementById("myEChart").setAttribute('_echarts_instance_', '');
let myChart = echarts.init(document.getElementById("myEChart"));
myChart.setOption(option);
}
// 获取echart数据函数
async function getChartSetting() {
scheduleList = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
option.xAxis[0].data = scheduleList;
// 之前的案例参考
// const url = `${BASE_URL}/selectdata`;
// console.log("selectdata");
// res = await $axios({
// url,
// method: "post",
// });
// scheduleList = res.map(v => v.schedule);
// option.xAxis[0].data = scheduleList;
}
return {
changeData,
recoveryData,
option,
scheduleList,
getChartSetting,
}
},
methods: {
},
}
</script>
2.3 Introducir el componente icono en App.vue
Todavía no hay mucho que decir, solo ve al App.vuecódigo
<template>
<button v-if="isShow" @click="reverse">图表隐藏</button>
<button v-if="!isShow" @click="reverse">图表显示</button>
<br/>
<div v-if="isShow">
<MyChart/>
</div>
</template>
<script>
import MyChart from './components/MyChart.vue'
import {
ref } from 'vue';
export default {
name: 'App',
setup() {
// isShow变量表示图形的显示与隐藏
let isShow = ref(true);
function reverse() {
isShow.value = !isShow.value
}
return {
reverse,
isShow
}
},
components: {
MyChart
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
2.4 Introducción a la función de código
Finalmente, tengo que explicar la función del código anterior. Puede comprender el código comparando los comentarios del código de acuerdo con la función.
Aquí está la página principal cuando se ejecuta el código:
- Haga clic en el botón de cambio de gráfico en la primera fila para realizar la función de visualización y ocultación del gráfico.
Después de hacer clic en el botón, el componente del gráfico introducido desaparece directamente
- Haga clic en el botón Cambiar datos para modificar los datos de abscisas del gráfico
- Haga clic en el botón Restaurar datos para restaurar los datos en la abscisa del gráfico
3. Algunos hoyos pisados
3.1 Echarts recarga datos pero no vuelve a renderizar
Cuando el elemento dom del gráfico se destruye y reconstruye, los datos del gráfico correspondiente no se pueden actualizar en tiempo real. Si hay un problema, en primer lugar, debemos introducir la
lógica El motivo de la nueva representación de datos: después de representar el gráfico por primera vez, hay una identificación, pero cuando cargamos los datos por primera vez, no hacemos referencia explícita al valor del atributo _echarts_instance_ del gráfico, por lo que en este momento , el gráfico que se va a representar está en el original. En algunos contenedores div, si no se puede hacer coincidir el gráfico que se va a representar, los datos se cargarán correctamente pero no se representarán. Solución: primero actualice el div globalmente y luego renderice, de modo que el ID del gráfico [es decir, _echarts_instance_] en el div cargado cada vez sea el valor predeterminado; ¡y luego regenere el gráfico!
document.getElementById('div的ID').setAttribute('_echarts_instance_', '');