echarts—echarts的简单应用

一、什么是echarts

echarts是一个使用JavaScript实现的开源可视化库。可以使用echarts制作折线图、柱状图、散点图、饼图、k线图等等。

二、下载安装

1. 下载

进入echarts官网，点击下载，有具体的下载方法。

2. 安装

下载完成后是一个js文件，直接将其放入需要使用的项目中，使用时导入。（具体自己定，导入时填写自己的路径即可）。

echarts下载完成.png

三、使用

在文件中导入时要注意，echarts时基于JavaScript实现的开源可视化库。所以在导入时应该在导入js文件后再导入，举例：

# 注意是自己的文件路径<scriptsrc="/static/js/jquery.min.js"></script><scriptsrc="/static/lib/echarts/js/echarts.min.js"></script>

1. 固定数据使用（可以在官方文档学习）

<script src="/static/js/jquery.min.js"></script><script src="/static/lib/echarts/js/echarts.min.js"></script><script>$(function(){// 1.获取div对象varmyChart=echarts.init(document.getElementById('show'));// 2.设置echart参数varoption={title:{text:'公司各部门职员人数统计'},tooltip:{},legend:{//data: ['职员人数']},xAxis:{{#type:'category',//类别#}data:["人事部","后勤部","安保部","市场部","技术部","新媒体部","法务部","董事会","财务部"]},yAxis:{},series:[{name:'职员人数',type:'bar',data:[990,100,0,907,961,943,0,1,1001],}]};// 3.将参数设置给div对象myChart.setOption(option);})</script>

固定数据柱状图.png

2. 动态数据使用（结合ajax和后台）

<script src="/static/js/jquery.min.js"></script><script src="/static/lib/echarts/js/echarts.min.js"></script><script>$(function(){// 1.获取div对象varmyChart=echarts.init(document.getElementById('show'));// 2.设置echart参数varoption={title:{text:'公司各部门职员人数统计'},tooltip:{},legend:{//data: ['职员人数']},xAxis:{{#type: 'category',  //类别#}data:[]},yAxis:{},series:[{name:'职员人数',type:'bar',data:[],}]};{#// 3.将参数设置给div对象#}{#myChart.setOption(option);#}// 4.发送ajax请求$.ajax({url:'/indexAjax/',type:'get',success:function(result){// alert('访问后台成功');console.log(result);// (1)获取数据varx=[];//部门名称vary=[];//部门人数for(vari in result){// js的for循环，遍历的i是索引值vardeptObj=result[i];x.push(deptObj.dept_name);y.push(deptObj.total_num);}// (2).将获取的值赋给echartsoption['xAxis']['data']=x;option['series'][0]['data']=y;// (3).将参数设置给div对象myChart.setOption(option);},error:function(result){alert('访问后台失败')}})})</script>

echarts和ajax、后台一起使用，将后台传入的数据应用在echarts，展示在页面

链接：https://www.jianshu.com/p/ba20300e87f1