zoukankan      html  css  js  c++  java
  • Echarts插件

      

      ECharts是一个非常好用的插件,用于进行 树状图,折线图,饼图,地图等等,系列视图的绘制。(详情看官网)

      https://www.echartsjs.com/index.html    (官网)

      了解:

        AMD:模块化开发方式;  

        引入文件后:console.log(echarts)  //得到一个echarts的对象

        options:选项;

        图表介绍:

          柱状图(bar)

          折线图(line)

          饼图(pie)

          散点图(scatter)

          地图(map)

          气泡图(bubble)

      前提工作:

        1.引入插件

        2.设一个视图容器,为行内样式,

        3.设置一个id,以便进行dom获取

      插件的使用分为3个步骤;

      第一步:

        //初始化视图环境

        使用  var myecharts=echarts.init()  里面的参数就是,对dom元素的获取  

            那么 myecharts 就是他的实例对象

      第二步:

        //配置信息      变量名随便取

        var opaction={

          title:{    //title:图表的标题

          },

          legend:{    //legend 图例组件

          },

          xAxis:{    //x轴坐标

          },

          Yaxis:{    //y轴坐标

          },

          series:{    //系列列表

          },

          tooltip:{    //提示框组件

            formatter:    //这个属性,便可显示具体的值,百分比,名称,等

          }

        }

        详情看官网

      第三部:

        //将配置好的信息方法 实例对象上

        myecharts.setOption(opaction);

      下面会有一个案例: 

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>饼图</title>
    <style>
    #main{
    border:red 1px solid;
    }
    </style>
    </head>
    <body>
    <div id="main" style="600px;height:400px">

    </div>
    </body>
    </html>
    <script src="echarts.js"></script>
    <script>
    var myecharts=echarts.init(document.getElementById("main"));
    var opaction={
    title:{
    text:"饼图",
    left:"center",
    textStyle:{
    color:"red"
    }
    },
    series:{
    type:"pie",
    data:[
    {
    name:"web",
    value:120
    },
    {
    name:"android",
    value:30
    },
    {
    name:"ios",
    value:30
    },
    {
    name:"java",
    value:50
    },
    {
    name:"python",
    value:70
    },
    {
    name:"php",
    value:60
    }

    ]
    },
    tooltip:{
    formatter:"{b}:{d}%"
    }
    };
    myecharts.setOption(opaction);
    </script>

      

  • 相关阅读:
    糍粑大叔的独游之旅-战斗!之弹道实现
    攻击判定流程研究: 瀑布算法、圆桌算法、混合算法解析
    GitHub排名TOP30的机器学习开源项目/贪心学院
    学习ES7+ES8
    k8s Ipvs 内部网络自动分配和内部网络一致ip地址,导致ip冲突
    Linux操作系统load average过高,kworker占用较多cpu
    chrome断点调试&&其他技巧
    Mongodb更新数组$pull修饰符 (mongodb 修改器($inc/$set/$unset/$push/$pop/upsert))
    记一次线上Java程序导致服务器CPU占用率过高的问题排除过程
    解决并发问题,数据库常用的两把锁(转)
  • 原文地址:https://www.cnblogs.com/gdqx/p/10902484.html
Copyright © 2011-2022 走看看