ECharts 学习笔计——折线图

// 1.加载相应的js文件

 <script src="echarts.min.js"></script>

// 2.创建需要放入的div

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

// 3.填写相应的代码

// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
	
        option = {
        	    title: {	// 图表标题
        	        text: '某楼盘销售情况',	// 大标题
        	        subtext: '纯属虚构'	// 二级标题
        	    },
        	    tooltip: {	// 提示框组建,鼠标停留时显示
        	        trigger: 'axis'
        	    },
        	    legend: {	// 图例组建
        	        data:['意向','预购','成交']
        	    },
        	    toolbox: {	// 工具栏
        	        show: true,
        	        feature: {
        	            magicType: {
        	            	show: true, 
        	            	type: ['bar', 'tiled']	// 切换显示图表
        	    		},
        	            saveAsImage: {show: true}	// 保存为图片
        	        }
        	    },
        	    xAxis: [{// // 直角坐标系 grid 中的 x 轴，最多可做出两个x轴
        	        type: 'category',
        	        boundaryGap: false,
        	        position : 'top',	// 默认为bottom
        	        data: ['周一','周二','周三','周四','周五','周六','周日']
        	    }],
        	    yAxis: [{	// 直角坐标系 grid 中的 y 轴，最多可做出两个y轴
        	        type: 'value'
        	    }],
        	    series: [{ // 系列列表，也就是数据图
        	        name: '成交',	
        	        type: 'line',// 图表类型
        	        smooth: true,	// 是否平滑曲线显示
					showAllSymbol : true, // 显示所有点
					symbol : 'circle', // 数据点的形状，默认为圆点
        	        data: [10, 12, 21, 54, 260, 830, 710],
        	        lineStyle:{
    	        		normal:{color : "blue"}
    	        	}
       	    	},{
        	        name: '预购',
        	        type: 'line',
        	        smooth: true,			
        	        data: [30, 182, 434, 791, 390, 30, 10]
       	    	},{
        	        name: '意向',
        	        type: 'line',
        	        smooth: true,
        	        data: [, ,601, 234, 120, 90, 20]
       	    	}]
        	};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

 其它相应的属性可查看API

 

// 如果想要动态附值数据，可以添加如下代码

myChart.setOption(option, true);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption({
     series: [{
     name: '意向',   // 必须和series的name属性相同
     data: [1,2,3,4,5]
    }]
});