twogrid编写demo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta charset="utf-8"> <title>广兰路电压模拟量显示</title> <!-- 引入 echarts.js --> <script src="js/echarts.common.min.js"></script> <script src="js/jquery-1.8.3.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:600px;margin:0 auto"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var timeData = ['5-21', '5-22', '5-23', '5-24', '5-25', '5-26', '5-27', '5-28', '5-29', '5-30','5-31','6-1', '6-2', '6-3', '6-4', '6-5', '6-6', '6-7', '6-8', '6-9', '6-10', '6-11', '6-12', '6-13']; //timeData = timeData.map(function (str) { // return str.replace('2009/', ''); //}); option = { title: { bottom:5, text: '用户反馈数据表', x: 'center' }, tooltip: {//tooltip是提示框组件，在该组件下可以配置与提示框有关的信息 trigger: 'axis',//trigger代表触发类型，可选'item','axis','none',分别代表数据项图形触发；坐标轴触发；什么都不触发 axisPointer: {//坐标轴指示器配置项 type:'cross',//指示器的类型，可选：'line','shadow','cross'。分别表示：直线指示器；阴影指示器；十字准星指示器（表示启用两个正交的轴） // animation: false } }, legend: {//图例组件 //图例的数据数组 data:['用户排名','关注排名','汽车之家用户评分','XX网用户评分','YY网用户评分'], // x: 'left' }, dataZoom: [//dataZoom组件用于区域缩放，位于grid容器的最下方，专门用于区域的缩放 { show: true, realtime: true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。 start: 40,//数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。 end: 70, xAxisIndex: [0, 1] }, { type: 'inside', realtime: true, start: 30, end: 70, xAxisIndex: [0, 1]// 表示这个 dataZoom 组件控制 第一个 和 第二个 xAxis } ], grid: [//在 ECharts 3 中可以存在任意个 grid 组件。 { left: 50,//grid 组件离容器左侧的距离,left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。 right: 50, height: '35%' }, { left: 50, right: 50, top: '55%',//grid 组件离容器上侧的距离 height: '35%' }], xAxis : [// { type : 'category',//坐标轴类型,可为'value'，'category'，'time'等，分别表示数值轴；类目轴（必须通过data设置类目数据）;时间轴 boundaryGap : false,//此处设置为false,影响第一个和左后一个数据点的显示,坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。 axisLine: {onZero: true},//具体效果不清楚,坐标轴轴线相关设置,X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。 data: timeData }, { gridIndex: 1, type : 'category', boundaryGap : true, axisLine: {onZero: true}, data: timeData, position: 'top'//x 轴的位置。可选'top','bottom'.默认第一个在下方，第二个需要设置. } ], yAxis : [ { name : '用户排名',//坐标轴名称。 type : 'value',//坐标轴类型，数值轴 min:60,//坐标轴刻度最小值 }, { gridIndex: 0,//y 轴所在的 grid 的索引，默认值是0,表示位于第一个 grid. name : '关注排名', type : 'value', //position:'left',//默认 grid 中的第一个 y 轴在 grid 的左侧（'left'），第二个 y 轴视第一个 y 轴的位置放在另一侧 min:0, max:10 }, { gridIndex: 1,//'1'代表位于第二个grid name : '用户评分', type : 'value', min:4, max:5 } ], series : [ { name:'用户排名', type:'line', symbolSize: 8,//标记的大小,即圆圈的大小 hoverAnimation: false,//是否开启 hover 在拐点标志上的提示动画效果 data:[ 67,68,67,68,69,70,71,72,73,72,70,71,70,69,68,67,67,66,65,65,66,68,70,71 ] }, { name:'关注排名', type:'line', symbolSize: 8, yAxisIndex:1, xAxisIndex:0, hoverAnimation: false, data: [ 1,1,1,2,1,1,1,1,2,3,4,3,2,1,2,3,4,5,4,3,2,1,2,3 ] }, { name:'汽车之家用户评分', type:'bar', xAxisIndex: 1, yAxisIndex: 2, data:[ 4.5,4.4,4.5,4.6,4.8, 4.5,4.4,4.5,4.6,4.8, 4.5,4.4,4.5,4.6,4.8, 4.5,4.4,4.5,4.6,4.8, 4.5,4.4,4.5,4.6,4.4 ] }, { name:'XX网用户评分', type:'bar', xAxisIndex: 1, yAxisIndex: 2, data:[ 4.5,4.5,4.5,4.8,4.8, 4.5,4.4,4.7,4.6,4.8, 4.2,4.4,4.5,4.6,4.8, 4.5,4.4,4.5,4.1,4.7, 4.6,4.4,4.9,4.2,4.4 ] }, { name:'YY网用户评分', type:'bar', xAxisIndex: 1, yAxisIndex: 2, data:[ 4.5,4.2,4.5,4.6,4.1, 4.5,4.4,4.5,4.3,4.8, 4.5,4.4,4.5,4.6,4.8, 4.5,4.3,4.5,4.6,4.1, 4.5,4.4,4.9,4.4,4.4 ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <meta charset="utf-8"> <title>广兰路电压模拟量显示</title> <!-- 引入 echarts.js --> <script src="js/echarts.common.min.js"></script> <script src="js/jquery-1.8.3.js"></script></head><body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:600px;margin:0 auto"></div>
<script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var timeData = ['5-21', '5-22', '5-23', '5-24', '5-25', '5-26', '5-27', '5-28', '5-29', '5-30','5-31','6-1', '6-2', '6-3', '6-4', '6-5', '6-6', '6-7', '6-8', '6-9', '6-10', '6-11', '6-12', '6-13'];
//timeData = timeData.map(function (str) {// return str.replace('2009/', '');//});
option = { title: { bottom:5, text: '用户反馈数据表', x: 'center' }, tooltip: {//tooltip是提示框组件，在该组件下可以配置与提示框有关的信息 trigger: 'axis',//trigger代表触发类型，可选'item','axis','none',分别代表数据项图形触发；坐标轴触发；什么都不触发 axisPointer: {//坐标轴指示器配置项 type:'cross',//指示器的类型，可选：'line','shadow','cross'。分别表示：直线指示器；阴影指示器；十字准星指示器（表示启用两个正交的轴） // animation: false } }, legend: {//图例组件 //图例的数据数组 data:['用户排名','关注排名','汽车之家用户评分','XX网用户评分','YY网用户评分'], // x: 'left' }, dataZoom: [//dataZoom组件用于区域缩放，位于grid容器的最下方，专门用于区域的缩放 { show: true, realtime: true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。 start: 40,//数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。 end: 70, xAxisIndex: [0, 1] }, { type: 'inside', realtime: true, start: 30, end: 70, xAxisIndex: [0, 1]// 表示这个 dataZoom 组件控制 第一个 和 第二个 xAxis } ], grid: [//在 ECharts 3 中可以存在任意个 grid 组件。 { left: 50,//grid 组件离容器左侧的距离,left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。 right: 50, height: '35%' }, { left: 50, right: 50, top: '55%',//grid 组件离容器上侧的距离 height: '35%' }], xAxis : [// { type : 'category',//坐标轴类型,可为'value'，'category'，'time'等，分别表示数值轴；类目轴（必须通过data设置类目数据）;时间轴 boundaryGap : false,//此处设置为false,影响第一个和左后一个数据点的显示,坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。 axisLine: {onZero: true},//具体效果不清楚,坐标轴轴线相关设置,X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。 data: timeData }, { gridIndex: 1, type : 'category', boundaryGap : true, axisLine: {onZero: true}, data: timeData, position: 'top'//x 轴的位置。可选'top','bottom'.默认第一个在下方，第二个需要设置. } ], yAxis : [ { name : '用户排名',//坐标轴名称。 type : 'value',//坐标轴类型，数值轴 min:60,//坐标轴刻度最小值 }, { gridIndex: 0,//y 轴所在的 grid 的索引，默认值是0,表示位于第一个 grid. name : '关注排名', type : 'value', //position:'left',//默认 grid 中的第一个 y 轴在 grid 的左侧（'left'），第二个 y 轴视第一个 y 轴的位置放在另一侧 min:0, max:10 }, { gridIndex: 1,//'1'代表位于第二个grid name : '用户评分', type : 'value', min:4, max:5 } ], series : [ { name:'用户排名', type:'line', symbolSize: 8,//标记的大小,即圆圈的大小 hoverAnimation: false,//是否开启 hover 在拐点标志上的提示动画效果 data:[ 67,68,67,68,69,70,71,72,73,72,70,71,70,69,68,67,67,66,65,65,66,68,70,71 ] }, { name:'关注排名', type:'line', symbolSize: 8, yAxisIndex:1, xAxisIndex:0, hoverAnimation: false, data: [ 1,1,1,2,1,1,1,1,2,3,4,3,2,1,2,3,4,5,4,3,2,1,2,3 ] }, { name:'汽车之家用户评分', type:'bar', xAxisIndex: 1, yAxisIndex: 2, data:[ 4.5,4.4,4.5,4.6,4.8, 4.5,4.4,4.5,4.6,4.8, 4.5,4.4,4.5,4.6,4.8, 4.5,4.4,4.5,4.6,4.8, 4.5,4.4,4.5,4.6,4.4 ] }, { name:'XX网用户评分', type:'bar', xAxisIndex: 1, yAxisIndex: 2, data:[ 4.5,4.5,4.5,4.8,4.8, 4.5,4.4,4.7,4.6,4.8, 4.2,4.4,4.5,4.6,4.8, 4.5,4.4,4.5,4.1,4.7, 4.6,4.4,4.9,4.2,4.4 ] }, { name:'YY网用户评分', type:'bar', xAxisIndex: 1, yAxisIndex: 2, data:[ 4.5,4.2,4.5,4.6,4.1, 4.5,4.4,4.5,4.3,4.8, 4.5,4.4,4.5,4.6,4.8, 4.5,4.3,4.5,4.6,4.1, 4.5,4.4,4.9,4.4,4.4 ] } ]}; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body></html>
