通用配置
1.标题 title
tooltip: {
show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
text: '主标题',//主标题文本，'\n'指定换行
link:'',//主标题文本超链接,默认值true
target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
subtext: '副标题',//副标题文本，'\n'指定换行
sublink: '',//副标题文本超链接
subtarget: null,//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
x:'center'//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
y: 'top',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
textAlign: null,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色(三原色加透明度)，默认'rgba(0,0,0,0)'透明
borderColor: '#ccc',//标题边框颜色,默认'#ccc'
borderWidth: 0,//标题边框线宽，单位px，默认为0（无边框）
padding: 5,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap: 10,//主副标题纵向间隔，单位px，默认为10
textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副标题文本样式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
z: 6,//二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
},
2.图例 legend
legend: {
show: true, //是否显示
type: "plain", // 图例的类型 'plain':普通图例 'scroll':可滚动翻页的图例
zlevel: 1, // 所有图形的 zlevel 值。
icon: "circle",
top: "5%", // bottom:"20%" // 组件离容器的距离
right: "5%", //left:"10%" // // 组件离容器的距离
width: "auto", // 图例组件的宽度
height: "auto", // 图例组件的高度
orient: "horizontal", // 图例列表的布局朝向。 'horizontal' 'vertical'
align: "auto", // 图例标记和文本的对齐
padding: 5, // 图例内边距
itemWidth: 6, // 图例标记的图形宽度。
itemGap: 20, // 图例每项之间的间隔。
itemHeight: 14, // 图例标记的图形高度。
symbolKeepAspect: true, // 如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。
formatter: function (name) {
return '{a|text}{a| }{b|' + name + '}'
},
selectedMode: true, // 图例选择的模式，
inactiveColor: "#ccc", // 图例关闭时的颜色。
textStyle: {
color: "#556677", // 文字的颜色。
fontStyle: "normal", // 文字字体的风格。
fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
fontFamily: "sans-serif", // 文字的字体系列。
fontSize: 12, // 文字的字体大小。
lineHeight: 20, // 行高。
backgroundColor: "transparent", // 文字块背景色。
borderColor: "transparent", // 文字块边框颜色。
borderWidth: 0, // 文字块边框宽度。
borderRadius: 0, // 文字块的圆角。
padding: 0, // 文字块的内边距
shadowColor: "transparent", // 文字块的背景阴影颜色
shadowBlur: 0, // 文字块的背景阴影长度。
shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
// width: 50, // 文字块的宽度。 默认
// height: 40, // 文字块的高度 默认
textBorderColor: "transparent", // 文字本身的描边颜色。
textBorderWidth: 0, // 文字本身的描边宽度。
textShadowColor: "transparent", // 文字本身的阴影颜色。
textShadowBlur: 0, // 文字本身的阴影长度。
textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
rich: {
a: {
color: "red",
lineHeight: 10,
},
b: {
color: "#fff",
lineHeight: 10,
},
}, // 自定富文本样式
},
},
3.坐标轴xAxis&yAxis
xAxis: {
//x坐标轴的类型,'value' 适用于连续数据,'category'适用于离散数据
type: 'category',
//准备x坐标轴的数据
data: ['2016','2017','2018', '2019', '2020', '2021', '2022'],
//配置坐标轴刻度
axisTick:{
show:false, //不显示
},
//配置坐标轴刻度标签的相关
axisLabel: {
interval:0,// 当文字过多时，可用设置间隔
textStyle: {
fontSize:'20', //字体大小
}
},
//配置坐标轴轴线
axisLine:{
lineStyle:{
color:'#ffffff', //字体颜色
},
},
},
yAxis: {
//y坐标轴的类型,'value' 适用于连续数据,'category'适用于离散数据
type: 'value',
//设置y坐标轴的最小值
min:0,
//设置y坐标的最大值
max:2500,
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize:'25',
}
},
//设置坐标轴每段的大小
interval: 500,
axisLine: {
lineStyle: {
color: '#ffffff',
width: 2
}
},
//设置坐标轴线
splitLine: {
show: true,
lineStyle: {
//rgba模式,设置线段的rbgba
color: ['rgba(255,255,255,0.4)']
}
},
},
4.grid
grid:{
id:'id' ,// 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
show: false ,// 是否显示直角坐标系网格。
zlevel: 0 ,// 所有图形的 zlevel 值。
z: 2 ,// 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
left: '10%' ,// grid 组件离容器左侧的距离。
top: 60 ,// grid 组件离容器上侧的距离。
right: '10%' ,// grid 组件离容器右侧的距离。
bottom: 60 ,// grid 组件离容器下侧的距离。
width: 'auto' ,// grid 组件的宽度。默认自适应。
height: 'auto' ,// grid 组件的高度。默认自适应。
containLabel: false ,// 详情请去看官网
backgroundColor: 'transparent' ,// 网格背景色，默认透明。
borderColor: '#ccc' ,// 网格的边框颜色。支持的颜色格式同 backgroundColor。
borderWidth: 1 ,// 网格的边框线宽。
shadowBlur: 10 ,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor:'#ccc' ,// 阴影颜色。支持的格式同color。
shadowOffsetX: 0 ,// 阴影水平方向上的偏移距离。
shadowOffsetY: 0 ,// 阴影垂直方向上的偏移距离。
tooltip: {
} ,// 组件
}
5.柱状图常用效果
backgroundColor:"#061e40",//设置的背景颜色
series: {
data: [1973, 2119, 1287, 1472, 1258, 1317, 1433],//准备好的数据
type: 'bar',
name:'销量',
showBackground: false,
barWidth: '20px', //柱体宽度
itemStyle: {
normal:{
barBorderRadius: [20, 20, 0, 0], //柱体圆角
color: new echarts.graphic.LinearGradient(
//四个值分别代表左上右下的渐变方式
//此处设置为上
0, 1, 0, 0, [{
//在0处，设置为初始的颜色
offset: 0,
color: '#14264f '
},
//在1处，设置为结束的颜色
{
offset: 1, //指100%处的颜色
color: '#61fbfc'
}
]
),
6.数值显示
label:{
show:true,
position:'top', //设置的位置
textStyle:{
color:'#1cd0c3', //文字的颜色
fontSize:18, //字体大小
fontWeight:'bold', //设置粗体
}
}
在官网的代码编辑的效果
官网完整效果
option = {
title: { // 标题设置
text: '数据展示', // 标题文字
textStyle: { // 标题文字样式设置
color: 'white'
},
borderWidth: 5, // 标题边框宽度
borderColor: '#60f8fa', // 标题边框颜色
borderRadius: 5, // 标题边框圆角
left: 50, // 标题距离左边的距离
top: 10 // 标题距离顶部的距离
},
legend: {
show: true, // 是否显示图例
top: 'auto' , // 距离容器侧边距离上方
//left:'auto', //距离容器侧边距离左侧
right:'auto', //距离容器侧边距离右侧
//bottom: 'auto', // 距离容器侧边距离下方
orient: 'horizontal', // 图例列表的布局朝向; horizontal; vertical
align: 'auto', // 图例标记和文本的对齐。默认自动
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap: 10, // 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 25, // 图例标记的图形宽度
itemHeight: 14, // 图例标记的图形高度// 使用字符串模板，模板变量为图例名称 {name}
textStyle:{
color:"#ffffff",
fontSize:20
},
formatter: function (name) { // 使用回调函数
return '参加的参数 ' + name;
},
},
xAxis: {
type: 'category',
data: ['2016','2017','2018', '2019', '2020', '2021', '2022'],
axisTick:{
show:false,
},
axisLabel: {
textStyle: {
fontSize:'20',
}
},
axisLine:{
lineStyle:{
color:'#ffffff',
},
},
},
yAxis: {
type: 'value',
min:0,
max:2500,
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize:'25',
}
},
interval: 500,
axisLine: {
lineStyle: {
color: '#ffffff',
width: 2
}
},
splitLine: {
show: true,
lineStyle: {
color: ['rgba(255,255,255,0.4)']
}
},
},
backgroundColor:"#061e40",
series: {
data: [1973, 2119, 1287, 1472, 1258, 1317, 1433],
type: 'bar',
name:'销量',
showBackground: false,
barWidth: '20px', //柱体宽度
itemStyle: {
normal:{
barBorderRadius: [20, 20, 0, 0], //柱体圆角
color: new echarts.graphic.LinearGradient(
//前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
//通过修改前4个参数，可以实现不同的渐变方向
/*第五个参数则是一个数组，用于配置颜色的渐变过程。
每项为一个对象，包含offset和color两个参数
*/
0, 1, 0, 0, [{//代表渐变色从正上方开始
offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
color: '#14264f '
}, //柱图渐变色
{
offset: 1, //指100%处的颜色
color: '#61fbfc'
}
]
),
label:{
show:true,
position:'top',
textStyle:{
color:'#1cd0c3',
fontSize:18,
fontWeight:'bold',
}
}
},
}
},
};
