码迷,mamicode.com
首页 > 其他好文 > 详细

echarts

时间:2016-11-14 01:36:09      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:min   back   echarts   onload   www   通过   文件   chart   页面   

学习网址:

http://www.php100.com/
http://www.php100.com/manual/jquery/index.html
Highcharts: http://www.hcharts.cn/demo/highcharts

Echart:
http://echarts.baidu.com/echarts2/doc/example.html
http://blog.csdn.net/xuemoyao/article/details/16358571
http://echarts.caixin.com/doc/doc.html

收藏格式:
http://echarts.baidu.com/echarts2/doc/example/toolbox.html

模块化单文件引入ECharts,你需要如下4步:
为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的)
通过script标签引入echarts主文件
为模块加载器配置echarts的路径,从当前页面链接到echarts.js所在目录,见上述说明
动态加载echarts及所需图表然后在回调函数中开始使用(容我罗嗦一句,当你确保同一页面已经加载过echarts,再使用时直接require(‘echarts‘).init(dom)就行)

 

eg:

(html文件信息)

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="../demo.js"></script>
    <title>ECharts</title>
    <script src="../echarts.common.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body onload="echarts_test(‘main‘,x_data,y_item);">
    <input type="button" id="echarts_01" value="echarts_01" onclick="echarts_test(‘branch‘,x_data,y_item)">
    <div id="main" style="height:400px;width:1000px"></div>    
    <script type="text/javascript">
        var x_data = [1,2,3,4,5,6,7,8,9];
        var y_item = [2,4,6,2,9,5,7,4,7];            
    </script>
    <dir id="branch" style="height:400px;width:1000px"></dir>
    
    
</body>

(js文件信息)

function echarts_test (id, x_data, y_item) 
{
    // 基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById(id)); 
    var option = {
        title:{
            text:title_name,
            show:false,
        },
        tooltip: {
            show: true
        },
        legend: {
            data:[功率/dB]
        },
        xAxis : [
            {
                type : category,
                data : y_item,
            }
        ],
        yAxis : [
            {
                type : value
            }
        ],
        series : [
            {
                "name":"功率/dB",
                "type":"line",
                "data": x_data,
            }
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option); 
}

 

echarts

标签:min   back   echarts   onload   www   通过   文件   chart   页面   

原文地址:http://www.cnblogs.com/liuyang92/p/6060113.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!