ECharts中dataZoom组件及散点图的绘制

2021-6-8    前端达人

ECharts中dataZoom组件及散点图的绘制

dataZoom 组件是对 数轴(axis) 进行『数据窗口缩放』『数据窗口平移』操作。

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



dataZoom 组件可同时存在多个,起到共同控制的作用。控制同一个数轴的组件,会自动联动。下面例子中会详细说明。



dataZoom 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。



dataZoom 的数据窗口范围的设置,目前支持两种形式:



百分比形式:参见 dataZoom.start 和 dataZoom.end。



绝对数值形式:参见 dataZoom.startValue 和 dataZoom.endValue。



dataZoom 组件现在支持几种子组件:



内置型数据区域缩放组件(dataZoomInside):内置于坐标系中。



滑动条型数据区域缩放组件(dataZoomSlider):有单独的滑动条操作。



框选型数据区域缩放组件(dataZoomSelect):全屏的选框进行数据区域缩放。入口和配置项均在 toolbox中。



在代码中加入dataZoom组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>代码加入dataZoom组件</title>

    <!--引入Echarts文件-->

    <script src="js/echarts.min.js"></script>

</head>

<body>

<div id="main" style="width: 800px;height:400px;"></div>

<script type="text/javascript">

    var dom=document.getElementById("main");

    var myChart=echarts.init(dom);

    var app={};

    var option=null;

    //先只在对单独一个横轴,加上 dataZoom 组件,代码示例如下:

    option = {

        tooltip:{},//提示框

        xAxis: {

            type: 'value'

        },

        yAxis: {

            type: 'value'

        },

        dataZoom: [

            {

                type: 'slider', //这个dataZoom组件是slider型dataZoom组件

                xAxisIndex:0,   //dataZoom-slider组件控制第一个XAxis

                start: 10,       //左边在10%位置

                end: 60         //右边在60%位置

            },

            {

                type: 'inside', //这个dataZoom组件是inside型dataZoom组件

                xAxisIndex:0,   //dataZoom-inslide组件控制第一个XAxis

                start: 10,       //左边在10%的位置

                end: 60         //右边在60%的位置

            },{

                type:'slider',

                yAxisIndex:0,   //dataZoom-slider组件控制第一个yAxis

                start:30,

                end:80

            },{

                type:'inside',

                yAxisIndex:0,   //dataZoom-inside组件控制第一个yAxis

                start:30,

                end:80

            }

        ],

        series: [

            {

                name: 'scatter',

                type: 'scatter',

                itemStyle: {

                    normal: {

                        opacity: 0.8

                    }

                },

                symbolSize: function (val) {//控制点的大小,(参数为data中第三列的数据)

                    return val[2] * 40;     //用回调函数控制点的大小(请查看官方文档)

                },

                data: [//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"]

                ]

            }

        ]

    }

    if (option && typeof option === "object") {

        myChart.setOption(option, true);

    }

</script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

可以通过滑动滑轮实现图形的缩放



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


部分借鉴自:csdn  

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档