日常开发echarts实用笔记
1、强制显示所有x轴标签
有时候设置xAxis.axisLabel.interval: 0无效，需要设置为：
formatter: '{a|{value}}',
rich: {
a: {
width: 20,//比较小的数值即可
},
}2、手写默认tooltip
可以随意增加自定义的内容，比如：给所有数值后添加单位%
tooltip: {
formatter: function(params) {
var result = '<div>' + params[0].axisValue + '</div>';
params.forEach(function(item, index) {
result += '<span style="display:inline-block;margin-right:5px;margin-bottom:2px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
result += item.seriesName + "：" + item.data + "%<br>";
});
return result;
},
},3、柱子间虚线
js:
let sum1 = 0;//第一根柱子当前总值
let sum2 = 0;//第二根柱子当前总值option:
//两个柱子之间的虚线连线
for(let i = 0 ; i < datas.data.length ; i++) {
...
markLine: {
symbolSize:0,
data:[
[
{
xAxis: (function(){
sum1 += parseFloat(datas.data[i][0]);
return sum1
})(),
y: '36.5%'//第一根柱子下边缘，视具体情况而定
},
{
xAxis: (function(){
sum2 += parseFloat(datas.data[i][1]);
return sum2
})(),
y: '52%'//第二根柱子上边缘，视具体情况而定
}
],
]
}
}4、legend使用自定义图片
有三种方式设置自定义图片：
1）'image://' + url
2）'image://' + dataURI （图片的base64编码格式）
3）'path://' + 矢量路径 （使用SVG路径写法）
最常用第二种，一般都是使用设计师切给我的图片，如下。
option:
legend: {
itemWidth: 18,
itemHeight: 10,
itemGap: 20,
padding:0,
textStyle: {
color: '#333',
fontSize: 10,
},
data: [{
name: datas.legend[0],
icon: 'image://'+require('../../assets/finance/[email protected]'),
textStyle: {
padding: [0, 20, 0, 0]
},
}, {
name: datas.legend[2],
icon: 'image://'+require('../../assets/finance/red&[email protected]'),
}, {
name: datas.legend[1],
icon: 'image://'+require('../../assets/finance/[email protected]'),
}]
},5、渐变色的使用
在一些常见的设置颜色的情况都适用。如上图，有两处运用到了渐变色，一处是柱子，一处是红色折线下的背景。
1）柱子的渐变：
前三根柱子是黄色渐变，第四根是红色渐变。
option:
series: [{
...
type: 'bar',
itemStyle: {
normal: {
color: (item)=>{
if(item.dataIndex<3) {
return {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#F2EB00' //黄色1
}, {
offset: 1,
color: '#F29300' //黄色2
}],
globalCoord: false
}
}else {
return {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#FF6859' //红色1
}, {
offset: 1,
color: '#F2568E' //红色2
}],
globalCoord: false
}
}
},
barBorderRadius: [4, 4, 0, 0],
}
}
}]
2）折线下的渐变：
option:
series: [{
...
type: 'line',
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(245,24,65,0.12)' //同一个红色，透明度0.12
}, {
offset: 1,
color: 'rgba(245,24,65,0)' //同一个红色，透明度0
}],
globalCoord: false
}
},
}
}]