话不多说，老规矩，先上图，实现echarts实现散点图，x轴数据为时间年月日。

实现代码如下：

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title>五分钟上手之散点图</title>
  7.         <!-- 引入 echarts.js -->
  8.         <script src="js/echarts.min.js"></script>
  9.         <script src="js/jquery-1.11.3.js"></script>
  10.     </head>
  12.     <body>
  13.         <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  14.         <div style="height: 500px;width: 1000px;" id="Scatter"></div>
  15.         <script type="text/javascript">
  16.             $(document).ready(function() {
  17.                 var MyScatter = echarts.init(document.getElementById('Scatter'));
  19.                 var data = [
  20.                     ['2012-03-01',
  21.                         1,
  22.                         "翻身"
  23.                     ],
  24.                     [
  25.                         '2013-06-01',
  26.                         0.5,
  27.                         "没翻身"
  28.                     ],
  29.                     [
  30.                         '2017-03-02',
  31.                         0.5,
  32.                         "翻身"
  33.                     ]
  34.                 ];
  35.                 var textStyle = {
  36.                     color: '#333',
  37.                     fontStyle: 'normal',
  38.                     fontWeight: 'normal',
  39.                     fontFamily: '微软雅黑',
  40.                     fontSize: 14,
  41.                 };
  42.                 option = {
  43.                     xAxis: {
  44.                         type: 'time',
  45.                         name: '时间轴',
  47.                     },
  48.                     yAxis: {
  49.                         type: 'value',
  50.                         name: '次数值',
  52.                         max: 1,
  53.                         min: 0,
  54.                     },
  55.                     series: [{
  56.                         name: '',
  57.                         data: data,
  58.                         type: 'scatter',
  59.                         symbolSize: 40
  60.                     }]
  61.                 };
  63.                 MyScatter.setOption(option);
  64.             });
  65.         </script>
  66.     </body>
  68. </html>

echarts学习过程中，也会遇到很多坑，要不断的进行试验和钻研，才会发现其中的奥妙，下午去了echarts官网看了一遍参数文档，收获颇丰。另外，附上一副散点图所有参数的详解。

  1. <!--
  2. 1、首先需要下载包echarts.js，然后引入该包
  3. -->
  4. <!DOCTYPE html>
  5. <html>
  6. <header>
  7.     <meta charset="utf-8">
  8.     <!--引入 ECharts 文件-->
  9.     <script src="echarts.js"></script>
  10. </header>
  12. <!--
  13. 2、基本配置
  14. //第一步调用echarts初始化函数,传入dom对象产生echarts的instance
  15. -->
  16. <body>
  18. <!--为 ECharts 准备一个具备大小（宽高）的 DOM-->
  19. <div id="main" style="width: 600px;height:400px;"></div>
  21. <script type="text/javascript">
  23.     // 基于准备好的dom，初始化echarts实例
  24.     var myChart = echarts.init(document.getElementById('main'));
  26.     //第二步构造数据
  27.     var data1 = [];//数据区域缩放组件
  28.     var data2 = [];
  29.     var data3 = [];
  31.     //构造随机数
  32.     var random = function (max){
  33.         return (Math.random() * max).toFixed(3);
  34.     };
  36.     //将数据装载到数组中
  37.     for (var i = 0; i < 500; i++) {
  38.         data1.push([random(15), random(10), random(1)]);
  39.         data2.push([random(10), random(10), random(1)]);
  40.         data3.push([random(15), random(10), random(1)]);
  41.     };
  43.     //3、配置option项
  44.     //第三步就是使用echarts的option进行参数的配置
  45.     option = {
  46.         animation: false,//是否开启动画，默认是开启的，true是开启的,false是关闭的
  48.         //图例
  49.         legend: {
  50.             data: [
  51.                 {
  52.                     name:'scatter2',
  53.                     icon:'circle',//强制设置图形长方形
  54.                     textStyle:
  55.                         {color:'red'}//设置文本为红色
  56.                 },
  57.                 {
  58.                     name:'scatter',
  59.                     icon:'rectangular',//强制设置图形为长方形
  60.                     textStyle:
  61.                         {color:'red'}//设置文本为红色
  62.                 },
  63.                 {
  64.                     name:'scatter3',
  65.                     icon:'rectangular',//强制设置图形为长方形
  66.                     textStyle:
  67.                         {color:'red'}//设置文本为红色
  68.                 }
  69.             ],
  70.             zlevel:5,//设置Canvas分层 zlevel值不同会被放在不同的动画效果中,传说中z值小的图形会被z值大的图形覆盖
  71.             z:3,//z的级别比zlevel低，传说中z值小的会被z值大的覆盖，但不会重新创建Canvas
  72.             left:'center',//图例组件离容器左侧的距离。可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
  73.             //如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
  74.             top:'top',
  75.             //rigth:'',
  76.             //bottom:''
  77.             width:'auto',//设置图例组件的宽度，默认值为auto,好像只能够使用px
  78.             orient:'horizontal',//设置图例组件的朝向默认是horizontal水平布局，'vertical'垂直布局
  79.             align:'auto',//'left'  'right'设置图例标记和文本的对齐，默认是auto
  80.             //默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 //'vertical'）的时候为右对齐，及为 'right'。
  81.             padding:[20,20,20,20],//设置图例内边距 默认为上下左右都是5，接受数组分别设定
  82.             itemGap:20,//图例每项之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔。默认为10
  83.             itemWidth:30,//图例标记的图形宽度，默认为25
  84.             itemHeight:20,//图例标记的图形高度，默认为14
  85.             //formatter:'Legend {name}'//图例文本的内容格式器，支持字符串模板和回调函数两种形式。
  86.             formatter:function(name){
  87.                 return 'Legend  '+name;
  88.             },
  89.             //selectedMode:false,//图例的选择模式，默认为开启，也可以设置成single或者multiple
  90.             //selectedMode:'single'//图例的选择模式，默认为开启，也可以设置成single或者multiple
  91.             selectedMode:'multiple',//图例的选择模式，默认为开启，也可以设置成single或者multiple
  92.             inactiveColor:'#ccc',//图例关闭时的颜色，默认是'#ccc'
  93.             selected:{
  94.                 'scatter2':true,//设置图例的选中状态
  95.                 'scatter':false,
  96.                 'scatter3':false
  97.             },
  98.             tooltip: {//图例的tooltip 配置，默认不显示,可以在文件较多的时候开启tooltip对文字进行剪切
  99.                 show: true
  100.             },
  101.             //backgroundColor:'rgb(128, 128, 128)',//图例的背景颜色，默认为透明的
  102.             //borderColor:'rgb(10, 150, 200)',//图例的边框颜色
  103.             //borderWidth:2,//图列的边框线宽，默认为1
  104.             shadowBlur:30,//图例阴影的模糊大小
  105.             shadowColor:'rgb(128, 128, 56)'//阴影的颜色
  106.         },
  108.         //鼠标移上去的提示
  109.         tooltip: {
  110.         },
  112.         //网格
  113.         grid:{
  114.             show:true,//是否显示直角坐标系的网格,true显示，false不显示
  115.             left:100,//grid组件离容器左侧的距离
  116.             containLabel:false,//grid 区域是否包含坐标轴的刻度标签，在无法确定坐标轴标签的宽度，容器有比较小无法预留较多空间的时候，可以设为 true 防止标签溢出容器。
  118.         },
  120.         //X轴
  121.         xAxis: {
  122.             type: 'value',
  123.             min: 'dataMin',
  124.             name:'xAxis',//x轴的名称
  125.             nameLocation:'end',//x轴名称的显示位置'middle'，'end'
  126.             nameRotate:30,//坐标轴名字旋转角度值
  127.             max: 'dataMax',
  128.             gridIndex:0,//x轴所在的grid的索引，默认位于第一个grid
  129.             //offset:10,//x轴相对默认位置的偏移，在一个grid中含有多个grid的时候有意义
  130.             type:'value',//数值轴适用于连续型数据
  131.             //'category'类目轴 适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
  132.             //'time' //时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
  133.             //'log' 对数轴。适用于对数数据。
  134.             position:'top',//x轴位于grid的上方还是下方，默认为bottom在下方
  135.             inverse:false,//是否反向坐标
  136.             boundaryGap:['20%','20%'],//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
  137.             //类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
  138.             //非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效
  139.             splitLine: {
  140.                 show: true
  141.             }
  142.         },
  144.         //Y轴
  145.         yAxis: {
  146.             type: 'value',
  147.             min: 'dataMin',
  148.             max: 'dataMax',
  149.             splitLine: {
  150.                 show: true
  151.             }
  152.         },
  154.         //数据区域缩放、滚动条
  155.         dataZoom: [
  156.             {
  157.                 type: 'slider',
  158.                 show: true,
  159.                 xAxisIndex: [0],
  160.                 start: 1,
  161.                 end: 35
  162.             },
  163.             {
  164.                 type: 'slider',
  165.                 show: true,
  166.                 yAxisIndex: [0],
  167.                 left: '93%',
  168.                 start: 29,
  169.                 end: 36
  170.             },
  171.             {
  172.                 type: 'inside',
  173.                 xAxisIndex: [0],
  174.                 start: 1,
  175.                 end: 35
  176.             },
  177.             {
  178.                 type: 'inside',
  179.                 yAxisIndex: [0],
  180.                 start: 29,
  181.                 end: 36
  182.             }
  183.         ],
  185.         //visualMap
  186.         visualMap: {
  187.             //type: 'continuous',//类型为连续型。
  188.             min: 0,//指定 visualMapContinuous 组件的允许的最小值。'min' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
  189.             max: 1000000,//指定 visualMapContinuous 组件的允许的最大值。'max' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
  190.             //setOption 改变 min、max 时 range 的自适应
  191.             text:['High','Low'],//两端的文本['High', 'Low']
  192.             range:[0, 800000],//指定手柄对应数值的位置
  193.             calculable:true,//表示是否设置了拖拽用的手柄，如果为false则拖拽结束时，才更新视图。如果为ture则拖拽手柄过程中实时更新图表视图。
  194.             realtime: false,//表示拖拽时是否实时更新
  195.             inverse:false,//是否翻转组件
  196.             precision:2,//展式的小数点精度
  197.             itemWidth:30,//长条的宽度，默认为20
  198.             itemHeight:200,//长条的高度，默认是140
  199.             align:'left',//组件中手柄和文字的摆放位置'auto'   (orient 为 horizontal 时有效) 'left'  'right'    （rient 为 vertical 时有效。）'top' 'bottom'
  200.             textGap:20,//两端文字与主体之间的距离
  201.             show:true,//是否显示数据映射组件
  202.             dimension:0,//指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组，
  203.             seriesIndex:0,//指定去哪个系列的数据
  204.             hoverLink:true,//打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。
  205.             //反之，鼠标悬浮到图表中的图形元素上时，在 visualMap 组件的相应位置会有三角提示其所对应的数值。
  206.             //inRange: {//能定义目标系列（参见 visualMap-continuous.seriesIndex）视觉形式，也同时定义了 visualMap-continuous 本身的视觉样式。
  207.             //视觉通道
  208.             //inRange 中，可以有任意几个的『视觉通道』定义（如 color、symbolSize 等）。这些视觉通道，会被同时采用。
  209.             //一般来说，建议使用 透明度（opacity） ，而非 颜色透明度（colorAlpha） （他们细微的差异在于，前者能也同时控制图元中的附属物（如 label）的透明度，而后者只能控制图元本身颜色的透明度）。
  210.             //视觉映射的方式：支持两种方式：线性映射、查表映射。
  211.             //线性映射 表示 series.data 中的每一个值（dataValue）会经过线性映射计算，从 [visualMap.min, visualMap.max] 映射到设定的 [visual value 1, visual value 2] 区间中的某一个视觉的值（下称 visual value）。
  212.             //查表映射 表示 series.data 中的所有值（dataValue）是可枚举的，会根据给定的映射表查表得到映射结果。
  213.             /*color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
  214.              symbolSize: [30, 100]//图元的大小。*/
  215.             // 表示 目标系列 的视觉样式。
  217.             //},
  218.             /*target: {
  219.              inRange: {
  220.              symbol: 图元的图形类别。
  221.              symbolSize: 图元的大小。
  222.              color: 图元的颜色。
  223.              colorAlpha: 图元的颜色的透明度。
  224.              opacity: 图元以及其附属物（如文字标签）的透明度。
  225.              colorLightness: 颜色的明暗度，参见 HSL。
  226.              colorSaturation: 颜色的饱和度，参见 HSL。
  227.              colorHue: 颜色的色调，参见 HSL。
  228.              color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
  229.              symbolSize: [60, 200]
  231.              }
  232.              },*/
  233.             // 表示 visualMap-continuous 本身的视觉样式。
  234.             /*controller: {visualMap 组件中，控制器 的 inRange outOfRange 设置。如果没有这个 controller     设置，控制器 会使用外层的 inRange outOfRange 设置；如果有这个 controller 设置，则会采用这个设置。适用于一些控制器视觉效果需要特殊定制或调整的场景。
  235.              inRange: {
  236.              symbolSize: [30, 100],
  237.              symbol:['circle', 'rect', 'diamond'],
  238.              color: ['#121122', 'rgba(3,4,5,0.4)', 'red']
  239.              }
  240.              },*/
  241.             type:'piecewise',//表示分段型视觉映射组件（visualMapPiecewise）
  242.             splitNumber:10,//对于连续型数据，自动切分成几段默认是5段
  243.             pieces: [//每一段的范围，以及每一段的文字，以及每一段的特别的样式
  244.                 {min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。
  245.                 {min: 900, max: 1500},
  246.                 {min: 310, max: 1000},
  247.                 {min: 200, max: 300},
  248.                 {min: 10, max: 200, label: '10 到 200（自定义label）'},
  249.                 {value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
  250.                 {max: 5}     // 不指定 min，表示 min 为无限大（-Infinity）。
  251.             ],
  252.             min:2,//指定 visualMapPiecewise 组件的最小值。
  253.             max:5,//指定 visualMapPiecewise 组件的最大值。
  254.             selectedMode:'multiple',//(多选)(单选)
  255.             inverse:false,//是否反转
  256.             precision:2,//数据展示的小数精度
  257.             itemWidth:20,//图形的宽度，即每个小块的宽度。
  258.             itemHeight:20,//图形的高度，即每个小块的高度
  259.             text:['High', 'Low'],//两端的文本
  260.             align:'auto',// 自动决定。'left' 图形在左文字在右。'right' 图形在右文字在左。
  261.             textGap:20,//两端文字主体之间的距离
  262.             itemGap:10,//每两个图元之间的间隔距离，单位为px。
  263.             itemSymbol:'circle',//图形的形状 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
  264.             show:true,//是否显示组件
  265.             dimension:0,//指定用数据的『哪个维度』，映射到视觉元素上。
  266.             seriesIndex:0,//指定取哪个系列的数据，即哪个系列的 series.data。
  267.             hoverLink:true,//打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。
  268.             //inRange://参考visualMapContinuous
  269.             //outOfRange://参考visualMapContinuous*/
  270.             /*categories: [//用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集。
  271.              'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
  272.              ],*/
  273.             /*inRange: {
  274.              // visual value 可以配成 Object：
  275.              color: {
  276.              'Warden': 'red',
  277.              'Demon Hunter': 'black',
  278.              '': 'green' // 空字串，表示除了'Warden'、'Demon Hunter'外，都对应到 'green'。
  279.              },
  280.              // visual value 也可以只配一个单值，表示所有都映射到一个值，如：
  281.              color: 'green',
  282.              // visual value 也可以配成数组，这个数组须和 categories 数组等长，
  283.              // 每个数组项和 categories 数组项一一对应：
  284.              color: ['red', 'black', 'green', 'yellow', 'white']
  285.              },*/
  286.             /*outOfRange:{//定义 在选中范围外 的视觉元素。
  287.              color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
  288.              symbolSize: [30, 100]
  289.              },
  290.              olor: ['orangered','yellow','lightskyblue']*/
  291.         },
  293.         //装载数据
  294.         series: [
  295.             {
  296.                 name: 'scatter',
  297.                 type: 'scatter',
  298.                 itemStyle: {
  299.                     normal: {
  300.                         opacity: 0.8
  301.                     }
  302.                 },
  303.                 symbolSize: function (val) {
  304.                     return val[2] * 40;
  305.                 },
  306.                 data: data1
  307.             },
  308.             {
  309.                 name: 'scatter2',
  310.                 type: 'scatter',
  311.                 itemStyle: {
  312.                     normal: {
  313.                         opacity: 0.8
  314.                     }
  315.                 },
  316.                 symbolSize: function (val) {
  317.                     return val[2] * 40;
  318.                 },
  319.                 data: data2
  320.             },
  321.             {
  322.                 name: 'scatter3',
  323.                 type: 'scatter',//散点图
  324.                 itemStyle: {
  325.                     normal: {
  326.                         opacity: 0.8,
  327.                     }
  328.                 },
  329.                 symbolSize: function (val) {
  330.                     return val[2] * 40;
  331.                 },
  332.                 data: data3
  333.             }
  334.         ]
  335.     };
  337.     // 使用刚指定的配置项和数据显示图表
  338.     myChart.setOption(option);
  339. </script>
  340. </body>
  341. </html>

注：

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.

【前端图表】echarts实现散点图x轴时间轴的更多相关文章

  1. Android 时间轴的实现

    时间轴 时间轴,顾名思义就是将发生的事件按照时间顺序罗列起来,给用户带来一种更加直观的体验.京东和淘宝的物流顺序就是一个时间轴(如图),想必大家都不陌生. 时间轴的初探 初次见到这种UI,感觉整个布局 ...

  2. 推荐5款实用的jQuery时间轴插件

    1.使用CSS3和jQuery制作的水平时间轴 这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...

  3. 【前端图表】echarts散点图鼠标划过散点显示信息

    在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过散点的时候 ...

  4. echarts之简单的入门——【一】做个带时间轴的柱状统计图

    百度Echarts 官网首页  http://echarts.baidu.com/ 配置项手册 http://echarts.baidu.com/option.html#title GL配置项手册 h ...

  5. echarts使用结合时间轴timeline动态刷新案例

    1.echarts简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  6. 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts

    开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...

  7. ECharts实例开发学习笔记二——时间轴

    记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...

  8. 08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

  9. HighCharts 图表插件 自定义绑定 时间轴数据

    HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...

随机推荐

  1. vue.js路由vue-router（一）——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

  2. PHP抓取网页内容的几种方法

    方法1: 用file_get_contents 以get方式获取内容 <?php $url='http://www.domain.com/?para=123'; $html = file_get ...

  3. C# 对Excel操作时，单元格值的读取

    一.Range中Value与Value2的区别 当range("A1:B10")设置为 Currency (货币)和 Date (日期.日期时间)数据类型时,range2将返回对应 ...

  4. 深入浅出WPF 第一部分(3)

    3.2.3 属性元素 <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> ...

  5. 使用Gmail邮箱

    由于国内不能直接访问google,所以其相关产品也不能直接使用.因为Gmail简洁,使用方便,国际上用的人很多.最近发现网易邮箱大师可以直接访问Gmail,所以将方法介绍给大家,如果大家只有访问Gma ...

  6. 运行maven项目出现的报错

    java问题:严重: Error configuring application listener of class org.springframework.web.context.Cont 解决方案 ...

  7. js---03属性操作

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  8. Android Gson解析json工具类封装

    package com.springSecurity.gson; import java.util.ArrayList; import java.util.List; import java.util ...

  9. C# 正整数和非零正整数校验

    /// <summary> /// 1. 校验正整数(包含0) /// </summary> public static bool isInterger(string str) ...

  10. vue2细节变化的用法

    1.v-el和v-ref合并为一个属性:ref 原来:v-el:my-element 现在: ref="myElement", v-ref:my-component 变成了这样:  ...