Echats

Posted bokeyanghao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="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>

以上是关于Echats的主要内容,如果未能解决你的问题,请参考以下文章

echats点击旋转并切换高亮效果

Echats折线图

Echats折线图

echats--visualmap

Echats

Echats卫星图