最近在工作过程中经常在Echarts官网的实例中进行可视化编辑,但是又只是简单了解一点点点点的前端代码,每次遇到需要修改字体等要求时都需要去百度查询修改方式,索性在此处记录下便于以后查找使用。
以Echarts官网中的柱状图为例:
链接: https://echarts.apache.org/examples/zh/editor.html?c=bar-gradient
// An highlighted block
var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
option = {
title: {
text: '特性示例:渐变色 阴影 点击缩放',
subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
},
xAxis: {
data: dataAxis,
axisLabel: {
interval:0,
rotate:-40,//此行与上一行作用在于使得X轴坐标倾斜,避免X轴坐标较多无法显示
inside: false,//本来是true,改为false后将图形中的字移到图形外边
textStyle: {
color: ''//修改坐标轴字体颜色
},
fontSize:15//调整坐标轴字体大小
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
},
fontSize:15//调整坐标轴字体大小
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{ // For shadow
type: 'bar',
itemStyle: {
color: 'rgba(0,0,0,0.05)'
},
barGap: '-100%',
barCategoryGap: '40%',
data: dataShadow,
animation: false
},
{
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#83bff6'},
{offset: 0.5, color: '#188df0'},
{offset: 1, color: '#188df0'}
]
)
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#2378f7'},
{offset: 0.7, color: '#2378f7'},
{offset: 1, color: '#83bff6'}
]
)
}
},
data: data,
label:{
show:true,
position:'top',
fontSize:15
}//此处label的作用是在柱状图的顶端显示该条的具体数值,显示位置可修改position参数
}
]
};
// Enable data zoom when user click bar.
var zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
type: 'dataZoom',
startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});
修改之前图形如下图所示:

修改之后图形如下图所示:

本文介绍如何在Echarts中调整图表字体大小、颜色及倾斜角度,并通过一个渐变色阴影点击缩放的柱状图实例,展示Echarts的高级特性与交互功能。
6万+

被折叠的 条评论
为什么被折叠?



