console 命令行工具 X clear

console

var mainChart;//Echrts对象
  //自适应宽高
    function myChartContainer () {
	
       
        document.getElementById("main").style.maxWidth = $(window).width() - 100  + "px";
    };
	myChartContainer();
    // 初始化图表
    mainChart = echarts.init(document.getElementById("main"));
    $(function(){
        //屏幕大小自适应，重置容器高宽
        myChartContainer();
        mainChart.resize();
		showMyChart();
    });
	
	 $(".btn-destroy").click(function () {
         showMyChart();
     });
	
    // 基于准备好的dom，初始化echarts实例
    mainChart.showLoading({text: '正在努力的读取数据中...'});
	function showMyChart() {
			mainChart.hideLoading();
	
			option = {
				color: ['#FF0000','#FFFF00',$("input[name='css']").val(),'#FF0000','#00FF00','#0000FF'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				toolbox: {
					feature: {
						dataView: {show: true, readOnly: false},
						magicType: {show: true, type: ['line', 'bar']},
						restore: {show: true},
						saveAsImage: {show: true}
					}
				},
				legend: {
					data:["点缺陷","画面异常","POL",'Goal','目标值','投入数']
				},
				xAxis: [
					{
						type: 'category',
						data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
						axisPointer: {
							type: 'shadow'
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						name: '单位：PPM',
						min: $("input[name='zmin']").val()*1,
						max: $("input[name='zmax']").val()*1,
						interval: $("input[name='onenum']").val()*1,
						axisLabel: {
							formatter: '{value}'
						}
					},
					{
						type: 'value',
						name: '单位：PCS',
						min: function(){
					      //右侧最大值*(左侧最大值除于左侧间隔值)
						  return 0 - $("input[name='max']").val()*1 * ($("input[name='zmax']").val()*1/$("input[name='onenum']").val()*1)   
						},
						max: function(){
						  return $("input[name='max']").val()*1;
						},
						interval: $("input[name='max']").val()*1,
						axisLabel: {
							formatter: '{value}'
						}
					}
				],
				series: [
					{
						name:'点缺陷',
						type:'bar',
						barWidth : 20,
						stack: '广告',
						data:[4, 5, 7, 11, 12,12,14,7,23,8,16,24]
					},
					{
						name:'画面异常',
						type:'bar',
						barWidth : 20,
						stack: '广告',
						data:[5, 6, 7, 8, 12,12,45,6,7,8,9,9]
					},
					{
						name:'POL',
						type:'bar',
						barWidth : 20,
						stack: '广告',
						data:[20, 49, 70, 22, 26,12,4,5,7,23,56,12]
					},
					{
						name:'Goal',
						type:'line',
						data:[,,,,40, 89, 80, 82, 82,94,70,112]
					},
					{
						name:'目标值',
						type:'line',
						lineStyle: {
							normal: {
								color: 'green',
								width: 4,
								type: 'dashed'
							}
						},
						data:[70, 79, 77, 80,88,99,123,100,97,87,96,99]
					},
					{
						name:'投入数',
						type:'line',
						yAxisIndex: 1,
						data:[$("input[name='max']").val()*1, 220, 330, 350,268,300,310,250,300,255, $("input[name='min']").val()*1]
					}
				]
			};
		    mainChart.setOption(option);
	}
	
	$(function () {
		$('.color-box').colpick({
			layout:'rgbhex',          // 颜色的格式
			//submit: true,           // 是否显示确认按钮
			//flat: true,             // 是否初始化的时候就显示
			//submitText: 'OK',       // 确认按钮文本
			//color: '#f33548',         // 默认颜色
			//colorScheme: 'dark',    // 主题
			
			onSubmit: function(hsb,hex,rgb,el) {
				$(el).css('background-color', '#'+hex);
				$(el).colpickHide();
				$("input[name='css']").val('#'+hex);
				showMyChart();
			}
		});
	});

<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.js"></script>
	<script type="text/javascript" src="http://8ep.cc/lib/colpick.js"></script>
	<link rel="stylesheet" href="http://8ep.cc/lib/css/colpick.css" type="text/css" />
	<style>
		.color-box {
		width: 150px;
		height: 50px;
		background: #ccc;
	   }
	</style>
</head>
<body style="overflow-x: hidden;">
   <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
   <table class="forms" style="table-layout: fixed; width: 99.8%;">
		<tr>
			<td class="right" style="word-break: break-all;border:none;">左侧最小值</td>
			<td>
				<input name="zmin" class="k-textbox" style="width: 80%;" value="0" maxlength="200"/>
			</td>
			<td class="right" style="word-break: break-all;border:none;">左侧间隔值</td>
			<td>
				<input name="onenum" class="k-textbox" style="width: 80%;" value="50" maxlength="200"/>
			</td>
			<td class="right" style="word-break: break-all;border:none;">左侧最大值</td>
			<td>
				<input name="zmax" class="k-textbox" style="width: 80%;" value="250" maxlength="200"/>
			</td>
		</tr>
		<tr>
			<td class="right" style="word-break: break-all;border:none;">右侧最小值</td>
			<td>
				<input name="min" class="k-textbox" style="width: 80%;" value="0" maxlength="200"/>
			</td>
			<td class="right" style="word-break: break-all;border:none;">右侧最大值</td>
			<td>
				<input name="max" class="k-textbox" style="width: 80%;" value="400" maxlength="200"/>
			</td>
			<input name="css" style="display: none">
		</tr>
		<tr>
			<td width="25%" class="center" align="center" colspan="6">
				<input type="submit" style="display: none" id="submitForm">
				<button style="width:8%;border: none;align-content: center" class="btn-destroy" type="button">搜索</button>
			</td>
		</tr>
	</table>
     <table style="table-layout: fixed; width: 99.8%;">
		   <div class="color-box">颜色选择器</div>
           <div id="main" style="width:100%;height:500px"></div>
	</table>
</body>

.btn-destroy {
		background-color: #00bfff;
		border:1px #00bfff solid;
	}