devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ECharts可视化库--常用组件_echarts组件

作者：Gausst松鼠会 | 2024-02-18 10:37:17

赞

踩

echarts组件

目录

一.series系列

二.常见组件 

1.标题title

2.图例legend 

3.工具栏toolbox

4.提示框tooltip 

5.坐标轴 xAxis yAsix

6.series系列

        上一篇已经介绍了ECharts库的导入工作和绘制基本的图标，今天我们来了解一下常用的组件，如果对数据可视化感兴趣的麻烦点个关注，内容会持续更新。

        如果不清楚ECharts库的导入过程的可以参考：ECharts导入

在介绍常用组件之前，先了解一下series系列

一.series系列

        我们知道数据的可视化包含了我们可以直接看见的图表，还包含了数据，而这些都包含series系列里，一个series系列必须包含两个要素：图表数值data和图表类型type，有了这两个要素数据才可以表现出来

常见的图表类型：

  • 折线图line
  • 柱状图bar
  • 饼图pie
  • 散点图scatter
  • 关系图graph
  • 树图tree

        例如：一个折线图表,type为line，给定数据data

  1. <script type="text/javascript">
  2.     // 因为该demo会经常更该，所以要销毁前一个图表
  3.     echarts.init(document.getElementById('div')).dispose();
  4.     //定义
  5.     var myChart = echarts.init(document.getElementById('div'));
  6.     var option={
  7.         xAxis:{
  8.             data:[
  9.                 'jan','feb','mar','apr','may','jun',
  10.                 'jul','aug','sep','oct','nov','dec'
  11.             ]
  12.         },
  13.         yAxis:{},
  14.         series:[
  15.             {
  16.                 type:'line',
  17.                 data:[43,62,56,91,23,5,12,31,38,97,86,57]
  18.             }
  19.             ]
  20.     }
  21.   myChart.setOption(option);
  22. </script>

二.常见组件 

1.标题title

  • 主标题 title
  • 副标题 subtext
  • 位置 left
  • 主标题样式 textStyle
  • 副标题样式 subtextStyle
  • 可见性 show

例如：在上面的例子中加入标题

2.图例legend 

        图例legend方便对数据的分辨，它的data参数和series系列搭配使用

  1.  var option={
  2.         legend:{
  3.          data:['人数'],  //要和series的name对于
  4.     },
  5.         xAxis:{
  6.             data:[
  7.                 'jan','feb','mar','apr','may','jun',
  8.                 'jul','aug','sep','oct','nov','dec'
  9.             ]
  10.         },
  11.         yAxis:{},
  12.         series:[
  13.             {
  14.                 name:'人数',
  15.                 type:'line',
  16.                 data:[43,62,56,91,23,5,12,31,38,97,86,57]
  17.             }
  18.             ]
  19.     }

在数据上会多出legend图例 

3.工具栏toolbox

  • 保存图片 saveAslmage
  • 配置项还原 restore
  • 数据视图工具 dataView
  • 数据区域缩放 dataZoom
  • 动态类型切换 magicType

例如：加上toolbox后

  1. toolbox:{
  2.           feature:{
  3.               saveAsImage:{type:'jpg'},
  4.               dataView:{},
  5.               restore:{},
  6.               dataZoom:{},
  7.               magicType:{
  8.                   type:[
  9.                       'line',
  10.                       'bar',
  11.                       'stack',
  12.                       'titled'
  13.                   ]
  14.               }
  15.           }
  16.         },

图表上会多出一些工具 

4.提示框tooltip 

提示触发方式trigger

item 图形触发，主要在散点图，饼图等无类目轴的图表中使用

axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表

none什么都不触发

例如：在上面的例子中加入提示框

  1.  tooltip:{
  2.           trigger:'axis'
  3.         },

当鼠标触碰到图表坐标时，会有提示信息

5.坐标轴 xAxis yAsix

  •  坐标名称 name
  • 类名数据 data 

y轴的分割设置：

  • splitNUmber 分割段数
  • interval 坐标分割间隔
  • minlnterval 坐标轴最小间隔
  • maxlnterval 坐标轴最大间隔

6.series系列

  •  类型 type
  • 类名名 name
  • 数据data
  • 标记点 markPoint

markPoint：{

        data：[

{type:'min'},{type:'max'},{value:'value',coord:[x,y]}        //coord 坐标

]

}

  • 标记线 markLine

markLine：{

        data：[

{type:'min'},{type:'max'},{value:'value',coord:[x,y]}        //coord 坐标

]

}

全例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. <script src="echart.js"></script>
  7.     <style>
  8.  
  9.     </style>
  10. </head>
  11. <body>
  12. <div style="height: 500px;width: 600px" id="div"></div>
  13. <script type="text/javascript">
  14.     // 因为该demo会经常更该，所以要销毁前一个图表
  15.     echarts.init(document.getElementById('div')).dispose();
  16.     //定义
  17.     var myChart = echarts.init(document.getElementById('div'));
  18.     var option={
  19.         legend:{
  20.          data:['人数'],  //要和series的name对于
  21.     },
  22.   title:{
  23.           text:'主标题',
  24.             subtext:'副标题',
  25.             textStyle:{
  26.               color:'blue',
  27.                 fontSize:20
  28.             },
  29.             subtextStyle:{
  30.               color: 'red',
  31.                 fontSize: 10
  32.             }
  33.         },
  34.         toolbox:{
  35.           feature:{
  36.               saveAsImage:{type:'jpg'},
  37.               dataView:{},
  38.               restore:{},
  39.               dataZoom:{},
  40.               magicType:{
  41.                   type:[
  42.                       'line',
  43.                       'bar',
  44.                       'stack',
  45.                       'titled'
  46.                   ]
  47.               }
  48.           }
  49.         },
  50.         tooltip:{
  51.           trigger:'axis'
  52.         },
  53.         xAxis:{
  54.             data:[
  55.                 'jan','feb','mar','apr','may','jun',
  56.                 'jul','aug','sep','oct','nov','dec'
  57.             ]
  58.         },
  59.         yAxis:{},
  60.         series:[
  61.             {
  62.                 name:'人数',
  63.                 type:'bar',
  64.                 data:[43,62,56,91,23,5,12,31,38,97,86,57],
  65.             markPoint:{
  66.                     data:[
  67.                         {type:'min'},
  68.                         {type: 'max'},
  69.                         {coord:[0,70],value:70},
  70.                     ]
  71.             },
  72.                 // markLine:{
  73.                 //     date:[
  74.                 //         {name:'平均线',type:'min'},
  75.                 //     ]
  76.                 // },
  77.             }
  78.             ]
  79.     }
  80.   myChart.setOption(option);
  81.  
  82. </script>
  83. </body>
  84. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/107340?site
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。