echarts单个实例包含多个grid,标题分别居中

一、实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单个实例包含多个grid,标题分别居中</title>
</head>
<body>
    <!-- 创建一个具备一定宽高的DOM容器 -->
    <div id=‘main‘ style=‘width:600px;height:600px‘></div>
    <script type="text/javascript" src=‘./echarts.js‘></script>
    <script>
        //基于创建好的DOM,初始化一个echarts实例
        var myChart = echarts.init(document.getElementById(‘main‘));
        //指定图表的配置项和数据
        var titles = [‘气温变化‘,‘空气质量指数‘,‘C‘,‘D‘];
        var dataAll = [
            [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
            ],
            [
                [10.0, 9.14],
                [8.0, 8.14],
                [13.0, 8.74],
                [9.0, 8.77],
                [11.0, 9.26],
                [14.0, 8.10],
                [6.0, 6.13],
                [4.0, 3.10],
                [12.0, 9.13],
                [7.0, 7.26],
                [5.0, 4.74]
            ],
            [
                [10.0, 7.46],
                [8.0, 6.77],
                [13.0, 12.74],
                [9.0, 7.11],
                [11.0, 7.81],
                [14.0, 8.84],
                [6.0, 6.08],
                [4.0, 5.39],
                [12.0, 8.15],
                [7.0, 6.42],
                [5.0, 5.73]
            ],
            [
                [8.0, 6.58],
                [8.0, 5.76],
                [8.0, 7.71],
                [8.0, 8.84],
                [8.0, 8.47],
                [8.0, 7.04],
                [8.0, 5.25],
                [19.0, 12.50],
                [8.0, 5.56],
                [8.0, 7.91],
                [8.0, 6.89]
            ]
        ];
        var markLineOpt = {
            animation:false,
            //图形上的文本标签
            label:{
                normal:{
                    formatter:‘y=0.5*x+3‘,
                    textStyle:{
                        align:‘right‘
                    }
                }
            },
            lineStyle:{
                normal:{
                    type:‘solid‘
                }
            },
            tooltip:{
                formatter:‘y=0.5*x+3‘
            },
            data:[[{
                //起点或终点的坐标
                coord:[0,3],
                symbol:‘none‘
            },{
                coord:[20,13],
                symbol:‘none‘
            }]]
        }
        var option = {
                        //分别设置标题居中主要代码
            title:[
                {
                    text:titles[0],
                    left:‘25%‘,
                    top:‘1%‘,
                    textAlign:‘center‘
                },
                {
                    text:titles[1],
                    left:‘73%‘,
                    top:‘1%‘,
                    textAlign:‘center‘
                },
                {
                    text:titles[2],
                    left:‘25%‘,
                    top:‘50%‘,
                    textAlign:‘center‘
                },
                {
                    text:titles[3],
                    left:‘73%‘,
                    top:‘50%‘,
                    textAlign:‘center‘
                }

            ],
            grid:[
                {x:‘7%‘,y:‘7%‘,width:‘38%‘,height:‘38%‘},
                {x2:‘7%‘,y:‘7%‘,width:‘38%‘,height:‘38%‘},
                {x:‘7%‘,y2:‘7%‘,width:‘38%‘,height:‘38%‘},
                {x2:‘7%‘,y2:‘7%‘,width:‘38%‘,height:‘38%‘}
            ],
            tooltip:{
                formatter:‘Group {a}:({c})‘
            },
            xAxis:[
                {gridIndex:0,min:0,max:20},
                {gridIndex:1,min:0,max:20},
                {gridIndex:2,min:0,max:20},
                {gridIndex:3,min:0,max:20}
            ],
            yAxis:[
                {gridIndex:0,min:0,max:15},
                {gridIndex:1,min:0,max:15},
                {gridIndex:2,min:0,max:15},
                {gridIndex:3,min:0,max:15}
            ],
            series:[
                {
                    name:‘I‘,
                    type:‘scatter‘,
                    xAxisIndex:0,
                    yAxisIndex:0,
                    data:dataAll[0],
                    markLine:markLineOpt
                },
                {
                    name:‘II‘,
                    type:‘scatter‘,
                    xAxisIndex:1,
                    yAxisIndex:1,
                    data:dataAll[1],
                    markLine:markLineOpt
                },
                {
                    name:‘III‘,
                    type:‘scatter‘,
                    xAxisIndex:2,
                    yAxisIndex:2,
                    data:dataAll[2],
                    markLine:markLineOpt
                },
                {
                    name:‘IV‘,
                    type:‘scatter‘,
                    xAxisIndex:3,
                    yAxisIndex:3,
                    data:dataAll[3],
                    markLine:markLineOpt
                }
            ]
        };
        //显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

二、图表图片

时间: 2024-10-13 19:19:32

echarts单个实例包含多个grid,标题分别居中的相关文章

opennebula image单个实例响应数据格式

{ "RUNNING_VMS": "0", "REGTIME": "1404981298", "DISK_TYPE": "0", "TEMPLATE": { "DEV_PREFIX": "hd", "DRIVER": "111" }, "CLONING_ID": &qu

ExtJS4.2实例:表格(Grid)含联动的下拉列表(Combobox)

本教程是进行含有下拉列表(Combobox)的表格(Grid)进行级联编辑操作,其中省是可以来编辑的,然后市的可选择数据是根据所选择省来过滤后的集合,显示结果如图片: 选择省为“江苏”后,市的可选择范围都是在江苏下辖的城市,如下图: 示例代码:http://www.itdatum.net/webui/extjs/2014/08/7927.html 在线演示:http://www.itdatum.net/online/extjs/examples-itdatum/grid-with-combobo

win应用只允许单个实例运行,并将已运行实例窗口置顶

关键词:windows,c++,桌面应用,单个实例,窗口置顶 目标:1.判断本程序是否已有一个实例在运行.2.若有,则激活已在运行的实例(将其窗口置顶),并退出当前运行. 1.使用semaphore来检测是否已有实例在运行(也可以用mutex,文件等其他方式) HANDLE g_hSingleSema = ::CreateSemaphore(NULL, 1, 1, _T("single_myapp_sema")); if (g_hSingleSema && ERROR_

react-navigation 做导航栏,发现 Android 上的标题不居中

在做 React Native 应用的时候,我们常常使用 react-navigation 做导航栏,发现 Android 上的标题不居中,IOS 上没问题. 1 如果只有标题,那就在 headerTitleStyle 设置 alignSelf:'center' 就可以. 2 如果标题栏左侧还有返回按钮,发现标题偏右依然不居中,则简单的处理方式是: 在右边再添加一个等宽高的空 View,如下: headerRight: <View /> 升级新版本之后发现这招不灵了,可以在 headerTit

C#托管堆对象实例包含什么

每个托管堆上的对象实例除了包含本身的值外,还包括:○ Type Object Ponter: 指向Type对象实例.如果是同类型的对象实例,就指向同一个Type对象实例.○ Sync Block Index:在多线程情况下用来控制同步 namespace ConsoleApplication1 { class Program { static void Main(string[] args) { Cow cow1 = new Cow(); cow1.mooCount = 1; Cow cow2

Echarts个人实例

1.deviceOperateTrendIndex.jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

关于使用echarts走过的坑(同grid多图、多轴系列)

相信大家在工作中,经常会用到echarts,今天我说下我在工作中浪费时间较长的坑 先来看看我的终极需要实现的图吧: 相信以上效果对于常用的小伙伴来说并不困难, 在此我只说option的配置,关于数据,就不在此赘述了,毕竟大家的情况都不太相同,处理就起来也不太一样. option : { grid: [{ left: '20%', right: 50, height: '35%' }, { left: '20%', right: 50, top: '55%', height: '35%' }],

一个让echarts中国地图包含省市轮廓的技巧

背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂本文. 可能官方也提供过整体的地图库,但可能个人能力有限,并没有找到相关信息或者其他解决方案,如果知道的园友请告诉我. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safa

socket编程实例(包含线程的和线程间的通信的使用)

本文转自:http://blog.csdn.net/x605940745/article/details/17001641 注意点:注册访问的网络权限:android中UI线程不能有访问网络的操作,否则会报android.os.NetworkOnMainThreadException的异常 [html] view plaincopy <uses-permission android:name="android.permission.INTERNET"/> 实例一 客户端 [