1. Este caso é baseado em Vue3+ts e o efeito é exibido:
2. O valor de um único atributo:
1. Grade A posição de todo o gráfico
grid.containLabel Rótulo de inclusão Sim/Não
1. Simplificando, se for falso, a distância até o fundo é calculada a partir do eixo de coordenadas.
2. Se for verdade, a distância até a parte inferior é calculada a partir da parte inferior do texto das coordenadas
2. lenda lenda
legenda.orientação direção matinal ilustrada
1. exibição vertical vertical
2. exibição horizontal horizontal
legenda.x/y Defina a posição da legenda na direção do eixo X e a posição na direção do eixo Y< /span>
x: Esquerda padrão, todos os intervalos de valores: esquerda/centro/direita
y: Topo padrão, todos os intervalos de valores: superior/central/inferior
legenda.itemGap número do intervalo
3. Estilos relacionados ao eixo x/y do eixo x/yAxis
splitLine.lineStyle.type define o tipo de linha de fundo
1. linha tracejada
2. linha sólida sólida
estilos relacionados à marca de escala axisTick
show: false/true se deseja ocultar marcas de escala
dentro: falso/verdadeiro se a marca aponta para dentro ou para fora
axisLine Estilos relacionados ao eixo
estilos relacionados ao texto da coordenada axisLabel
formatador: '{value} % ' Personalize o conteúdo do texto, adicione unidades, etc.
4. dados de série
itemStyle estilo cilindro
1. Estilo de exibição de texto de coluna única
rótulo: {
show: false, // Se deseja exibir
posição: 'direita', // Posição exibida
}
2. Defina a cor do gradiente para o cilindro e apenas escreva o valor da cor diretamente para uma única cor.
cor: novo echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
deslocamento: 0,
cor: 'rgba(255, 176, 52, 1)',
},
{
deslocamento: 1,
cor: 'rgba(93, 78, 52, 0,01)',
},
]),
3. O código completo é o seguinte:
<template>
<div class="container" ref="barRef"></div>
</template>
<script setup lang="ts" name="waterAndElectricity-bar">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const barRef = ref();
let myChart: any = null; // echarts实例对象
onMounted(() => {
initCharts();
});
// 变化尺寸
const onResize = (resize: any) => {
console.log('resize: ', resize);
myChart && myChart.resize();
};
window.addEventListener('resize', onResize);
const initCharts = () => {
let option = {
// 整个echarts图标的位置
grid: {
left: '2%',
right: '4%',
top: '15%',
bottom: '0%',
// 是否包含标签,简单来说如果是false,到底部的距离是从坐标轴线开始计算的;如果是true,到底部的距离就是从坐标文字底部开始计算
containLabel: true,
},
// 鼠标hover出现的提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
backgroundColor: 'rgba(69, 173, 175, 0.5)',
borderWidth: 0,
textStyle: {
color: '#fff',
fontSize: 14,
},
},
// 图例
legend: {
align: 'left', // 对齐反向
right: 10,
textStyle: {
color: '#59697A',
fontSize: 14,
},
itemWidth: 25,
itemHeight: 8,
itemGap: 10, // 间隔
},
barWidth: 10, // 柱体宽度
// x轴相关样式
xAxis: {
type: 'value',
// 背景线条(竖着的)
splitLine: {
lineStyle: {
color: 'rgba(65, 82, 100, 0.50)',
type: 'dashed', // dashed设置背景横线为虚线,solid为实线
},
},
// 坐标轴的刻度线
axisTick: {
show: false, // 是否隐藏
inside: true, // 刻度线指向内部还是外部
},
// x轴线
axisLine: {
lineStyle: {
color: '#26D9FF',
},
},
// x轴文字样式
axisLabel: {
formatter: '{value} % ', // 自定义x轴文字内容,添加单位等
color: '#59697A',
fontSize: 12,
},
},
// y轴相关样式
yAxis: {
type: 'category',
data: ['水', '电', '气'],
// 背景线条(横着的)
splitLine: {
show: false, // 是否显示
},
axisTick: {
show: false,
},
axisLine: {
// 改变y轴颜色
lineStyle: {
color: '#415264',
width: 2,
type: 'solid',
},
},
axisLabel: {
// 改变y轴字体颜色和大小
//formatter: '{value} m³ ', // 给y轴添加单位
color: '#59697A',
fontSize: 12,
},
},
// 所有数据
series: [
{
type: 'bar',
name: '本月',
// 柱体样式
itemStyle: {
// 单个柱体文字显示样式
label: {
show: false, // 是否显示
position: 'right', // 显示的位置
color: '#F2A934',
fontSize: 12,
},
// 柱体设置渐变颜色,单色直接写色值即可
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: 'rgba(255, 176, 52, 1)',
},
{
offset: 1,
color: 'rgba(93, 78, 52, 0.01)',
},
]),
},
data: [19, 52, 76], // 数据
},
{
type: 'bar',
name: '上月',
itemStyle: {
label: {
show: false,
position: 'right',
color: '#59F3F6',
fontSize: 12,
},
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: 'rgba(92, 252, 255, 1)',
},
{
offset: 1,
color: 'rgba(44, 69, 98, 0.06)',
},
]),
},
data: [12, 35, 56],
},
],
};
myChart = echarts.init(barRef.value as HTMLDivElement);
myChart.setOption(option, true);
};
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 100%;
}
</style>