代码人生的小狗窝

一行行枯燥的代码,却描绘出人生的点点滴滴

您现在的位置是:首页>_Web开发

Echarts的setOption如何用

发布时间:2018-05-25浏览(2093)

    Echarts的setOption怎么用
    我设置当我点击按钮的时候,里面的id为main的div显示echarts报表,可是显示了一下,马上又什么都没有了.......好像又被耍了一次,很奇怪。
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/js/SimpleCanleder.js"></script>
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->


    <!-- ECharts单文件引入 -->
    <script src="${pageContext.request.contextPath}/js/echarts.js"></script>
    <script type="text/javascript">
    // 路径配置
    require.config({
    paths : {
    echarts : '${pageContext.request.contextPath}/js'
    }
    });
    // 使用
    require(
    [ 'echarts', 'echarts/chart/line', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
    ],
    function(ec) {
    // 基于准备好的dom,初始化echarts图表
    var myChart = ec.init(document.getElementById('main'));

    var option = {
    //animation:false,
    tooltip : {
    show : true,
    trigger : 'axis'
    },
    legend : {
    data : [ '销量', '营业额' ]
    },
    toolbox : {
    show : true,
    feature : {
    mark : {
    show : true
    },
    dataView : {
    show : true,
    readOnly : false
    },
    magicType : {
    show : true,
    type : [ 'line', 'bar' ]
    },
    restore : {
    show : true
    },
    saveAsImage : {
    show : true
    }
    }
    },
    xAxis : [ {
    type : 'category',
    data : (function() {
    var dataarr = [];
    $
    .ajax({
    async : false, //这句必须加
    method : 'post',
    url : '${pageContext.request.contextPath}/GetMonthServlet',
    dataType : "json",
    success : function(data) {
    dataarr = data.month;
    }
    });
    return dataarr;
    })()
    } ],
    yAxis : [ {
    type : 'value'
    } ],
    series :[]/* [
    {
    "name" : "销量",
    "type" : "line",
    "data" : [](function() {
    var dataarr = [];
    $
    .ajax({
    async : false, //这句必须加
    method : 'post',
    url : '${pageContext.request.contextPath}/GetSalesVolumeServlet',
    dataType : "json",
    success : function(data) {
    dataarr = data.sales;
    }
    });
    return dataarr;
    })()
    },
    {
    "name" : "营业额",
    "type" : "line",
    "data" :[] (function() {
    var dataarr = [];
    $
    .ajax({
    async : false, //这句必须加
    method : 'post',
    url : '${pageContext.request.contextPath}/GetBusinessVolumeServlet',
    dataType : "json",
    success : function(data) {
    dataarr = data.businessVolume;
    }
    });
    return dataarr;
    })()
    } ]*/
    };
    //myChart.showLoading({text:'正在努力加载数据中....'});

    // 为echarts对象加载数据 
    myChart.setOption(option);
    });//end of require
    </script>
    <script type="text/javascript">
    function submitForm() {
    var dom = document.getElementById('main');
    var myChart = require('echarts').init(dom);

    var option = {
    tooltip : {
    show : true,
    trigger : 'axis'
    },
    legend : {
    data : [ '销量', '营业额' ]
    },
    xAxis : [ {
    type : 'category',
    data : (function() {
    var dataarr = [];
    $
    .ajax({
    async : false, //这句必须加
    method : 'post',
    url : '${pageContext.request.contextPath}/GetMonthServlet',
    dataType : "json",
    success : function(data) {
    dataarr = data.month;
    }
    });
    return dataarr;
    })()
    } ],
    yAxis : [ {
    type : 'value'
    } ],
    series : [ {
    name : "销量",
    type : "line",
    data : [ 1, 2, 3, 4, 5, 6 ]

    }, {
    name : "营业额",
    type : "line",
    data : [ 6, 5, 4, 3, 2, 1 ]
    } ]
    };

    //设置series
    myChart.setOption(option);

    }//end of submitForm
    </script>
    <title>ECharts</title>

    </head>


    <body>

    <div>
    <form onsubmit="">
    First name: <input type="text" name="x1" /> <br /> Last name: <input
    type="text" name="x2" />
    <button type="submit" class="btn btn-default" onclick="submitForm()">查询</button>
    </form>
    </div>
    <div id="main" style="height:400px"></div>

    </body>



    ------解决思路----------------------
    自己搞定花时间上论坛问