Echarts插件

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

　　https://www.echartsjs.com/index.html （官网）

　　了解：

　　　　AMD：模块化开发方式；　　

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

　　　　options：选项；

　　　　图表介绍：

　　　　　　柱状图（bar）

　　　　　　折线图（line）

　　　　　　饼图（pie）

　　　　　　散点图（scatter）

　　　　　　地图（map）

扫描二维码关注公众号，回复： 6262455 查看本文章

　　　　　　气泡图（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="width: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>