草庐IT

ECharts 交互组件

runoob 2023-04-06 原文

ECharts 交互组件

ECharts 提供了很多交互组件：例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline。

接下来的内容我们将介绍如何使用数据区域缩放组件 dataZoom。

dataZoom

dataZoom 组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能。

默认情况下 dataZoom 控制 x 轴，即对 x 轴进行数据窗口缩放和数据窗口平移操作。

实例

option = {
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    dataZoom: [
        {   // 这个dataZoom组件，默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        }
    ],
    series: [
        {
            type: 'scatter', // 这是个『散点图』
            itemStyle: {
                opacity: 0.8
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
        }
    ]
}

尝试一下 »

上面的实例只能拖动 dataZoom 组件来缩小或放大图表。如果想在坐标系内进行拖动，以及用鼠标滚轮（或移动触屏上的两指滑动）进行缩放，那么需要 再再加上一个 inside 型的 dataZoom 组件。

在以上实例基础上我们再增加 type: 'inside' 的配置信息：

实例

option = {
    ...,
    dataZoom: [
        {   // 这个dataZoom组件，默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        },
        {   // 这个dataZoom组件，也控制x轴。
            type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
        }
    ],
    ...
}

尝试一下 »

当然我们可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。

实例

var data1 = [];
var data2 = [];
var data3 = [];

var random = function (max) {
    return (Math.random() * max).toFixed(3);
};

for (var i = 0; i < 500; i++) {
    data1.push([random(15), random(10), random(1)]);
    data2.push([random(10), random(10), random(1)]);
    data3.push([random(15), random(10), random(1)]);
}

option = {
    animation: false,
    legend: {
        data: ['scatter', 'scatter2', 'scatter3']
    },
    tooltip: {
    },
    xAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
            show: true
        }
    },
    yAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
            show: true
        }
    },
    dataZoom: [
        {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            left: '93%',
            start: 29,
            end: 36
        },
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 29,
            end: 36
        }
    ],
    series: [
        {
            name: 'scatter',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data1
        },
        {
            name: 'scatter2',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data2
        },
        {
            name: 'scatter3',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8,
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data3
        }
    ]
}

尝试一下 »
ECharts交互spannbspstyleEcharts

有关ECharts 交互组件的更多相关文章

  1. ruby-on-rails - 如何在 ruby​​ 交互式 shell 中有多行？ - 2

    这可能是个愚蠢的问题。但是，我是一个新手......你怎么能在交互式ruby​​shell中有多行代码？好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗？再次抱歉，如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f

  2. ruby - 如何与 Ruby 中的 Perl 程序交互？ - 2

    据我了解，在Ruby和Perl之间没有“桥梁”可以让您直接从Ruby调用Perl函数。据我了解，要从Ruby调用Perl程序，只需将其放在反引号中(即result=`./helloWorld.pl`)。但是，这不允许与Perl程序交互(即您不能与提示交互或提供输入)。我的问题如下:有没有什么方法可以从Ruby向Perl程序提供输入(除了参数)？Ruby和Perl之间没有桥梁，我错了吗？在导航提示时与程序的标准输入交互似乎是错误的方式，我正在处理的程序设计良好，并且具有包含适当Perl函数的库。 最佳答案 有Inline::Ruby模

  3. ruby - IRb:如何使用预加载类启动交互式 ruby​​ session - 2

    在我采用Ruby语言的过程中，我花了很多时间在IRb中。太棒了!但是，由于我不是很清楚它的功能，并且对Ruby仍然是个“笨蛋”，所以我想知道以下内容:如何在不重新启动IRb的情况下“刷新”session(或者这是不可能的)。如何配置IRb加载一堆源文件“hello.rb”和“hello_objects.rb”，即在启动时？我在这些方面投入了大量工作，如果知道加载这些类的速记，而无需再次为每个类手动键入“加载”，那就太好了。 最佳答案 我不确定是否可以“刷新”session。但是，您可以像这样加载您的类:irb-r'hello.rb'

  4. ruby - Lisp - 是否适合网络编程/应用程序(交互式)？ ruby 的方式是？ php的方式是？ - 2

    Lisp是否适合Web编程/应用程序(交互式)，就像ruby​​和php一样？需要考虑的事情是:易于使用可部署性难度(尤其是对于编程初学者而言)(编辑)在阅读PaulGraham'sessay之后，我特别提到了CommonLisp.将是我的第一门编程语言。在这方面。这样做合适吗？我听说Clojure的宏功能不如CommonLisp的强大，这就是我尝试学习Clojure的原因。它教授编程并且非常强大。 最佳答案 Lisp是一个语系，而不是单一的语言。为了稍微回答您的问题，是的，存在用于各种Lisp方言的Web框架，例如用于Common

  5. Android Studio开发之使用内容组件Content获取通讯信息讲解及实战（附源码 包括添加手机联系人和发短信） - 2

    运行有问题或需要源码请点赞关注收藏后评论区留言一、利用ContentResolver读写联系人在实际开发中，普通App很少会开放数据接口给其他应用访问。内容组件能够派上用场的情况往往是App想要访问系统应用的通讯数据，比如查看联系人，短信，通话记录等等，以及对这些通讯数据及逆行增删改查。首先要给AndroidMaifest.xml中添加响应的权限配置 下面是往手机通讯录添加联系人信息的例子效果如下分成三个步骤先查出联系人的基本信息，然后查询联系人号码，再查询联系人邮箱代码 ContactAddActivity类packagecom.example.chapter07;importandroid

  6. BigData/Cloud Computing：基于阿里云技术产品的人工智能与大数据/云计算/分布式引擎的综合应用案例目录来理解技术交互流程 - 2

    BigData/CloudComputing：基于阿里云技术产品的人工智能与大数据/云计算/分布式引擎的综合应用案例目录来理解技术交互流程目录一、云计算网站建设：部署与发布网站建设：简单动态网站搭建云服务器管理维护云数据库管理与数据迁移云存储：对象存储管理与安全超大流量网站的负载均衡二、大数据MOOC网站日志分析搭建企业级数据分析平台基于LBS的热点店铺搜索基于机器学习PAI实现精细化营销基于机器学习的客户流失预警分析使用DataV制作实时销售数据可视化大屏使用MaxCompute进行数据质量核查使用Quick BI制作图形化报表使用时间序列分解模型预测商品销量三、云安全云平台使用安全云上服务

  7. ruby-on-rails - 如何从 Ruby 与 CalDAV 服务器交互？ - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭4年前。Improvethisquestion我需要在Ruby(准确地说是Rails)应用程序中使用CalDAV在日历服务器上创建事件。我看过一些不同的图书馆并进行了一些谷歌搜索。我查看了ri-cal(http://ri-cal.rubyforge.org/rdoc/)，但不确定它是否支持将数据发送到服务器，或者我是否必须自己这样做，这看起来很有希望http://www.local-guru.net/blog/p

  8. ruby - 在 ruby​​ 中运行系统命令并与之交互 - 2

    我需要在命令行上运行一个命令来请求用户响应。如果它有帮助，命令是:gpg--recipient"SomeName"--encrypt~/some_file.txt当你运行它时，它会发出警告然后询问:Usethiskeyanyway?(y/N)响应“y”让它正确完成。我一直在尝试使用open4gem但我无法让它正确指定“y”。这是我尝试过的:Open4::popen4(cmd)do|pid,stdin,stdout,stderr|stdin.puts"y"stdin.closeputs"pid:#{pid}"puts"stdout:#{stdout.read.strip}"puts"st

  9. ruby - 我将如何以编程方式与 VST(i) 插件交互以合成音频？ - 2

    以VSTiTriforce为例,由Tweakbench提供。当加载到市场上的任何VST主机时，它允许主机向VSTi发送(大概是MIDI)信号。然后VSTi将处理该信号并输出​​由VSTi内的软件乐器创建的合成音频。例如，将A4(我相信是MIDI音符)发送到VSTi会导致它合成高于中央C的A。它将音频数据发送回VST主机，然后它可以在我的扬声器上播放或将其保存为.wav或其他一些音频文件格式。假设我有Triforce，我正在尝试用我选择的语言编写一个程序，它可以通过发送要合成的A4纸条与VSTi交互，并自动将其保存到系统上的文件？最终，我希望能够解析整个单轨MIDI文件(使用已经可用于此

  10. ruby - 模块化、基于组件的 Sinatra 应用程序的架构 - 2

    我正在开发一个包含大约10个不同功能组件的Sinatra应用程序。我们希望能够将这些组件混合并匹配到应用程序的单独实例中，完全从config.yaml文件配置，如下所示:components:-route:'/chunky'component_type:FoodListercomponent_settings:food_type:baconmax_items:400-route:'places/paris'component_type:Mappercomponent_settings:latitude:48.85387273165654longitude:2.340087890625-

随机推荐