echarts折线图

详细信息

标题

//标题组件，包含主标题和副标题。
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>