echarts+ajax+restful实现图表(bar/line)

先看效果图：

基本的js引用:

代码如下	复制代码
<script type="text/javascript" src="js/esl/esl.js"></script> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/jquery.js"></script>

2、创建一个div用来展示图表，需给定高度

代码如下	复制代码
<div id="main" style="height:800px"></div>

3、配置路径及js的引用

代码如下

复制代码

// 路径配置
require.config({
    paths: {
    echarts: 'js'
    }
});
// 使用
require(
[
    'echarts',
    'echarts/chart/bar',
    'echarts/chart/line'
],

4、echarts配置js：

代码如下

复制代码

var option = {
//设置标题
    title:{
    text:'',
    subtext:''
    },
      tooltip : {
      trigger: 'axis',
      axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
      },
      legend: {
      data:[]
      },
      toolbox: {
      show : true,
      feature : {
          mark : {show: true},
          dataView : {show: true, readOnly: false},
          magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          restore : {show: true},
          saveAsImage : {show: true}
      }
      },
calculable : true,
yAxis : [
     {
         type : 'value'
     }
     ],
     xAxis : [
          {
          type : 'category',
          data : []
          }
      ],
series : [
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      },
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      },
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      },
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      },
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      },
      {
          name:'',
          type:'bar',
          stack: '总量',
          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
          data:[]
      }
]
};

5、ajax+restful获取服务器端的数据

代码如下

复制代码

$.ajax({
type:'get',//jquey是不支持post方式跨域的
async:false,
url:"http://10.130.2.245:9088/dailyAll?limit=25", //跨域请求的URL
dataType:'<a href="" class="keylink" title=" JSONP" target="_blank">JSONP</a>',
jsonp: "callback",//服务端用于接收callback调用的function名的参数
success : function(result){
    if (result) {
       option.title.text = "("+result.titles+")堆积图";
       option.title.subtext = result.titles;
       option.legend.data = result.titles;

       option.xAxis[0].data = result.days;

       option.series[0].name = result.titles[0];
       option.series[0].data = result.pvcnts;

       option.series[1].name = result.titles[1];
       option.series[1].data = result.hundsuncnts;

       option.series[2].name = result.titles[2];
       option.series[2].data = result.apputrackcnts;

       option.series[3].name = result.titles[3];
       option.series[3].data = result.utrackcnts;

       option.series[4].name = result.titles[4];
       option.series[4].data = result.mobilelogcnts;

       option.series[5].name = result.titles[5];
       option.series[5].data = result.dratiocnts;
       myChart.setOption(option);
    }
},
error:function(){
    alert('fail');
}
});

时间： 2024-11-10 05:29:21

echarts+ajax+restful实现图表(bar/line)

echarts+ajax+restful实现图表(bar/line)的相关文章

echarts+java封装类实现图表的实例

echarts+ajax+ashx+json调用数据库数据实现饼图和柱状图

基于echarts+ajax数据库读取数据并返回前端

echarts ajax jquery-Echarts中require.config配置问题以及文件用途问题?

asp.net使用echarts展示图表数据的示例

echarts 图表-关于百度的echart 的力导向图的问题

flask+sqlite3+echarts2+ajax数据可视化--静态图

开源库Magicodes.ECharts使用教程

使用Apache Wink和Ajax构建富Java Web应用程序