Echarts常用图组件

2019独角兽企业重金招聘Python工程师标准>>>

1.标题负责显示整个图表的标题

1. Text:标题文字
2. SubText:子标题
3. Left,top,right,bottom标题位置
4. borderColor:边框颜色

title:{
	show:true,
	text:'Echarts 入门示例', //标题
	subtext:'学习ECharts',  //子标题
	left:'center',
	borderColor:'red',   //边框颜色
	borderWidth:1  //边框的宽度
    },

1. 更多属性设置

工具栏组件

1. 是否显示：show
2. 具体显示的功能：feature
3. 保存图片：saveAsImage
4. 还原：restore
5. dataView:数据视图
6. dataZoom:缩放视图
7. magicType:动态类型切换

toolbox:{
					show:true,
					
					feature:{
                        //如果我们需要改数据视图里面的样式可能就需要改optionToContent方法
						dataView:{
							show:true
						},
						restore:{
							show:true
						},
						dataZoom:{
							show:true
						},
						//显示保存为图片
						saveAsImage:{
							show:true
						},
						magicType:{
							type:['bar','line	']
						}
					}
				},

3.tooltip组件（弹窗组件）

1. 是否显示：show
2. 触发类型
   1. item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
   2. axis:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图标中使用

tooltip:{
            show:true,
	   trigger:'axis'
            },

4.标记线和标记点

1. 标记线：markline
   1. 标记线的添加
   2. 最大值，平均值，最小值的标记线
2. 标记点：markpoint

series:[{
					name:"销量",
					type:'bar',
					data:[5,20,44,10,10,20],
					markPoint:{
						data:[
							{type:'max',name:'最大值'},
							{type:'min',name:'最小值'}
						]
					},
					markLine:{
						data:[
							{type:'average',name:'平均线'}
						]
					}
				}],
			};

转载于:https://my.oschina.net/u/2968127/blog/824487