Tabla de contenido
1. Encapsular los componentes de echarts
2. Ejemplo de histograma del sitio web oficial de Retrofit echart
Consejo: Una vez escrito el artículo, la tabla de contenido se puede generar automáticamente. Cómo generarla puede consultar el documento de ayuda a la derecha.
prefacio
提示：最近需求上要实现一个统计报表，其中有一个堆叠柱状图+折线图的图表，官网没有现成实例，自己尝试写一个。
提示：以下是本篇文章正文内容，下面案例可供参考
1. Requisitos del cliente
2. Pasos de desarrollo
1. Encapsular los componentes de echarts
Encapsule el subcomponente echarts en el proyecto vue y exponga el atributo de opción en Prop:
option: {
type: Object,
default: () => ({
title: {
text: 'echart图表'
},
xAxis: {
data: ['1月', '1月', '1月', '1月', '1月', '1月']
},
yAxis: {},
series: [
{
name: '',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [10, 20, 30, 40, 50, 60]
}
]
})
}2. Ejemplo de histograma del sitio web oficial de Retrofit echart
El sitio web oficial encuentra el caso más cercano, de la siguiente manera:
Este efecto más un gráfico de líneas puede lograr el efecto deseado. Además, aquí solo necesitamos una columna y eliminamos las columnas adicionales:
El código de opción completo del gráfico es el siguiente:
export default {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['24小时内', '24小时外', '24小时外占比']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['骨一科', '心血管内科', '普外科', '心胸外科', '呼吸内科', '神经内科', '消化内科']
}
],
yAxis: [
{
type: 'value',
name: '次数',
min: 0,
max: 18,
interval: 3,
axisLabel: {
formatter: '{value} 次'
}
},
{
type: 'value',
name: '占比',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name: '24小时内',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [1, 2, 3, 4, 5, 6, 7]
},
{
name: '24小时外',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [2, 3, 4, 5, 6, 7, 8]
},
{
name: '24小时外占比',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function(value) {
return value + ''
}
},
data: [73.0, 62.2, 83.3, 54.5, 66.3, 90.2, 50.3]
}
]
};3. Efecto final
Resumir
Consejo: aquí hay un resumen del artículo:
Por ejemplo: lo anterior es de lo que hablaré hoy. Este artículo solo presenta brevemente el proceso de desarrollo de un histograma apilado + gráfico de líneas. El sitio web oficial proporciona muchos ejemplos que nos permiten desarrollarse rápidamente.