最近在vue3项目中配置个性化的了echarts图表库中柱状图、折线图，有些配置记不住是什么含义，为了方便后续的复习，在这里记录一下，也感谢大家可以帮我指出错误哈哈
要实现的柱状图效果
- 需要改变默认柱状图的坐标轴刻度、字体、图例、提示框、顶部数值显示、柱图颜色渐变
- 需要实现两个柱状图表重叠，以显示出柱状图默认背景（柱状图本身自带背景，但是只有hover时才会显示，这里要求默认显示）
- 需要实现柱状图在同一图表中叠加显示，以显示出图中顶部的蓝色小条
柱状图基础配置
const fiveEducationEcharts = () => {
const option = { // 调整整个图表距离上下左右的位置
grid: {
left: '12%',
right: '5%',
top: '8%',
},
// animation: false, // 关闭柱状图首次渲染时的柱状上升动画
tooltip: { // 鼠标hover时出现的提示框相关配置
trigger: 'axis', // 设置为坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: { // 坐标轴指示器配置项
type: 'line', // 设置为直线指示器，hover时，会默认出现一条y轴方向的线
lineStyle: { // 直线的样式
width: 55, // 线的宽度
type: 'solid', // 设置线的类型，这里设置为实线
color: 'rgba(108, 128, 151, 0.2)'
}
},
},
legend: { //图例（就是一般位于右上角的图，解释每个颜色的代表着什么）
show: true, // 是否显示
orient: 'horizontal', // 图例样式，有好多种可以选择
icon: 'roundRect', //形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
top: '0%', // 位置
right: '5%',
itemWidth: 8, // 宽度
itemHeight: 8, // 高度
textStyle: { // 图例文字颜色
color: '#5594DDFF',
},
data: [
{
name: '访问次数', // 图例名称
itemStyle: { // 图例颜色（这里设置为渐变色）
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(21,154,255,0)' },
{ offset: 1, color: 'rgba(82,21,255,0.87)' },
{ offset: 1, color: '#159AFF' },
]),
},
},
],
},
xAxis: [ // x轴相关配置
{
type: 'category', // 设置为类目轴
data: ['品德表现', '阅读素养', '运动健康', '艺术素养', '劳动与实践'],
axisTick: { show: false }, // 隐藏刻度
axisLine: { show: false }, // 隐藏坐标线
// x轴字体
axisLabel: {
color: '#D0DEEE',
fontSize: 12,
interval: 0,
},
},
// 第二个x轴
{
type: 'category',
show: false, // 隐藏坐标轴
data: ['品德表现', '阅读素养', '运动健康', '艺术素养', '劳动与实践'],
},
],
yAxis: {
type: 'value', // 数值轴，适用于连续数据。
// min: 0, // 最小值
// max: 40000, // 最大值
// interval: 10000, //间隔
// minInterval:1, //最小间隔
splitLine: { // y轴分割线
show: true, //是否显示分隔线。默认数值轴显示，类目轴不显示。（就是y轴上每个值是否需要画一条分割线线横穿整个图表）
lineStyle: { // 分隔线
type: 'dashed', //虚线
color: 'rgba(108, 128, 151, 0.30)', //颜色
},
},
name: '次', // y轴坐标轴名称
nameTextStyle: { //坐标轴名称的文字样式
color: '#69A0FF',
align: 'right',
fontSize: 12,
padding: [0, 9, 0, 0],
},
axisLabel: { //坐标轴刻度标签的相关设置
color: '#69A0FF',
fontSize: 12,
},
},
series: [
{
xAxisIndex: 1, // 对应第二个坐标轴
itemStyle: {
color: 'rgba(0, 55, 118, 0.2)',
},
data: bgcData, //背景颜色柱状图数据
// barWidth: 55,
type: 'bar',
axisPointer: { // 关闭hover提示
show: false,
},
emphasis: { // 关闭高亮显示
disabled: true,
focus: 'none',
},
},
{
name: '访问次数',
stack: '访问次数',
data: data,
barWidth: 16,
type: 'bar',
itemStyle: { // 柱体样式
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#159AFF00' },
{ offset: 1, color: '#5215FFDE' },
{ offset: 1, color: '#159AFFFF' },
]),
},
label: {
show: true, //开启显示数值
position: 'top', //数值在上方显示
color: '#FFFFFF', //字体颜色
fontSize: 14, //字体大小
formatter: function (name) { //内容
return name.value > 10000 ? String(name.value / 10000).slice(0, 3) + '万' : name.value;
},
},
},
{
name: '访问次数',
stack: '访问次数', // 两个柱子的 stack值相同时就会堆叠放置
data: stackData,
barWidth: 16,
type: 'bar',
itemStyle: {
color: '#159AFFFF',
},
axisPointer: { // 关闭hover提示
show: false,
},
},
],
};
return option;
};
数据配置
以上就是基础配置，其中data是需要显示的数据，bgcData是需要显示的背景高度数据，stackData是堆叠的蓝色小条数据
data是需要展示的柱状图数据，那在数据改变时，背景柱状图的高度，以及蓝色小条的高度肯定是不能写死的，那该如何合理的配置背景柱状图的高度，以及蓝色小条的高度呢
这里我考虑了很多办法去实现，最后实现办法是先由data渲染一次图表，此时获取图表y轴最大值，设为需要显示的背景柱状图高度，将蓝色小条的高度设为最大值的百分之一
以下代码都是在vue3中运行的
const five_education_chartDom = this.$refs['five_education_echarts'];
this.five_education_echarts = echarts.init(five_education_chartDom);
const fiveEducationOption = fiveEducationEcharts();
// 将vue3中的proxy对象转换为普通echarts对象，才能使用echarts对象上的方法
const chart = toRaw(this.five_education_echarts);
const list = [148,80,254,272,41] // 假设这是由接口请求回来的，需要展示的图表数据
fiveEducationOption.series[1].data = list;
// setOption
chart.setOption(fiveEducationOption);
// 获取y轴最大高度和间隔
//一定要在setOption之后再去获取，不然没有配置数据，肯定是获取不到y轴最大高度值的
const maxY = chart.getModel().getComponent('yAxis').axis.scale._extent[1]; // 获取y轴最大值
const interval = chart.getModel().getComponent('yAxis').axis.scale._interval; // 获取y轴间隔
// 由于这里首次渲染的图表，不需要展示出来，所以我们先把它隐藏了，clear方法相当于vue中的v-show,dispose方法相当于v-if
chart.clear();
// 设置背景颜色的柱子的值
fiveEducationOption.series[0].data = list.map(item=>maxY+interval)
// 设置柱子上方的小方块的值
fiveEducationOption.series[2].data = list.map(item=>maxY * 0.01)
// 设置y轴最大值和间隔
fiveEducationOption.yAxis.max = maxY+interval;
fiveEducationOption.yAxis.interval = interval;
// 再次绘制，即为最终echarts图表
chart.setOption(fiveEducationOption);
完结撒花！！！
