详细信息
标题
//标题组件,包含主标题和副标题。
let title = {
id:'',//组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件
show:true,//是否显示标题组件
text:'',//主标题文本,支持使用 \n 换行。
link:'',//主标题文本超链接
target:'',// 指定窗口打开主标题超链接。 'self' 当前窗口打开 'blank' 新窗口打开
textStyle:{
color:'#333',//主标题文字的颜色
fontStyle:'normal',//主标题文字字体的风格 'normal' 'italic' 'oblique'
fontWeight:'',//主标题文字字体的粗细
fontFamily:'',//主标题文字的字体系列
fontSize:18,//主标题文字的字体大小
lineHeight:18,//行高
width:'',//文字块的宽度。一般不用指定,不指定则自动是文字的宽度。
height:'',//文字块的高度。一般不用指定,不指定则自动是文字的高度。
textBorderColor:'transparent',//文字本身的描边颜色
textBorderWidth:10,//number 文字本身的描边宽度
textShadowColor:'transparent',//Color 文字本身的阴影颜色
textShadowBlur:10,//number 文字本身的阴影长度。
textShadowOffsetX:10,//number 文字本身的阴影 X 偏移。
textShadowOffsetY:10,//number 文字本身的阴影 Y 偏移
rich:{
// 在 rich 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。
}
},
subtext:'',//string 副标题文本,支持使用 \n 换行
sublink:'',//副标题文本超链接
subtarget:'',//指定窗口打开副标题超链接
subtextStyle:{},//副标题样式
textAlign:'auto',//整体(包括 text 和 subtext)的水平对齐 可选值:'auto'、'left'、'right'、'center'
textVerticalAlign:'',//整体(包括 text 和 subtext)的垂直对齐 可选值:'auto'、'top'、'bottom'、'middle'
triggerEvent:false,//是否触发事件
padding:5,//padding: 5 内边距为5 padding: [5, 10]设置上下的内边距为 5,左右的内边距为 10 padding:[5,10,5,10] //上右下左
itemGap:10,//主副标题之间的间距
zlevel:0,//zlevel用于 Canvas 分层
Z:2,//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低,而且不会创建新的 Canvas。
left:'auto',//title 组件离容器左侧的距离。 left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'
top:'auto',
right:'auto',
bottom:'auto',
backgroundColor:'transparent',//标题背景色,默认透明
borderColor:'#ccc',//标题的边框颜色
borderWidth:0,//标题的边框线宽
borderRadius:5,//圆角半径,单位px,支持传入数组分别指定 4 个圆角半径 borderRadius: 5, // 统一设置四个角的圆角大小 borderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)
shadowBlur:10,//图形阴影的模糊大小
shadowColor:'',//阴影颜色
shadowOffsetX:0,//阴影水平方向上的偏移距离
shadowOffsetY:0,//阴影垂直方向上的偏移距离
}
图例
let legend = {
type:'plain',//'plain':普通图例。缺省就是普通图例 'scroll':可滚动翻页的图例。当图例数量较多时可以使用。
orient:'horizontal',//图例列表的布局朝向 'horizontal' 'vertical'
align:'auto',//图例标记和文本的对齐 auto left right
itemGap:10,//图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
itemWidth:25,//图例标记的图形宽度
itemHeight:14,//图例标记的图形高度
symbolKeepAspect:true,//是否在缩放时保持该图形的长宽比
formatter:'Legend {name}',//用来格式化图例文本,支持字符串模板和回调函数两种形式 || 使用回调函数formatter: function (name) {return 'Legend ' + name;}
selectedMode:true,//图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false 关闭
textStyle:{},//图例的公用文本样式
icon:'',//图例项的 icon。标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
data:[],//图例的数据数组
}
直角坐标系内绘图网格
let grid = {
left:'10%',//grid 组件离容器左侧的距离
top:60,//
right:'',
bottom:'',
....
}
直角坐标系 grid 中的 x 轴
let xAxis = {
nameTextStyle:{},//坐标轴名称的文字样式
axisLine:{},//坐标轴轴线相关设置
axisTick:{},//坐标轴刻度相关设置
axisLabel:{},//坐标轴刻度标签的相关设置
splitLine:{},//坐标轴在 grid 区域中的分隔线
}
直角坐标系 grid 中的 y 轴
let yAxis = {
nameTextStyle:{},//坐标轴名称的文字样式
axisLine:{},//坐标轴轴线相关设置
axisTick:{},//坐标轴刻度相关设置
axisLabel:{},//坐标轴刻度标签的相关设置
splitLine:{},//坐标轴在 grid 区域中的分隔线
minInterval:1,//自动计算的坐标轴最小间隔大小 设置成1保证坐标轴分割刻度显示成整数
maxInterval:,//自动计算的坐标轴最大间隔大小 在时间轴((type: 'time'))可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天
}
折线图设置
let series = [
{
type:'line',
showSymbol:true,//是否显示 symbol
symbol:'emptyCircle',//拐点 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
symbolSize:4,//标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10;
hoverAnimation:true,//是否开启 hover 在拐点标志上的提示动画效果
step:true,//是否是阶梯线图。可以设置为 true 显示成阶梯线图,也支持设置成 'start', 'middle', 'end' 分别配置在当前点,当前点与下个点的中间点,下个点拐弯。
itemStyle:{},//折线拐点标志的样式
lineStyle:{ },//线条样式
areaStyle:{},//区域填充样式
emphasis:{},//图形的高亮样式
smooth:false,//如果是 boolean 类型,则表示是否开启平滑处理。如果是 number 类型(取值范围 0 到 1),表示平滑程度,越小表示越接近折线段,反之则反。设为 true 时相当于设为 0.5
data:[],//系列中的数据内容数组。数组项通常为具体的数据项
...
}
]
使用
<div id="myChart" :style="{width: '600px', height: '360px'}"></div>
<script>
let myChart = this.$echarts.init(document.getElementById('myChart'))
myChart.setOption({
title: {
text: '订单来源',
textStyle:{
color:'#333333',
fontWeight:'400',
fontSize:'18px'
}
},
grid: {
top: '10%',
left: '5%',
bottom: '10%',
right: '5%'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00',
'22:00', '24:00'
],
axisLine: {
lineStyle: {
color: '#EDEDED'
}
},
axisLabel: {
color: '#999999',
fontSize: '14px'
}
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisLabel: {
color: '#999999',
fontSize: '14px'
},
splitNumber: 8,
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
series: [{
name: '成交',
type: 'line',
smooth: true,
data: [0, 2, 3, 6, 5, 9, 14, 2, 3, 10, 2, 1, 0],
symbol: 'none',
lineStyle:{//线条样式
color:'#E5BC90'
}
}]
});
</script>