Echart 类库 option设置问题

ggg1 发布于 2015/01/25 18:07
阅读 4K+
收藏 0

【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”

@Liuzh_533 你好,想跟你请教个问题:

"你可以使用本项目直接构造一个Option对象,转换为JSON后直接用js设置myChart.setOption(option)"关于文档里的这句话,有实际的demo吗,我做了,但是图表总是显示不出来。转成JSON是使用GsonOption的toString方法吗?

我的java代码:

  @RequestMapping("/chartData")  
  @ResponseBody public String chartData() {  
          GsonOption option = new GsonOption();
        option.legend("zzzzz");

        option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar), Tool.restore, Tool.saveAsImage);

        option.calculable(true);
        option.tooltip().trigger(Trigger.axis).formatter("Temperature : <br/>{b}km : {c}°C");

        ValueAxis valueAxis = new ValueAxis();
        valueAxis.axisLabel().formatter("{value} °C");
        option.xAxis(valueAxis);

        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.axisLine().onZero(false);
        categoryAxis.axisLabel().formatter("{value} km");
        categoryAxis.boundaryGap(false);
        categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80,90);
        option.yAxis(categoryAxis);

        Line line = new Line();
        line.smooth(true).name("zzzzzzzzzzz").data(15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5).itemStyle().normal().lineStyle().shadowColor("rgba(0,0,0,0.4)");
        option.series(line);
      
        return option.toPrettyString();

}

jsp页面代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="echarts/build/dist/echarts.js"></script>
    <script src="js/jquery-1.3.2.min.js"></script>
    
    <script type="text/javascript" language="javascript">  
        var myChart;  
        var eCharts;  
 
        require.config({  
            paths : {  
                'echarts' : 'echarts/build/dist' ,  
            }  
        });  
 
        require(  
            [ 'echarts',
              'echarts/chart/bar',
              'echarts/chart/line'  
            ], drawEChart //异步加载的回调函数绘制图表  
        );  
 
        //创建ECharts图表方法  
        function drawEChart(ec) {  
            eCharts = ec;  
            myChart = eCharts.init(document.getElementById('main'));  
            myChart.showLoading({  
                text : "图表数据正在努力加载..."  
            });  
            myChart.hideLoading();  
            getChartData();//aja后台交互   
        }  
    </script>  
 
 
    <script type="text/javascript">  
        function getChartData() {  
            //获得图表的options对象  
            //通过Ajax获取数据  
            $.ajax({  
                type : "post",  
                async : false, //同步执行  
                url : "echarts/chartData.shtml",  
                data : {},  
                dataType : "JSON", //返回数据形式为json  
                success : function(result) {  
                    if (result) {
                        myChart.hideLoading();  
                        myChart.setOption(result);  
                    }  
                },  
                error : function(errorMsg) {  
                    alert("不好意思,大爷,图表请求数据失败啦!");  
                    myChart.hideLoading();  
                }  
            });  
        }  
    </script>  
</body>
</html>

加载中
0
Liuzh_533
Liuzh_533

项目下面的test中有各种各样的例子,和Echarts官方的是对应的,你可以看看。

另外我osc博客有一篇特别简单的例子,你可以参考。

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部