eCharts的样式配置
{// series的类型，如'line'、'bar'、'pie'、'scatter'等
type: 'line', //line表示折线图 bar表示柱状图 pie表示饼图 scatter表示散点图
// series的名称，用于tooltip的显示，legend的图例筛选等
name: '数据系列1',
// series的数据，可以是数组，也可以是函数，详见下面的data配置项
data: [1, 2, 3, 4, 5],
// series的样式配置，如颜色、线条粗细、图形类型等
itemStyle: {
color: '#ff4c4c', // 线条颜色
borderWidth: 2, // 线条粗细
borderType: 'solid', // 线条类型
borderColor: '#fff', // 线条颜色
lineStyle: {
type: 'solid', // 线条类型
width: 2, // 线条粗细
color: '#ff4c4c' // 线条颜色
},
areaStyle: {
color: '#ff4c4c' // 填充颜色
},
symbol: 'circle', // 点的形状
symbolSize: 10 // 点的大小
},
// series的标签配置，如显示文本、文本位置、文本样式等
label: {
show: true, // 是否显示标签
position: 'top', // 标签位置，如'top'、'bottom'、'left'、'right'等
formatter: '{c}', // 标签文本格式化字符串，支持'{a}'、'{b}'、'{c}'等变量
color: '#666', // 标签颜色
fontWeight: 'bold', // 标签字体粗细
fontFamily: 'Arial', // 标签字体
fontSize: 16 // 标签字号
},
// series的标记配置，如显示点、点的样式、点的大小等
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
],
symbol: 'circle', // 点的形状
symbolSize: 10, // 点的大小
label: {
show: true, // 是否显示标签
color: '#666', // 标签颜色
fontWeight: 'bold', // 标签字体粗细
fontFamily: 'Arial', // 标签字体
fontSize: 16 // 标签字号
}
},
// series的动画配置，如动画类型、动画时长、动画延迟等
animation: {
type: 'scale', // 动画类型，如'scale'、'fadeIn'、'explode'等
duration: 1000, // 动画时长，单位为ms
delay: 0, // 动画延迟，单位为ms
easing: 'cubicOut' // 动画缓动函数，如'linear'、'easeIn'、'cubicOut'等
},
// series的其他配置，如是否开启平滑曲线、是否开启渐变色等
smooth: false, // 是否开启平滑曲线
gradient: { // 是否开启渐变色
type: 'linear', // 渐变类型，如'linear'、'radial'等
colorStops: [{ offset: 0, color: '#ff4c4c' }, { offset: 1, color: '#fff' }], // 渐变颜色
global: false // 是否全局开启渐变色
} }
折线图
{
// series的类型，折线图为'line'
type: 'line',
// series的名称，用于tooltip的显示，legend的图例筛选等
name: '数据系列1',
// series的数据，可以是数组，也可以是函数
data: [1, 2, 3, 4, 5],
// series的样式配置
itemStyle: {
color: '#ff4c4c', // 线条颜色
borderWidth: 2, // 线条粗细
borderType: 'solid', // 线条类型
borderColor: '#fff', // 线条颜色
lineStyle: {
type: 'solid', // 线条类型
width: 2, // 线条粗细
color: '#ff4c4c' // 线条颜色
},
areaStyle: {
color: '#ff4c4c' // 填充颜色
},
symbol: 'circle', // 点的形状
symbolSize: 10 // 点的大小
},
// series的标签配置
label: {
show: true, // 是否显示标签
position: 'top', // 标签位置
formatter: '{c}', // 标签文本格式化字符串
color: '#666', // 标签颜色
fontWeight: 'bold', // 标签字体粗细
fontFamily: 'Arial', // 标签字体
fontSize: 16 // 标签字号
},
// series的标记配置
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
],
symbol: 'circle', // 点的形状
symbolSize: 10, // 点的大小
label: {
show: true, // 是否显示标签
color: '#666', // 标签颜色
fontWeight: 'bold', // 标签字体粗细
fontFamily: 'Arial', // 标签字体
fontSize: 16 // 标签字号
}
},
// series的动画配置
animation: {
type: 'scale', // 动画类型
duration: 1000, // 动画时长，单位为ms
delay: 0, // 动画延迟，单位为ms
easing: 'cubicOut' // 动画缓动函数
},
// 折线图特有的配置项
// 是否平滑显示
smooth: false,
// 是否显示面积图
areaStyle: {
color: '#ff4c4c'
},
// 是否显示符号
showSymbol: true,
// 符号的类型
symbol: 'circle',
// 符号的大小
symbolSize: 4,
// 是否连接空数据
connectNulls: false,
// 是否折叠重叠的数据
stack: null,
// 显示数据的小数位数
precision: 2,
// 是否开启大规模数据优化模式
large: false,
// 大规模数据优化模式下的阈值
largeThreshold: 2000,
// 是否开启平滑平移
smoothMonotone: null,
// 是否裁剪超出坐标系范围的图形
clipOverflow: true,
// 是否启用图例 hover 时的联动高亮
legendHoverLink: true,
// 是否启用图表 hover 时的联动高亮
hoverAnimation: true,
// 高亮时的样式
emphasis: {},
// 选中时的样式
selectedMode: false,
selected: {},
// 地图特有的配置项
coordinateSystem: 'cartesian2d',
xAxisIndex: 0,
yAxisIndex: 0,
polarIndex: 0,
geoIndex: 0,
calendarIndex: 0,
// 自定义系列
seriesLayoutBy: 'column',
datasetIndex: 0,
encode: {},
// 数据过滤器
dataFilter: null,
// 数据操作器
dataProcessor: null,
// 数据预处理
dataPreprocessor: null
}
柱状态
{
// series的类型，柱状图为'bar'
type: 'bar',
// series的名称，用于tooltip的显示，legend的图例筛选等
name: '数据系列1',
// series的数据，可以是数组，也可以是函数
data: [1, 2, 3, 4, 5],
// series的样式配置
itemStyle: {
color: '#ff4c4c', // 柱子颜色
borderWidth: 2, // 边框粗细
borderType: 'solid', // 边框类型
borderColor: '#fff', // 边框颜色
barBorderRadius: 0, // 柱子圆角半径
shadowBlur: 0, // 阴影模糊度
shadowColor: '#000', // 阴影颜色
shadowOffsetX: 0, // 阴影水平偏移
shadowOffsetY: 0 // 阴影垂直偏移
},
// series的标签配置
label: {
show: true, // 是否显示标签
position: 'top', // 标签位置
formatter: '{c}', // 标签文本格式化字符串
color: '#666', // 标签颜色
fontWeight: 'bold', // 标签字体粗细
fontFamily: 'Arial', // 标签字体
fontSize: 16 // 标签字号
},
// series的标记配置
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
],
symbol: 'circle', // 点的形状
symbolSize: 10, // 点的大小
label: {
show: true, // 是否显示标签
color: '#666', // 标签颜色
fontWeight: 'bold', // 标签字体粗细
fontFamily: 'Arial', // 标签字体
fontSize: 16 // 标签字号
}
},
// series的动画配置
animation: {
type: 'scale', // 动画类型
duration: 1000, // 动画时长，单位为ms
delay: 0, // 动画延迟，单位为ms
easing: '
饼状图
series: {
type: 'pie', // 图表类型，必选项
id: 'pie', // 组件 ID
name: '', // 数据列名称
legendHoverLink: true, // 是否启用图例 hover(悬停)时的联动高亮
hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果
hoverOffset: 10, // 鼠标悬停在扇区上时的偏移量
selectedMode: false, // 是否开启选中模式
selectedOffset: 10, // 选中扇区的偏移量
clockwise: true, // 是否顺时针排布扇区
startAngle: 90, // 起始角度，支持范围[0, 360]
minAngle: 0, // 最小角度，支持范围[0, 360]
minShowLabelAngle: 0, // 低于此角度（包括此角度）时不显示标签
roseType: false, // 是否启用南丁格尔图模式（通过半径表示数据大小）
avoidLabelOverlap: true, // 是否启用标签重叠避免策略
stillShowZeroSum: true, // 数据和为 0 时是否仍显示扇区
label: { // 饼图图形上的文本标签
show: true, // 是否显示标签
position: 'outer', // 标签位置，可选项：'outer'，'inner'，'center'
formatter: null, // 标签内容格式器
textStyle: {
fontSize: 12, // 字体大小
fontWeight: 'normal', // 字体粗细
color: '#333' // 字体颜色
},
alignTo: 'none', // 标签对齐方式，可选项：'none'，'labelLine'，'edge'
margin: 8, // 文本标签与图形元素的间距
bleedMargin: 0, // 边缘处文本标签的溢出间距
padding: 0, // 文本标签的内边距
silent: false // 是否取消标签鼠标响应事件
},
labelLine: { // 标签的视觉引导线样式
show: true, // 是否显示视觉引导线
length: 20, // 视觉引导线的长度
length2: 5, // 视觉引导线第二段的长度
smooth: false, // 是否平滑曲线显示
lineStyle: {
width: 1, // 引导线宽度
type: 'solid', // 引导线类型
color: '#333' // 引导线颜色
}
},
itemStyle: { // 扇区的样式
borderWidth: 0, // 扇区边框宽度
borderColor: '#fff', // 扇区边框颜色
borderType: 'solid', // 扇区边框类型
shadowBlur: 0, // 扇区阴影大小
shadowOffsetX: 0, // 扇区阴影 X 偏移量
shadowOffsetY: 0, // 扇区阴影 Y 偏移量
shadowColor: 'rgba(0, 0, 0, 0)', // 扇区阴影颜色
opacity: 1 // 扇区透明度
},
emphasis: { // 高亮样式
scale: true, // 是否启用缩放动画效果
scaleSize: 10, // 高亮时扇区的放大尺寸
label: { // 高亮时的标签样式
show: true, // 是否显示标签
position: 'outer', // 标签位置，可选项：'outer'，'inner'，'center'
formatter: null, // 标签内容格式器
textStyle: {
fontSize: 12, // 字体大小
fontWeight: 'normal', // 字体粗细
color: '#333' // 字体颜色
}
},
labelLine: { // 高亮时的标签视觉引导线样式
show: true, // 是否显示视觉引导线
length: 20, // 视觉引导线的长度
length2: 5, // 视觉引导线第二段的长度
smooth: false, // 是否平滑曲线显示
lineStyle: {
width: 1, // 引导线宽度
type: 'solid', // 引导线类型
color: '#333' // 引导线颜色
}
},
itemStyle: { // 高亮时的扇区样式
borderWidth: 0, // 扇区边框宽度
borderColor: '#fff', // 扇区边框颜色
borderType: 'solid', // 扇区边框类型
shadowBlur: 0, // 扇区阴影大小
shadowOffsetX: 0, // 扇区阴影 X 偏移量
shadowOffsetY: 0, // 扇区阴影 Y 偏移量
shadowColor: 'rgba(0, 0, 0, 0)', // 扇区阴影颜色
opacity: 1 // 扇区透明度
}
},
data: [] // 饼图数据
}
单独设置不同扇区的颜色
data: [{
value: 40,
name: '襄州区',
// 设置扇形的颜色
itemStyle: {
color: 'red'
},
// 设置文字的颜色
label: {
color: 'red'
}
},
{
value: 22,
name: '高新技术产业开发区',
itemStyle: {
color: 'green'
},
label: {
color: 'green'
}
},
{
value: 33,
name: '襄城区',
itemStyle: {
color: 'yellow'
},
label: {
color: 'yellow'
}
},
{
value: 28,
name: '樊城区',
itemStyle: {
color: 'blue'
},
label: {
color: 'blue'
}
},
{
value: 20,
name: '鱼梁洲经济开发区',
itemStyle: {
color: 'pink'
},
label: {
color: 'pink'
}
}
]
}]