zoukankan      html  css  js  c++  java
  • 百度的Echatrs折线图学习笔记

     百度ECharts入门

    文章的素材有大量注释哦~基本上每一行都注释了配合官方文档看应该是无压力的

    Echarts文档

    1、新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。

    1. <!DOCTYPE html>
    2. <head>
    3. <meta charset="utf-8">
    4. <title>ECharts</title>
    5. </head>
    6.  
    7. <body>
    8. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    9. <div id="main" style="height:400px"></div>
    10. </body>

    2、新建script标签引入模块化单文件echarts.js

    1. <!DOCTYPE html>
    2. <head>
    3. <meta charset="utf-8">
    4. <title>ECharts</title>
    5. </head>
    6. <body>
    7. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    8. <div id="main" style="height:400px"></div>
    9. <!-- ECharts单文件引入 -->
    10. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    11. </body>

    3、新建script标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js),引入图表文件见引入ECharts2

    1. <!DOCTYPE html>
    2. <head>
    3. <meta charset="utf-8">
    4. <title>ECharts</title>
    5. </head>
    6. <body>
    7. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    8. <div id="main" style="height:400px"></div>
    9. <!-- ECharts单文件引入 -->
    10. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    11. <script type="text/javascript">
    12. // 路径配置
    13. require.config({
    14. paths: {
    15. echarts: 'http://echarts.baidu.com/build/dist'
    16. }
    17. });
    18. </script>
    19. </body>
     

    4、script标签内动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成,option见API & Doc

    1. <!DOCTYPE html>
    2. <head>
    3. <meta charset="utf-8">
    4. <title>ECharts</title>
    5. </head>
    6. <body>
    7. <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    8. <div id="main" style="height:400px"></div>
    9. <!-- ECharts单文件引入 -->
    10. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    11. <script type="text/javascript">
    12. // 路径配置
    13. require.config({
    14. paths: {
    15. echarts: 'http://echarts.baidu.com/build/dist'
    16. }
    17. });
    18.  
    19. // 使用
    20. require(
    21. [
    22. 'echarts',
    23. 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
    24. ],
    25. function (ec) {
    26. // 基于准备好的dom,初始化echarts图表
    27. var myChart = ec.init(document.getElementById('main'));
    28.  
    29. var option = {
    30. tooltip: {
    31. show: true
    32. },
    33. legend: {
    34. data:['销量']
    35. },
    36. xAxis : [
    37. {
    38. type : 'category',
    39. data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    40. }
    41. ],
    42. yAxis : [
    43. {
    44. type : 'value'
    45. }
    46. ],
    47. series : [
    48. {
    49. "name":"销量",
    50. "type":"bar",
    51. "data":[5, 20, 40, 10, 10, 20]
    52. }
    53. ]
    54. };
    55.  
    56. // 为echarts对象加载数据
    57. myChart.setOption(option);
    58. }
    59. );
    60. </script>
    61. </body>
     

    5、浏览器中打开查看

    折线图的学习笔记

     一个标准折线图图表有这几大元素

    第一:标题

    1. //标题
    2. title:{
    3. //文本
    4. text:"未来一周气温变化",
    5. //子标题
    6. subtext:"纯属虚构"
    7. },//!-文本

     第二:鼠标移入上去的提示框

    1. //提示框
    2. tooltip:{
    3. //坐标轴触发显示
    4. trigger:"axis"
    5.  
    6. },

     第三:图例

    1. //图例 每个图表只能有一个
    2. legend:{
    3. data:['最高气温','最低气温']
    4. },//!-图例

     第四:工具箱

    1. //工具箱 每个图表只能有一个
    2. toolbox:{
    3. //是否显示工具箱 图表右上角的一系列开关
    4. show:true,
    5. //特效duang
    6. feature:{
    7. //辅助线标志
    8. mark:{show:true},
    9. //数据视图 可以显示文本数据
    10. //是否仅读?NO
    11. dataView:{show:true,readOnly:false},
    12. //可以切换更多的图形特效吗?
    13. //YSE! 可以切换line和bar类型
    14. magicType:{show:true,type:["line",'bar']},
    15. //卧槽!按错了,可以复原吗?
    16. //YES!
    17. restore:{show:"true"},
    18. //是否可以保存为图片?
    19. //YES!图片可以嵌入PPT里哦~
    20. saveAsImage:{show:true}
    21. },//!-特效
    22.  
    23. },//!-工具箱

     第五:横坐标

    1. xAxis:[
    2. {
    3. //X轴为类目型
    4. type:"category",
    5. //是否两端留白?
    6. boundaryGap:false,
    7. //横坐标数据
    8. //只有类目型的才配拥有data属性!
    9. data:["周一","周二","周三","周四","周五","周六","周日"]
    10.  
    11. }
    12. ],//!-横坐标
     

     第六:纵坐标

    1. yAxis:[
    2. {
    3. //Y轴类型为数值型
    4. type:"value",
    5. //Y轴的文本标签
    6. //改成 万°C会不会被喷?
    7. axisLabel:{
    8. //间隔名称..实际上就是单位
    9. //{value}传递过来的就是值
    10. formatter:"{value}°C"
    11. }
    12. }
    13. ],
    14. //!-纵坐标
     

     第七:图表数据

    1. series:[
    2. //数据一
    3. {
    4. name:"最高气温",
    5. //必要的参数
    6. //不声明为line,电脑妹纸会知道你是个line?
    7. type:"line",
    8. //最高气温
    9. //对应周一-周日
    10. data:[11,11,15,13,12,13,10],
    11. //标注 也就是图表上的那个类似于提示气泡的东西
    12. markPoint:{
    13. data:[
    14. //会出现两个提示气泡
    15. //一周类当中最高气温最大为多少
    16. {type:"max",name:"最大值"},
    17. //一周类最高气温最低为多少
    18. {type:"min",name:"最小值"}
    19. ]
    20. },
    21. //!-标注
     
  • 相关阅读:
    python自动生成bean类
    CVPR2021 | SETR: 使用 Transformer 从序列到序列的角度重新思考语义分割
    经典论文系列 | 缩小Anchor-based和Anchor-free检测之间差距的方法:自适应训练样本选择
    单阶段实例分割综述
    CVPR2021提出的一些新数据集汇总
    使用 PyTorch Lightning 将深度学习管道速度提高 10 倍
    C#中使用ref和out传参的方法及区别
    读书笔记《重构 改善既有代码的设计》(第2版本)
    《大话设计模式》等读后感
    OOP、封装、继承、多态,真的懂了吗?
  • 原文地址:https://www.cnblogs.com/gbtags/p/4759458.html
Copyright © 2011-2022 走看看