slides/custom/asset/ec-demo/chart-simple3.html - echarts-doc - Git at Google

 <html>
     <head>
         <meta charset="utf-8">
         <script src="../common/jquery.min.js"></script>
         <script src="../common/echarts.min.js"></script>
         <script src="../common/prettify/prettify.js"></script>
         <script src="../common/showCode.js"></script>
         <link rel="stylesheet" href="../common/reset.css">
         <link rel="stylesheet" href="../common/prettify/prettify.css">
         <script src="../common/perfect-scrollbar/0.6.8/js/perfect-scrollbar.min.js"></script>
         <link rel="stylesheet" href="../common/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css">
     </head>
     <body>

         <div id="main">
             <pre class="prettyprint">

 option = {
     grid: [{ // 直角坐标系
     }],
     xAxis: [{ // X 轴
         // 默认被上述 grid 使用
     }],
     yAxis: [{ // Y 轴
         // 默认被上述 grid 使用
     }],
     // 系列
     series: [{
         // 一条折线
         type: 'line',
         data: [...]
         // 默认在上述 grid 中
     }, {
         // 一组柱
         type: 'bar',
         data: [...]
         // 默认在上述 grid 中
     }, {
         // 一组散点
         type: 'scatter',
         data: [...]
         // 默认在上述 grid 中
     }]
 }


             </pre>
             <div id="chart"></div>
         </div>


         <script>

         data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];

         var dateList = data.map(function (item) {
             return item[0];
         });
         var lineValueList = data.map(function (item) {
             return item[1];
         });
         var barValueList = data.map(function (item) {
             return Math.max(0, item[1] - Math.round(Math.random() * 50));
         });
         var scatterValueList = data.map(function (item) {
             return Math.max(0, item[1] + Math.round(Math.random() * 60));
         });

         var option = {

             visualMap: [{
                 show: false,
                 type: 'continuous',
                 seriesIndex: 0,
                 min: 0,
                 max: 400
             }],

             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                     type: 'shadow'
                 },
                 textStyle: {
                     fontSize: 20
                 }
             },
             legend: {
                 data: ['line', 'bar', 'scatter'],
                 textStyle: {
                     color: '#eee',
                     fontSize: 20
                 }
             },
             xAxis: [{
                 axisLine: {
                     lineStyle: {color: '#bbb'}
                 },
                 axisLabel: {
                     textStyle: {
                         fontSize: 16
                     }
                 },
                 data: dateList
             }],
             yAxis: [{
                 axisLine: {
                     lineStyle: {color: '#bbb'}
                 },
                 axisLabel: {
                     textStyle: {
                         fontSize: 16
                     }
                 },
                 splitLine: {show: false}
             }],
             grid: [{
             }],
             series: [{
                 type: 'line',
                 name: 'line',
                 showSymbol: false,
                 data: lineValueList
             }, {
                 type: 'bar',
                 name: 'bar',
                 itemStyle: {
                     normal: {
                         color: '#496E83',
                         barBorderRadius: 6
                     }
                 },
                 data: barValueList
             }, {
                 type: 'scatter',
                 name: 'scatter',
                 itemStyle: {
                     normal: {
                         color: '#00990F'
                     }
                 },
                 data: scatterValueList
             }]
         };

         initShowCode(option, {showCode: true});

         </script>
     </body>
 </html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="../common/jquery.min.js"></script>
	<script src="../common/echarts.min.js"></script>
	<script src="../common/prettify/prettify.js"></script>
	<script src="../common/showCode.js"></script>
	<link rel="stylesheet" href="../common/reset.css">
	<link rel="stylesheet" href="../common/prettify/prettify.css">
	<script src="../common/perfect-scrollbar/0.6.8/js/perfect-scrollbar.min.js"></script>
	<link rel="stylesheet" href="../common/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css">
	</head>
	<body>

	<div id="main">
	<pre class="prettyprint">

	option = {
	grid: [{ // 直角坐标系
	}],
	xAxis: [{ // X 轴
	// 默认被上述 grid 使用
	}],
	yAxis: [{ // Y 轴
	// 默认被上述 grid 使用
	}],
	// 系列
	series: [{
	// 一条折线
	type: 'line',
	data: [...]
	// 默认在上述 grid 中
	}, {
	// 一组柱
	type: 'bar',
	data: [...]
	// 默认在上述 grid 中
	}, {
	// 一组散点
	type: 'scatter',
	data: [...]
	// 默认在上述 grid 中
	}]
	}


	</pre>
	<div id="chart"></div>
	</div>


	<script>

	data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];

	var dateList = data.map(function (item) {
	return item[0];
	});
	var lineValueList = data.map(function (item) {
	return item[1];
	});
	var barValueList = data.map(function (item) {
	return Math.max(0, item[1] - Math.round(Math.random() * 50));
	});
	var scatterValueList = data.map(function (item) {
	return Math.max(0, item[1] + Math.round(Math.random() * 60));
	});

	var option = {

	visualMap: [{
	show: false,
	type: 'continuous',
	seriesIndex: 0,
	min: 0,
	max: 400
	}],

	tooltip: {
	trigger: 'axis',
	axisPointer: {
	type: 'shadow'
	},
	textStyle: {
	fontSize: 20
	}
	},
	legend: {
	data: ['line', 'bar', 'scatter'],
	textStyle: {
	color: '#eee',
	fontSize: 20
	}
	},
	xAxis: [{
	axisLine: {
	lineStyle: {color: '#bbb'}
	},
	axisLabel: {
	textStyle: {
	fontSize: 16
	}
	},
	data: dateList
	}],
	yAxis: [{
	axisLine: {
	lineStyle: {color: '#bbb'}
	},
	axisLabel: {
	textStyle: {
	fontSize: 16
	}
	},
	splitLine: {show: false}
	}],
	grid: [{
	}],
	series: [{
	type: 'line',
	name: 'line',
	showSymbol: false,
	data: lineValueList
	}, {
	type: 'bar',
	name: 'bar',
	itemStyle: {
	normal: {
	color: '#496E83',
	barBorderRadius: 6
	}
	},
	data: barValueList
	}, {
	type: 'scatter',
	name: 'scatter',
	itemStyle: {
	normal: {
	color: '#00990F'
	}
	},
	data: scatterValueList
	}]
	};

	initShowCode(option, {showCode: true});

	</script>
	</body>
	</html>