登录
Echarts常用配置
2025年12月27日 11:25
title设置字体
textStyle
option = {
title: {
text: "Main Title",
subtext: "Sub Title",
left: "center",
top: "center",
textStyle: {
fontSize: 30,
fontWeight:'bolder'
},
subtextStyle: {
fontSize: 20
}
}
}
控制图表边距
grid: { top: '20%'，botton:'20%',left:'10%',right:'10%' },
X轴坐标系标签，旋转角度
xAxis: [
{
type: 'category',
data: data,
axisPointer: {
type: 'shadow'
},
axisLabel: { // 坐标轴刻度标签的相关设置。
rotate: '20' // x轴数据标签旋转角度
}
}
],
限制柱状图最大宽度
series: [
{
name: '数量',
type: 'bar',
barMaxWidth: 50, // 最大宽度
data: data
}]
柱状图渐变色
series里面
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, // 渐变方向从左上角到右下角
[
{ offset: 0, color: 'rgb(128,100,162)' }, // 0% 处的颜色
{ offset: 1, color: '#fff' } // 100% 处的颜色
]
)
},
柱状图文字显示
直接在取消柱子上方显示具体数据信息，以及自定义信息，比如100%，数字后面加一个百分号 1）show，显示节点上的文本信息 2）position，文本位置，可以根据需要调整为 ‘top’, ‘bottom’, ‘inside’, ‘insideTop’, 等 top，表示在节点上方
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'bar',
label:{
show:true,
position:'top',
formatter:function(data){
return data.value+'件'
}
}
}
]
折线图变平滑
series属性中使用smooth: true语句让折线图变成平滑折线图
echart柱状图最小间隔
var option = {
// ... 其他配置项
yAxis: {
type: 'value',
// 设置Y轴的最小间隔
minInterval: 1 // 示例值，根据实际需求进行调整
},
// ... 其他配置项
};
立体柱状图
var xData2 = ['容城谷庄']
var data1 = [50]
option = {
backgroundColor: 'rgba(0,0,0,0)',
grid: {
left: 0,
bottom: 15,
top: 15,
right: 80
},
xAxis: {
data: xData2,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
// textStyle: {
// color: '#fff',
// fontSize: 20,
// },
// 不显示Y轴数值
formatter: function () {
return ''
}
}
},
series: [
// 数据低下的圆片
{
name: '',
type: 'pictorialBar',
symbolSize: [41, 15],
symbolOffset: [0, 8],
z: 12,
symbol: 'circle', // 修改为圆形
itemStyle: {
opacity: 1,
color: function (params) {
return new echarts.graphic.LinearGradient(
1,
// 深色#2BA9ED 浅色 #34EDF2
0,
0,
0,
[
{
offset: 0,
color: '#E1DC53' // 0% 处的颜色
},
{
offset: 1,
color: '#E1DC53' // 100% 处的颜色
}
],
false
)
}
// color: 'transparent'
},
data: [1]
},
// 数据的柱状图
{
name: '',
type: 'bar',
barWidth: 41,
itemStyle: {
// lenged文本
opacity: 1, // 这个是 透明度
color: function (params) {
return new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: '#E1DC53' // 0% 处的颜色
},
{
offset: 1,
color: '#E8AE62' // 100% 处的颜色
}
],
false
)
}
},
data: data1
},
// 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
{
type: 'bar',
symbol: 'circle', // 修改为圆形
barWidth: 43,
itemStyle: {
color: 'transparent'
},
data: data1
},
// 数据顶部的样式
{
name: '',
type: 'pictorialBar',
symbol: 'circle', // 修改为圆形
symbolSize: [41, 15],
symbolOffset: [0, -8],
z: 12,
itemStyle: {
normal: {
opacity: 1,
color: function (params) {
return new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: '#E1DC53' // 0% 处的颜色
},
{
offset: 1,
color: '#E8AE62' // 100% 处的颜色
}
],
false
)
},
label: {
show: true, // 开启显示
position: 'top', // 在上方显示
textStyle: {
// 数值样式
color: '#FFFFFF',
fontSize: 20,
top: 50
},
formatter: function (param) {
return param.data + '%'
}
}
}
},
symbolPosition: 'end',
data: data1
},
// 阴影的顶部
{
name: '', // 头部
type: 'pictorialBar',
symbol: 'circle', // 修改为圆形
symbolSize: [41, 15],
symbolOffset: [0, -8],
z: 17,
symbolPosition: 'end',
itemStyle: {
color: 'rgba(24,78,134,0.3)',
opacity: 0.3,
borderWidth: 1,
borderColor: '#526558'
},
data: [100]
},
// 后面的背景
{
name: '2019',
type: 'bar',
barWidth: 41,
barGap: '-100%',
z: 0,
itemStyle: {
color: 'rgba(24,78,134,0.1)'
},
data: [100]
}
]
}
Echarts给柱状图上面增加小横杠
option = {
title: {
text: '世界人口统计',
left: 'center',
textStyle: {
fontSize: 24,
fontWeight: 'bold',
color: '#333'
}
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
name: '人口 (万)',
nameLocation: 'middle',
nameGap: 30,
axisLabel: {
formatter: function(value) {
if (value >= 10000) {
return (value / 10000) + '亿';
}
return value;
}
}
},
yAxis: {
type: 'category',
data: ['巴西', '中国', '世界'],
axisLabel: {
color: '#666',
fontSize: 14
}
},
series: [
{
name: '2011',
type: 'bar',
data: [10,20],
itemStyle: {
borderRadius: [0, 4, 4, 0],
color: '#36A2EB'
},
label: {
show: true,
position: 'right',
formatter: function(params) {
return params.value.toLocaleString();
}
},
markPoint: {
symbol: 'rect',
symbolSize: [4, 20],
data: [
{
// 标记巴西 (2011)
name: '',
coord: [10, '巴西'],
itemStyle: { color: '#FF6384' }
},
{
// 标记中国 (2011)
name: '',
coord: [20, '中国'],
itemStyle: { color: '#FF6384' }
}
]
}
}
]
};
javascript
markPoint: { symbol: 'rect', // 标记点形状为矩形 symbolSize: [4, 20], // 标记点大小 data: [ { name: '', coord: [2, 36], value: 36 } // 关键配置 ] }
假设这是一个**折线图或柱状图**（直角坐标系）：
- **`coord: [2, 36]`** 的含义：
- **`2`**：在 X 轴上，对应**第 3 个类目**（索引从 0 开始，例如 `['一月', '二月', '三月', ...]` 中的 `'三月'`）。
- **`36`**：在 Y 轴上的数值位置（例如 Y 轴范围是 0~100，标记点位于 Y=36 的高度）。
- **效果**：在 X 轴第 3 个类目（`'三月'`）与 Y 轴数值 36 的交叉点处，绘制一个 4×20 大小的矩形标记
柱状图文字太多不显示
优化 X 轴标签显示
若标签文字过长或过多，即使调整柱子间距仍可能显示不全，需进一步配置 axisLabel。
1. 强制显示所有标签（避免省略）
xAxis: {
axisLabel: {
interval: 0, // 强制显示所有标签（默认自动隐藏部分标签）
// 或使用 formatter 换行（适用于长标签）
formatter: function (value) {
return value.split('').join('\n'); // 按字符换行（示例）
// 或根据字数换行：return value.substr(0, 4) + '\n' + value.substr(4);
}
}
}
2. 旋转标签文字
通过 rotate 调整文字角度，避免重叠：
xAxis: {
axisLabel: {
rotate: 45, // 旋转角度（建议 30°~60°，避免垂直显示）
margin: 10 // 标签与轴的间距，防止被柱子遮挡
}
}
3. 自适应隐藏部分标签
若必须显示部分标签，可通过 interval 控制显示间隔（如每隔 N 个显示 1 个）：
xAxis: {
axisLabel: {
interval: 1 // 0=全部显示，1=隔 1 个显示 1 个，2=隔 2 个显示 1 个，依此类推
}
}
取消Y轴分割线
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
y轴上方标题
option = {
yAxis: {
name: '数量\n（个）', // 名称和单位分行
nameLocation: 'end',
nameGap: 5,
nameTextStyle: {
color: '#333', // 深色文本
align: 'left', // 左对齐
lineHeight: 16, // 行高控制间距
padding: [0, 0, 0, -8] // 往左偏移更多
},
// 其他配置...
},
// 其他配置...
};
设置柱状图间隔（象形图）
echart分组柱状图没数组不展示
// 原始数据源（模拟有缺失数据的场景）
let tufang = [100, 200, 150, 80, 70, 110, 10];
let qiaoliang = [100, 80, 90, 0, 60, 0, 150];
let suidao = [0, 90, 150, 80, 70, 0, 10];
let lumian = [0, 0, 10, 80, 70, 0, 0];
let jidian = [90, 190, 150, 0, 70, 0, 10];
const option = {
tooltip: {},
title: {
show: true,
text: '不符合常理的柱状图表实现',
textStyle: {
fontSize: 14,
lineHeight: 18,
width: 10
}
},
xAxis: [
{
type: 'category',
axisLabel: {
align: 'center',
hideOverlap: true
},
data: this.specificKeys
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
type: 'custom',
renderItem: function (params, api) {
return getRect(params, api);
},
data: tufang
},
{
type: 'custom',
renderItem: function (params, api) {
return getRect(params, api);
},
data: qiaoliang
},
{
type: 'custom',
renderItem: function (params, api) {
return getRect(params, api);
},
data: suidao
},
{
type: 'custom',
renderItem: function (params, api) {
return getRect(params, api);
},
data: lumian
},
{
type: 'custom',
renderItem: function (params, api) {
return getRect(params, api);
},
data: jidian
}
]
}
function getRect (params, api) {
let dataSeries = [
tufang,
qiaoliang,
suidao,
lumian,
jidian
]; // 确保这里有5个数据系列
const { seriesIndex } = params;
let categoryIndex = api.value(0); // x轴序列
let vald = api.value(1); // 数据值
// 如果数据为0，则不渲染柱子
if (vald === 0) {
return;
}
let start = api.coord([categoryIndex, vald]);
let height = api.size([0, vald]);
// 柱子宽度和间距
let barWidth = 30; // 单个柱子的固定宽度
let barGap = 3; // 柱子之间的间距
// 计算当前系列的偏移量
let xOffset = dataSeries.slice(0, seriesIndex).reduce((sum, currentSeries, index) => {
return sum + (currentSeries[categoryIndex] !== undefined && currentSeries[categoryIndex] !== 0 ? barWidth + barGap : 0);
}, 0);
// 计算当前系列的x位置
let x = start[0] - barWidth / 2 + xOffset - 10; // 柱子的中心位置 再减20是因为让其起点靠中间左边点
return {
type: 'rect',
shape: {
x: x, // 当前柱子的x位置
y: start[1],
width: barWidth,
height: height[1]
},
style: api.style()
};
}
option && this[myChart].setOption(option, true)
