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>

时间： 2024-10-11 20:38:14

twogrid编写demo的相关文章

ActiveMQ（一）初步接触-编写Demo

声明 转载请注明出处! Reprint please indicate the source! http://www.hiknowledge.top/?p=86&preview=true 什么是JMS JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消息,进行异步通信.Java消息服务是一个与具体平台无关的API,绝大多数MOM提供商都对JMS提供支持. 引用自百

在线前端 JS 或 HTML 或 CSS 编写 Demo 处 JSbin 与 jsFiddle 比较

JSBin 该编辑器的特点是编写可直接编写 HTML.CSS.JavaScript 并且可以在 output 中实时观察编写效果:可设置自动运行 JavasScript 代码,其中最大的好处是有一个 console 调试框. JSFiddle 该编辑器的特点是编写可直接编写 HTML.CSS.JavaScript 但是要点击 Run 才能在 output 看到结果:有些特点的是他能引入外界的 库 或其它的各种库,支持前端框架,但并没有发现调试工具 console 之类. 原文地址:https:/

无限分级和tree结构数据增删改【提供Demo下载】

无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以下都是自己捣鼓的结果,非标准.谁有更好的设计望不吝啬赐教. 说来其实也简单,就是一个ID和父ID的关系. 以此类推,Id需要是唯一的,ParenId需要是Id列里面存在即可.这样我们就实现无限分级了,如果再加一列Sort排序就更完美了. jstree插件 官方地址:https://www.jstre

MQTT简单demo（java）

上次已经简单的谈了一些MQTT协议的一些知识,今天就来就上次的知识具体的Java实现. 现在就来具体说说实现这一步吧.中间的时间也是有点久. MQTT消息的发送和订阅都是依赖MQTT服务器的,没有MQTT服务器,你的客户端是无法订阅和发送消息的.所以在最开始的时候,可以选择性的在你的电脑上面安装一个MQTT服务器.MQTT服务器有很多,大家也可以在网上去找一些安装教程,这里因为和我要讲内容关系不大,所以不再累述. MQTT协议中是没有发送者和接收者·的概念,所有的连接都是用户,所以一个MQTT连

Spring Boot入门——集成Mybatis

步骤: 1.新建maven项目 2.在pom.xml文件中引入相关依赖 3.创建启动类App.java,添加自动扫描mapper 4.在application.properties文件中添加配置信息 5.编写demo测试类 6.编写mapper 7.编写service 8.编写Controller 9.使用PageHelper分页插件 10.获取自增长ID

工作小结(三)

了解整个编解码过程,编写demo将本地yuv视频通过编解码流程之后显示. 这是一个过渡任务,最开始是为了理清整个编解码过程,以及每个过程的重要函数.接着用来验证任务二(编解码类框架)的代码以及H265模块是否有问题.最后又结合任务二一起完成任务四的第一部分(为码流对比工具添加H265模块). 整个编解码的过程如下: 首先是数据采集,在这个步骤中主要设置参数以及设置回调函数write_video_frame(参数包括设备参数,视频源分辨率.回调函数的作用是对采集到的数据进行处理).接着就是设置编解

ldd3-2 构造和运行模块：Hello World模块笔记

实验环境: 按照之前的搭建方法,已经在Ubuntu 5.04版本上构建了linux原始的2.6.10版本内核树: GCC是用的安装镜像自带的版本: 一切准备就绪后对虚拟机做了快照,防止内核损坏: 因为Ubuntu 5.04虚拟机下编程很麻烦,所以编码和调试都不在虚拟机下运行了: 编辑在windows下运行,然后把代码文件通过Xftp传输到虚拟机里: 调试的话通过Xshell: 笔记基本是按照书上小结的标题来的,每个标题能做实验的就做实验,理论性的就小结一下,不易过多记忆,因为没代码实践,理论也理

Java中String类型的参数传递问题的解析

一.引入示例 public class StringAsParamOfMethodDemo { public static void main(String[] args) { StringAsParamOfMethodDemo sapm = new StringAsParamOfMethodDemo(); sapm.testA(); } private void testA() { String originalStr = "original"; System.out.println

深入浅出安卓学习相关知识，如何从零学好移动开发

原文发表自我的个人主页,欢迎大家访问 http://purplesword.info/mobile-develop 由于近几年来互联网的飞速发展,安卓和iOS平台的大量普及推广,移动开发在当前是非常热门的一个方向. 有不少同学问我如何学习安卓,要学些什么,难不难学.之前一直没有想好应该怎么回答这个问题,只是简单的说安卓自身门槛不高,并不难学.因为我觉得准确回答一个类似这样的问题往往需要灵感.现在根据我的学习体验,做个大概的总结. 1.我为什么学安卓 我从刚开始接触安卓开发到现在也有两三年的时间了