1. This case is based on Vue3+ts, and the effect is displayed:
2. The value of a single attribute:
1. Grid The position of the entire chart
grid.containLabel Yes/No inclusion label
1. Simply put, if it is false, the distance to the bottom is calculated from the coordinate axis.
2. If it is true, the distance to the bottom is calculated from the bottom of the coordinate text
2. legend legend
legend.orient illustrated morning direction
1.vertical vertical display
2.horizontal horizontal display
legend.x/y Set the position of the legend in the X-axis direction and the position in the Y-axis direction
x: Default left, all value ranges: left/center/right
y: Default top, all value ranges: top/center/bottom
legend.itemGap gap number
3. xAxis/yAxis x/y axis related styles
splitLine.lineStyle.type sets the type of background line
1.dashed dashed line
2.solid solid line
axisTick tick mark related styles
show: false/true whether to hide tick marks
inside: false/true whether the tick mark points inside or outside
axisLine Axis related styles
axisLabel coordinate text related styles
formatter: '{value} % ' Customize text content, add units, etc.
4. series data
itemStyle cylinder style
1.Single column text display style
label: {
show: false, // Whether to display
position: 'right', // Displayed position
}
2. Set the gradient color for the cylinder, and just write the color value directly for a single color.
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)',
},
]),
3. The complete code is as follows:
<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>