Echarts简单使用

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

1.使用ECharts简单实现直方图

1. 为Echarts准备一个具备大小（宽高）的DOM

<div id="main" style="width:900px;height: 600px;"></div>

1. 初始化ECharts实例（echarts.init()）

//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));

1. setOption用指定数据绘图

myChart.setOption(option);

1. Option对象
   1. 标题：title
   2. 图例：legend
   3. X轴：xAxis
   4. 数据：series ( name，type和data) 1.工具箱：toolbox

	//指定图表的配置项和数据
			var option = {
				title:{
					text:'Echarts 入门示例'
				},
				toolbox:{
					show:true,
					feature:{
						//显示保存为图片
						saveAsImage:{
							show:true
						}
					}
				},
				//图例
				legend:{
					data:["销量"]
				},
				//X轴
				xAxis:{
					data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
				},
				//y轴
				yAxis:{},
				//数据
				series:[{
					name:"销量",
					type:'bar',
					data:[5,20,44,10,10,20]
				}],
			};

1. 画图结果查看

2.使用ECharts实现折线图

1. 方法与直方图类似，只需要将type='bar'改为type='line'

series:[{
					name:"销量",
					type:"bar",
					data:[5,20,44,10,10,20]
				},{
					name:"产量",
					type:"line",
					data:[7,30,24,10,10,20]
				}]

1. 结果显示如下

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