常用组件的配置

最新推荐文章于 2022-06-09 21:56:00 发布
最新推荐文章于 2022-06-09 21:56:00 发布
阅读量131 收藏
点赞数
分类专栏： 数据可视化 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NancyYiyi/article/details/124461682
版权

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="echarts.min.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 900px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            tooltip: {  //配置提示框组件
                trigger: 'axis',
                axisPointer:
                {
                    type: 'shadow',
                    lineStyle: {
                        color: '#48b', width: 2, type: 'solid'
                    },
                    crossStyle: {
                        color: '#0000ff', width: 1, type: 'dashed'
                    },
                    shadowStyle: {
                        color: 'rgba(999,150,150,0.2)', width: 'auto', type: 'default'
                    }
                },
                showDelay: 0, hideDelay: 0, transitionDuration: 0,
                backgroundColor: 'rgba(0,222,0,0.5)',
                borderColor: '#f50', borderRadius: 8, borderWidth: 2,
                padding: 10,
                position: function (p) {
                    //位置回调
                    //console.log && console.log(p);
                    return [p[0] + 10, p[1] - 10];
                },
                textStyle: {
                    color: 'blue', decoration: 'none', fontFamily: 'sans-serif',
                    fontSize: 15, fontStyle: 'normal', fontWeight: 'bold'
                },
                formatter: function (params, ticket, callback) {
                    console.log(params)
                    var res = '详情提示框 : <br/>' + params[0].name;
                    for (var i = 0, l = params.length; i < l; i++) {
                        res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                    }
                    setTimeout(function () {
                        //仅为了模拟异步回调
                        callback(ticket, res);
                    }, 500)
                    return 'loading';
                }
                //formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}"
            },
            toolbox: {  //配置工具箱组件
                show: true,
                feature: {
                    mark: { show: true }, dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true }, saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [  //配置x轴坐标系
                {   //指定第一条x轴上的类目数据及格式
                    type: 'category', position: 'bottom',
                    boundaryGap: true, show: true,
                    axisLine: {  //设置第一条x轴上的轴线
                        lineStyle: {
                            color: 'pink', type: 'solid', width: 2
                        }
                    },
                    axisTick: {  //设置第一条x轴上的轴刻度标记
                        show: true, length: 10,
                        lineStyle: {
                            color: 'blue', type: 'solid', width: 2
                        }
                    },
                    axisLabel: {  //设置第一条x轴上的轴文本标记
                        show: true, interval: 'auto',
                        rotate: 45, margin: 8,
                        formatter: '{value}',
                        textStyle: {
                            color: '#000', //fontFamily: 'sans-serif',
                            fontSize: 15, fontStyle: 'italic', fontWeight: 'bold'
                        }
                    },
                    splitLine: {  //设置第一条x轴上的轴分隔线
                        show: true,
                        lineStyle: {
                            color: 'black', type: 'dashed', width: 2
                        }
                    },
                    splitArea: {  //设置第一条x轴上的轴分隔区域
                        show: true,
                        areaStyle: {
                            color: ['rgba(255,0,255,0.3)', 'rgba(238,130,238,0.3)','rgba(240,248,255,0.3)']
                        }
                    },
                    data: [
                        '周一', '周二','周三',
                        {  //设置第一条x轴上的轴标签个性化
                            value: '周四',
                            textStyle: {
                                color: 'red', fontSize: 30, fontStyle: 'normal',
                                fontWeight: 'bold'
                            }
                        },
                        '周五','周六','周日',
                    ]
                },
                {   //设置指定第二条x轴上的类目数据
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'The', 'Frl', 'Sat','Sun']
                }
            ],
            yAxis: [  //配置y轴组件
                {  //指定第一条y轴上的数值型数据及格式
                    type: 'value', position: 'left',
                    boundaryGap: [0, 0.1],
                    axisLine: {  //设置第一条y轴上的轴线
                        show: true,
                        lineStyle: {
                            color: 'pink', type: 'dashed', width: 2
                        }
                    },
                    axisTick: {  //设置第一条y轴上的轴标记
                        show: true,
                        length: 10,
                        lineStyle: {
                            color: 'blue', type: 'solid', width: 2
                        }
                    },
                    axisLabel: {  //设置第一条y轴上的标签
                        show: true, interval: 'auto', margin: 18,
                        formatter: '{value}',
                
                    },
                    // splitLine: {  //设置第一条y轴上的分隔线
                    //     show: true,
                    //     lineStyle: {
                    //         color: '#483d8b', type: 'dotted', width: 2
                    //     }
                    // },
                    splitArea: {  //设置第一条y轴上的分隔区域
                        show: true,
                        areaStyle: {
                            color: ['rgba(652,511,92,0.3)', 'rgba(221,550,0,0.3)']
                        }
                    }
                },
                {   //指定第二条y轴上的数值型数据及格式
                    type: 'value',
                    splitNumber: 10,
                    axisLabel: {  //设置第二条y轴上的数轴标签
                        formatter: function (value) {
                            return value + ' °C'
                        }
                    },
                    splitLine: {  //设置第二条y轴上的分隔线
                        show: false
                    }
                }
            ],
                series: [  //配置数据系列
                    {   //设置数据系列1
                        name: '坐标轴触发1', type: 'bar',
                        data: [
                            { value: 320, extra: 'Hello~' },
                            332, 300, 334, 390, 330, 320
                        ],
                        markLine: {  //设置标记线
                            data: [
                                {
                                    type: 'average', name: '平均值',
                                    itemStyle:  //设置标记点的样式
                                    {
                                        normal: { borderType: 'dotted', color: 'darkred' }
                                    },
                                }],
                        }
                    },
                    {   //设置数据系列2
                        name: '坐标轴触发2', type: 'bar',
                        data: [862, 1018, 964, 1026, 1679, 1600, 157],
                        markPoint: {  //设置标记点
                            data: [
                                {
                                    type: 'max', name: '最大值', symbol: 'diamond', symbolSize: 25,
                                    itemStyle: {  //设置标记点的样式
                                        normal: { color: 'red' }
                                    },
                                },
                                {
                                    type: 'min', name: '最小值', symbol: 'arrow', symbolSize: 20,
                                    itemStyle: {  //设置标记点的样式
                                        normal: { color: 'blue' }
                                    },
                                },
                            ]
                        },
                    },
                    {   //设置数据系列3
                        name: '数据项触发1', type: 'bar',
                        tooltip: {
                            trigger: 'item', backgroundColor: 'black', position: [0, 0],
                            formatter: "Series formatter: <br/>{a}<br/>{b}:{c}"
                        },
                        stack: '数据项',
                        data: [
                            120, 132,
                            {
                                value: 301, itemStyle: { normal: { color: 'red' } },
                                tooltip: {
                                    backgroundColor: 'blue',
                                    formatter: "Data formatter: <br/>{a}<br/>{b}:{c}"
                                }
                            },
                            134, 90,
                            { value: 230, tooltip: { show: false } },
                            210
                        ]
                    },
                    {   //设置数据系列4
                        name: '数据项触发2', type: 'bar',
                        tooltip: {
                            show: false, trigger: 'item'
                        },
                        stack: '数据项', data: [150, 232, 201, 154, 190, 330, 410]
                    }
                ]
        };

        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>

NancyYiyi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts实现多维坐标轴
09-17
在开发过程中可能会遇到把数据显示在同一个坐标轴中，但是x，y轴的数据单位不一样
组件配置
我们编程吧
04-04 644
<br />组件配置内容列表配置接口向后兼容<br />控制组件的外观,通常的方法是使用选项(option),而不是方法调用.典型的选项包含text,color,size,command callbacks(文字,颜色,大小,回调命令)等.所有核心组件都从相同的配置接口来实现选项处理操作配置接口<br /> widgetclass(master, option=value, ...) => widget<br />创建一个组件类的引用,作为给出的master的一个子组件, 并使用给定的选项. 所有选项都具有
Echarts---直角坐标系下的坐标轴
dongdouzin的博客
06-16 904
直角坐标系下有3种类型的坐标轴（axis）：类目型（category）、数值型（value）和时间型（time）。 （1）类目型：必须指定类目列表，坐标轴内有且仅有这些指定类目坐标。 （2）数值型：需要指定数值区间，如果没有指定，将由系统自动计算从而确定计算数值范围，坐标轴内包含数值区间内的全部坐标。 （3）时间型：时间型坐标轴用法与数值型的非常相似，只是目标处理和格式化显示时会自动转变为时间，并且随着时间跨度的不同而自动切换需要显示的时间粒度，例如：时间跨度为一年，系统将自动显示以月为单位的时间粒度；时间
组件化配置
neabea2016的博客
08-19 238
这篇文件介绍的很好，建议看看 Android组件化方案 1.创建依赖包 名为test_library 2.gradle.properties中添加 # true 模块编译 isModule=true 3.在依赖gradle 添加 if (isModule.toBoolean()) { apply plugin: 'com.android.application' } else { apply plugin: 'com.android.library' } android { d
SSM常用配置及组件
10-10
包含SSM框架下常用的组件，配置环境必须的一些配置，可简化配置过程
集群常用脚本及相关组件配置文件
11-21
集群常用脚本及相关组件配置集群常用脚本及相关组件配置文件文件
java开发环境及组件配置文档
03-01
java开发 环境所以需要配置文档，以及java常用的组件配置，如报表组件等等
spring cloud基本组件配置
08-01
这个文档时具体配置spring cloud的基本组件的注解和依赖包的文档，上次上传的spring cloud的是纯理论的，这个是具体实现；
android(Qt实现安卓常用组件用法).zip
08-03
Qt5实现安卓常用组件用法,qt5在安卓上的常用配置， ANDROID_PACKAGE_SOURCE_DIR = $$PWD/android
组件配置器
renyican的博客
05-12 629
组件配置器设计模式允许应用程序在不必修改、重新编译、静态重新链接应用程序的情况下，在运行时链接和解链它的组件实现。组件配置器进一步支持在不必关闭和重启运行的进程的情况下，把组件配置到不同的应用程序进程。一、解决方案 从组件的实现中分离出组件接口，使应用程序独立于组件实现被配置到应用程序进程的时间点。 二、结构 组件配置器模式有四个参与者： 1.组件。定义一个一致的接口，用于配置和控制组件实现
ECharts坐标轴
weixin_44795196的博客
11-29 1727
option = { //设置线条的颜色 color:['pink','red','green','skybule'], title: { text: '折线图堆叠' }, //图表提示框组件 tooltip: { //触发方式 trigger: 'axis' }, //折线图例组件(图表上方标识)，series里面有值这里可以删除 legend: { // data: ['
echarts坐标轴
dt1559的博客
06-09 2587
echarts
echarts直角坐标系
weixin_43390711的博客
10-19 920
前言 直角坐标的图表有：折线图、柱状图、散点图 一、grid网格 x轴和y轴是基于grid绘制的 控制图表的位置和大小 二、axis（x和y） 一个grid中最多有两种位置的x轴和y轴 1、类型 type（category）要配合data实现类目轴 type（value）会自动识别series中的data 2、位置 x轴：top、bottom y轴：left、right 三、dataZoom区域缩放 x轴和y轴都可以有dataZoom dataZoom是一个数组，意味着可以有多
第9步:组件配置
Pianpianluoye
07-19 300
1
坐标轴类型
weixin_30648587的博客
05-30 674
1、linear 线性轴线性轴。默认类型，x轴按照 Axis.tickInterval 值增长，y轴默认是自适应。 2、logarithmic 对数轴对数轴。按照数学中的对数增长，例如1,2,4,8… 用的不多，主要用于对数图表，实例请查看在线演示平台的 对数直线图。 3、datetime 时间轴时间轴。时间使用和Javascript 日期对象一样，即用一个距1970年1月1日0时0分0秒的毫...
springmvc-组件配置-学习笔记
beyond_zl的博客
08-23 298
springmvc是spring框架的一个模块，是一个基于MVC的web框架，springmvc和spring无需通过中间层整合。springmvc原理第一步：发起请求到前端控制器(DispatcherServlet) 第二步：前端控制器请求HandlerMapping查找Handler(可以根据xml配置、注解进行查找) 第三步：处理器映射器HandlerMapping向前端控制器返回Hand
Highcharts图表结构分析：详解坐标轴及其类型
z69183787的专栏
03-05 4883
Highcharts所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过chart.inverted = true 可以让x，y轴显示位置对调。下图为图表中坐标轴组成部分。 一、坐标轴组成部分 轴标题-Axis Title 坐标轴标题。默认情况下，x轴为null（也就是没有title），y轴为'
ECharts中y轴怎么反向与留白
Dove_1234的博客
10-12 2119
使用 ECharts 时同样也要注意所设置的 y 轴是否是个反向轴，这通过 yAxis.inverse 就可以得知； 并且还需要适当的给坐标轴做留白处理，这样会方便之后的一些操作，但是对于类目型与非类目型的坐标轴，有不同的留白策略。 yAxis.inverse | boolean [ default: false ] 可以得出 y 轴是否是反向坐标轴。 该属性是 ECharts 3 中新加的。 yAxis.boundaryGap | boolean, Array 设置 y 坐标轴两边留白策略
flume组件常用配置分析
最新发布
06-10
Flume是一个分布式、高可靠、高可用的日志收集系统，它的主要作用是将分布式环境中产生的海量数据进行汇聚和传输。Flume的核心组件包括Source、Channel和Sink，下面是这些组件常用的配置： 1. Source组件配置：Source组件是Flume的数据输入源，常用的Source组件有ExecSource、AvroSource、NetcatSource等。它们的配置主要包括监听地址、端口号、日志格式、字符集等，具体如下： ``` # 监听地址和端口号 a1.sources.r1.type = netcat a1.sources.r1.bind = 0.0.0.0 a1.sources.r1.port = 44444 # 日志格式和字符集 a1.sources.r1.interceptors = i1 a1.sources.r1.interceptors.i1.type = regex_filter a1.sources.r1.interceptors.i1.regex = ^\[\d{4}-\d{2}-\d{2} a1.sources.r1.interceptors.i1.excludeEvents = false a1.sources.r1.interceptors.i1.charset = UTF-8 ``` 2. Channel组件配置：Channel组件是Flume的数据传输通道，常用的Channel组件有MemoryChannel、FileChannel、JDBCChannel等。它们的配置主要包括内存大小、数据保留时间、事务容量等，具体如下： ``` # 内存大小和事务容量 a1.channels.c1.type = memory a1.channels.c1.capacity = 1000 a1.channels.c1.transactionCapacity = 100 # 数据保留时间 a1.channels.c1.keep-alive = 3m ``` 3. Sink组件配置：Sink组件是Flume的数据输出目标，常用的Sink组件有HDFS Sink、Kafka Sink、Avro Sink等。它们的配置主要包括输出地址、序列化格式、批处理大小等，具体如下： ``` # 输出地址和序列化格式 a1.sinks.k1.type = hdfs a1.sinks.k1.hdfs.path = /flume/%Y/%m/%d/%H/ a1.sinks.k1.hdfs.filePrefix = events- a1.sinks.k1.hdfs.fileSuffix = .log a1.sinks.k1.hdfs.rollInterval = 3600 a1.sinks.k1.hdfs.fileType = DataStream a1.sinks.k1.serializer = org.apache.flume.sink.hdfs.AvroEventSerializer$Builder # 批处理大小 a1.sinks.k1.batchSize = 1000 ``` 以上是Flume组件常用配置的一些示例，具体的配置内容和参数取决于具体的场景和需求。Flume支持丰富的配置选项，可以根据实际需要进行灵活配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值