zoukankan      html  css  js  c++  java
  • echarts

    学习网址:

    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;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;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); 
    }
  • 相关阅读:
    当使用了相对路径 <base href="<%= basePath %>" /> 后,全局都只能使用相对路径
    springmvc controller转发setViewName时找不到路径的问题以及转发视图时出现找不到样式的问题
    springmvc 使用jq传递json数据时出现415错误
    eclipse
    渗透测试记录
    在CentOS上安装Mysql使用yum安装mysql
    centos 安装 jdk
    wget和curl方式下载JDK
    Python程序的首行
    打印标准目录
  • 原文地址:https://www.cnblogs.com/liuyang92/p/6060113.html
Copyright © 2011-2022 走看看