echarts

Posted aWolfMan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;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的主要内容，如果未能解决你的问题，请参考以下文章

新手求助echarts关系图

怎么用java编写echarts代码

Echarts 如何防止内存泄漏

Echart 词云图 上手代码 同含（echarts-wordcloud.js）最简单的教程 复制可用

echarts柱状图颜色设置：echarts柱状图如何设置不同颜色？（代码）

echarts怎么把代码移动在hbuilder里面