前言
告别千篇一律的默认样式！本文手把手教你通过自定义配色、渐变填充、动态阴影和交互动画，将ECharts图表升级为高颜值可视化作品
引用ecahrts图表
1.页面标签添加图表ID
<div style="width:100%;height:100%" id="chartId"></div>
2.图表渲染方法
// 渲染图表
doEcharts(){
// 基于准备好的dom，初始化echarts实例
var myCharts = echarts.init(document.getElementById('chartId'));
// 定义窗口大小变化处理函数
const handleResize = () => {
myCharts.resize();
};
// 添加窗口大小变化事件监听器
window.addEventListener('resize', handleResize);
// 在组件销毁时移除事件监听器
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', handleResize);
});
// 指定图表的配置项和数据
var option = {
// option start -------------------------------------------------
// option end ---------------------------------------------------
};
// 使用刚指定的配置项和数据显示图表。
myCharts.setOption(option);
}
下方可在线查看图表Demo完整代码
在线Demo
图表_tooltip配置
- 当鼠标悬停在图表上时，会显示一个半透明的白色提示框
- 提示框有轻微的阴影效果，看起来像是浮在图表上方
- 文字使用12px的深灰色字体
- 提示框不会超出图表区域
- 坐标轴指示器显示为淡淡的阴影效果
tooltip: { // 提示框组件配置
trigger: 'axis', // 触发类型，'axis'表示坐标轴触发
confine: true, // 是否将 tooltip 框限制在图表的区域内
axisPointer: { // 坐标轴指示器配置
type: 'shadow', // 指示器类型，'shadow'表示阴影指示器
shadowStyle: { // 阴影样式设置
color: 'rgba(120,120,120,0.05)', // 阴影颜色，半透明灰色
}
},
backgroundColor: 'rgba(255,255,255,0.95)', // 提示框背景色，半透明白色
extraCssText: 'box-shadow:0 3px 8px rgba(0,0,0,0.1)', // 额外CSS样式，添加阴影效果
borderWidth: 0, // 边框宽度为0，表示无边框
textStyle: { // 提示框文字样式
color: '#666', // 文字颜色为深灰色
fontSize: 12, // 文字大小为12px
}
}
图表_legend（图例）配置
legend: { // 图例组件配置
align: 'auto', // 图例标记和文本的对齐方式（自动调整）
itemHeight: 7, // 图例标记的高度（7px）
itemWidth: 7, // 图例标记的宽度（7px）
right: 0, // 图例距离容器右侧的距离（0px）
textStyle: { // 图例文本样式
color: '#999', // 文本颜色（灰色 #999）
fontSize: 11, // 字体大小（11px）
}
}
图表_grid（网格/绘图区）配置
grid: {
left: '20', // 网格左侧距离容器边缘的距离（单位 px 或 %）
right: '30', // 网格右侧距离容器边缘的距离
bottom: '0', // 网格底部距离容器边缘的距离
top: '30', // 网格顶部距离容器边缘的距离
containLabel: true // 是否包含坐标轴的标签（防止标签溢出）
}
图表_xAxis（X 轴）配置
xAxis: { // X 轴配置
type: 'category', // 轴类型，'category' 表示类目轴（离散数据）
boundaryGap: false, // 坐标轴两端是否留白，false 表示不留白，从第一个数据点开始
axisTick: { // 坐标轴刻度配置
show: false, // 隐藏 X 轴刻度线
},
axisLine: { // 坐标轴线配置
show: true, // 显示轴线
lineStyle: { // 轴线样式
color: '#e6ecfe', // 轴线颜色（浅色）
width: 1, // 轴线宽度
}
},
axisLabel: { // 坐标轴标签配置
color: '#999', // 标签文字颜色（灰色）
fontSize: 10, // 标签文字大小（10px）
},
data: [...] // 类目数据，通常是一个字符串数组
}
图表_yAxis（Y轴）的配置
yAxis: {
type: 'value', // 坐标轴类型为数值轴
name: '', // Y轴名称
axisTick: {
show: false, // 隐藏Y轴刻度线（短横线）
},
axisLine: {
show: false, // 完全隐藏Y轴线（纵轴线）
},
splitLine: { // 网格线（水平分割线）配置
show: true, // 显示分割线
lineStyle: { // 分割线样式
color: '#ebeef5', // 浅灰色分割线
type: 'dashed', // 虚线样式（solid为实线）
width: 1 // 线宽
}
},
axisLabel: { // 坐标轴标签样式
color: '#999', // 标签文字颜色（灰色）
fontSize: 10, // 标签字号（10px）
}
}
图表_series 配置
用于定义图表的数据系列
series: [ // 数据系列配置（数组，可包含多个系列）
{
name: '', // 系列名称（显示在图例和tooltip中）
type: 'line', // 图表类型为折线图
smooth: true, // 是否平滑曲线（true表示平滑过渡）
showSymbol: false, // 不显示数据点的标记符号
data: [...], // 系列数据（数组形式，如[10,20,30]）
lineStyle: { // 线条样式配置
color: '', // 线条颜色
width: 2, // 线条宽度（2px）
// 阴影效果配置
shadowColor: 'rgba(53, 108, 245, 0.2)', // 阴影颜色（蓝色半透明）
shadowBlur: 7, // 阴影模糊大小
shadowOffsetY: 5 // 阴影垂直偏移量
}
}
]
