良许Linux教程网 干货合集 简单介绍一下ECharts数据图表

简单介绍一下ECharts数据图表

ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

image-20211206154802097

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 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
       }
   ]
}

尝试一下 »

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二

维码进行关注,更多干货等着你 !

img
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部