title
{
text : '....',
textAlign : ''
left : [],
right : '...'
}
设置图表的标题
left
设置标题组件的对齐位置，取值：整数，百分比，位置名
right
设置标题组件的对齐位置，取值：整数，百分比，位置名
textAlign
用于设置标题文字相对于left设置的位置进行对齐
left:'center' 并不是将标题组件的位置设置为容器的中间心，而是中间线减去标签组件的一半的位置。
textAlign也是相对于这个位置进行对齐的，center就是，标题的中间和这位置对齐，所以会导致并不对齐，而使用left则会对齐。
tooltip
{
show : true,
textStyle : {
color : '#09f',
},
position : [ '50%', '20%'],
trigger : 'axis'
}
提示框组件
show
鼠标移入是否显示提示框组件
textStyle
提示框浮层的文本样式。
position
[ '50%', '20%']
一般不会自定义这个，因为提示框的位置是由表单自动计算出来的。
trigger
取值：
axis
坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
item
数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
legend
{
textStyle : {
},
itemStyle : {
},
icon : '',
data : [ '邮件营销' , '联盟广告'] // 定义图例文字
}
图例组件
legend.itemStyle 设置图例样式
legend.textStyle 设置图例文字样式
legend:icon 使用图标作为图例
toolbox
工具框组件
grid
{
show : true,
containLabel : true,
borderColor : '#09f'
}
x与 y 轴形成的网格区域配置项
left top right bottom
设置网格区域距离容器的距离，
containLabel
grid 区域是否包含坐标轴的刻度标签。
取值：boolean
show
是否显示直角坐标系网格。
borderColor
设置 grid 四条边线的颜色
xAxis
x轴相关配置
type
用于设置x 轴所表示的含义，
取值：
'category' 类目 默认的
'value' 值
boundaryGap
坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。布尔值 true 或 false
data
当 type 为 category 时，用于设置类目的数据
name
设置坐标轴名
nameRotate
设置坐标轴名 旋转角度
nameTextStyle
设置坐标轴名 样式
axisLabel
设置label样式
axisLabel.color 设置刻度标签颜色
axisLabel.rotate 设置刻度标签旋转角度
axisLabel.margin 刻度标签与轴线之间的距离。
splitLine
splitLine.show 显示分隔线(垂直的)
splitLine.lineStyle 设置分隔线的样式
axisLine
axisLine.lineStyle 坐标轴线线的颜色。
axisTick
axisTick.alignWithLabel 设置刻度线位置，取值： true 或 false
axisTick.show 显示或隐藏刻度线
yAxis
y轴相关配置
type
用于设置x 轴所表示的含义，
取值：
'category' 类目
'value' 值 默认的
boundaryGap
设置
data
当 type 为 category 时，用于设置类目的数据
series
所展示的数据项相关配置，以及使用什么样的图表进行展示。
data
设置所要显示的数据值
type
图表类型名
smooth
是否平滑曲线显示。
symbol
曲线上关键值点的形状。
取值：'circle','rect','roundRect','triangle','diamond','pin','arrow','none'
symbolSize
曲线上关键值点的 大小，不需要单位
lineStyle
线条样式。
areaStyle
区域填充样式。也就是曲线区域的样式。
name
影响 legend 与 tooltip 内显示的内容
stack
是否要进行数据的堆叠。数据堆叠主要实现的是累加总量的显示。
例如：
数据是单独每个月的销售记录，但不想展示每个月的对比，而显示累加总量的显示。
color
颜色取值
颜色值：
'red' '#f09' 'rgba(12,39,10, 7)'
渐变颜色
color:{
type:'linear', // 设置渐变类型
x:0,
y:0,
x2:0,
y2:1, // x y x2 y2 确定渐变方向
colorStops:[
{
offset:0, // 颜色的位置
color:'rgba(83,168,255,1)'
},
{
offset: 0.8, // 颜色的位置
color: 'rgba(89,154,255,0)'
}
],
global: false
}
柱状图
tooltip
{
trigger : 'item',
axisPointer: { // axisPointer 在 toolTip 里，并不是在 grid里的 toolTip
type : 'shadow' // 指示器样式(当前柱子的高亮样式) 取值： shadow 或 line
},
}
series
[{
data:[
2100,
{
name : 'xxx',
value : 1200,
itemStyle : { // 设置默认的效果
color : '#254963'
},
emphasis : { // 设置鼠标移入时的效果
itemStyle : {
color : '#254963'
}
},
toolTip : { // 用于设置当前柱状图提示框的样式。
extraCssText : 'opacity: 0'
}
} ,
1420
]
type,'bar
}]
data是一个数组，数组内可以是数据，也可以是对象，如果是对象可以单独修改柱子的样式
xAxis yAxis
{
axisLine : { // 设置轴线的样式
lineStyle : {
color : 'red'
}
},
splitLine : { // 设置分割线样式
lineStyle : {
color : 'red'
}
}
}
饼图
series
[{
radius:[内圆半径,外圆半径], // 圆环内外半径
center:[x,y] // 圆心位置
}]
数组内有几个对象就会产生几个饼图，通过radius控制大小，通过center控制位置
南丁格尔玫瑰图
tooltip
{
trigger:'item',
formatter:"{a}
{b} : {c} ({d}%)"
}
formatter格式说明：
{a} 表示提取 series 的系列名 点位模式
{b} 表示提取 series 内当前条目名 rose1
{c} 表示提取 series 内当前条目值 10
{d} 表示的是 当前条目值 / 整体值 比例
series
[{
name:'点位模式',
type : 'pie',
radius : [30, 110],
center : ["75%", "50%"],
roseType : "area",
data : [
{value : 10, name : 'rose1"'},
{value : 5, name : 'rose2"'},
{value : 15, name : 'rose3"'},
{value : 25, name : 'rose4"'},
{value : 20, name : 'rose5"'},
{value : 35, name : 'rose6"'},
{value : 30, name : 'rose7"'},
{value : 40, name : 'rose8"'}
],
label : {
show : true, // 设置是否显示文字
color : '#09f', // 设置文字的颜色
fontSize : 10, // 设置文字大小
},
labelLine : {
show : true, // 设置 边线的是否显示
length : 6, // 设置 边线1 长度
length2 : 8 // 设置 边线2 长度
}
}]
属性说明
name 图表的系列名
type 图表类型
radius 图表内外半径
center 图表中间位置
roseType 图表数据显示模式 radius(数据以半径长短进行显示) area(数据以面积进行显示)
拆线图
series
[
{
name : '...', // 如果 legend 里没有定义 data ，则使用这里的 name
data : []
type : 'line', // 拆线图
smooth : true // 平滑曲线
},
{
// ...
}
]
echarts图表重绘：
window.addEventListener('resize', function(){
myChart.resize()
})
文章来源
您阅读本篇文章共花了：
发表评论