echarts的引入和使用

来源：互联网发布：ubuntu怎么移动文件夹编辑：程序博客网时间：2024/05/16 05:49

1.引入方式一，标签式单文件引入

直接引入echarts-all.js，使用起来比较简单

在jsp或html页面放一个div，注意这个放echarts的div一定要给宽度和高度

在javascript块引入，src按需修改

一个简单的例子，附上代码

<script type="text/javascript">$(function(){postChart();});//学员职务统计图function postChart(){//这个echarts对象应该是在echarts-all.js文件里面初始化好的，所以直接拿来用，var myChart = echarts.init(document.getElementById('echarts_post')); var option = {    title : {        text: '学员职务统计',    },    tooltip : {        trigger: 'axis'    },    legend: {        data:["科员","副科级","正科级","副处级","处级"]    },      calculable : true,    xAxis : [        {            type : 'category',            data : ["科员","副科级","正科级","副处级","处级"],        }    ],    yAxis : [        {            type : 'value'        }    ],    series : [        {            name:'人数',            type:'bar',            data:[13,9,5,4,2],        },            ]};myChart.setOption(option); }</script>

2.引入方式二，模块化单文件引入

引入echarts包下的echarts.js

在项目中加入echarts开发包，目录结构如下：

引入echarts包下的echarts.js,src按需修改

附上代码

<script type="text/javascript">var my_ec;//自定义变量，用来保存echarts对象$(function(){//路径配置require.config({          paths:{               "echarts" : "/proj/res/js/echarts",  //proj是我项目的名称        }      });  //使用require(         [             "echarts",             "echarts/chart/pie", // 使用饼图就加载pie模块，按需加载             "echarts/chart/bar", // 使用柱状图就加载bar模块，按需加载       ],       function(ec){       my_ec = ec;//将echarts对象赋值给自定义的变量       postChart();    }    );});//学员职务统计图function postChart(){var myChart = my_ec.init(document.getElementById('echarts_post')); var option = {    title : {        text: '学员职务统计',    },    tooltip : {        trigger: 'axis'    },    legend: {        data:["学员人数"],        y : "bottom",    },      calculable : true,    xAxis : [        {            type : 'category',            data : ["科员","副科级","正科级","副处级","处级"],        }    ],    yAxis : [        {            type : 'value'        }    ],    series : [        {            name:"学员人数",            type:'bar',            data:[13,9,5,4,2],        },            ]};myChart.setOption(option); }</script>

效果如下：

2 0