柱状图:是一种通过柱形的长度来表现数据大小的一种常用图表类型。
ECharts最基本的代码结构:
引入js文件,DOM容器,初始化对象,设置option
有一种场景就是来表示未发生或正在发生但还没完结的数据,效果如下图:
option代码如下:
option.value = {
tooltip: {
trigger: 'item',
backgroundColor:'rgba(5, 56, 61,1)',
borderColor:'rgba(5, 56, 61,1)',
formatter: function(params, ticket, callback) {
let tip = `
<span style='font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;color: #fff;margin-left:5px;'>${params.name}</span>
<span style='font-size: 16px;margin-left:20px;font-family: Microsoft YaHei;font-weight: 400;color: #fff;'>${params.value}</span>`;
return tip;
}
},
xAxis: {
type: 'category',
data: ['2018年', '2019年', '2020年', '2021年', '2022年'],
nameTextStyle:{
color:'#A1AAA8',
fontSize:20,
},
axisTick: {
show: true
},
axisLabel: {
show: true,
color: '#A1AAA8',
fontSize:16
},
boundaryGap: true,
},
yAxis: {
nameLocation: 'start',
nameTextStyle: {
padding: [-20, 0, 0, -50],
fontSize: '14px',
color: '#A1AAA8'
},
type:'value',
axisLabel: {
color: '#A1AAA8',
},
splitLine: {
show: true,
lineStyle: {
color:'rgba(255,255,255,0.25)'
},
},
},
grid: {
x: 40,
y: 40,
// width:'100%'
right:10,
bottom:60,
top:80
},
series: [
{
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(10, 51, 53, 1)'
},
barWidth:20,
color:'',
data: [
{
value: 1.88,
itemStyle: {
decal: {
symbol: 'none'
}
}
},
{
value: 2.05,
itemStyle: {
decal: {
symbol: 'none'
}
}
},
{
value: 2,
itemStyle: {
decal: {
symbol: 'none'
}
}
},
{
value: 2.15,
itemStyle: {
decal: {
symbol: 'none'
}
}
},
2.5
],
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#30FAE9'}, //柱图渐变色
{offset: 1, color: '#152824'}, //柱图渐变色
]
)
},
],
//-------------------加斜线柱状图位置-------------------
aria:{
enabled:true,
decal:{
show: true,
decals: [
{
color: decalColor,
dashArrayX: [1, 0],
dashArrayY: [4, 3],
rotation: -Math.PI / 4
},
]
}
}
};
option.value && chartDom.value.setOption(option.value);
//-------------------自动轮播tooltip,xData-X轴数据-------------------
let timer = null;
var index2 = 0; //播放所在下标
if (timer) clearInterval(timer);
timer = setInterval(() => {
chartDom.value.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index2,
});
index2++;
if (index2 >= xData.length) {
index2 = 0;
}
}, 2000);
Echarts图表效果图模板 — Make A Pie