zoukankan      html  css  js  c++  java
  • Echats

    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>
  • 相关阅读:
    Codeforces 992C(数学)
    Codeforces 990C (思维)
    Codeforces 989C (构造)
    POJ 1511 Invitation Cards(链式前向星,dij,反向建边)
    Codeforces 1335E2 Three Blocks Palindrome (hard version)(暴力)
    POJ 3273 Monthly Expense(二分)
    POJ 2566 Bound Found(尺取前缀和)
    POJ 1321 棋盘问题(dfs)
    HDU 1506 Largest Rectangle in a Histogram(单调栈)
    POJ 2823 Sliding Window(单调队列)
  • 原文地址:https://www.cnblogs.com/bokeyanghao/p/10903739.html
Copyright © 2011-2022 走看看