图表到项目的简单集成（Echarts 和 HighCharts）

最新推荐文章于 2024-07-05 10:34:38 发布

驭乐MJ

最新推荐文章于 2024-07-05 10:34:38 发布

阅读量5.2k

点赞数

本文链接：https://blog.csdn.net/mj404/article/details/42849885

版权

In Action 同时被 3 个专栏收录

69 篇文章 0 订阅

订阅专栏

Java EE & Java

48 篇文章 0 订阅

订阅专栏

JSF and WebView

12 篇文章 0 订阅

订阅专栏

个人感觉 HigCharts 要好点，http://www.hcharts.cn/ 这是官网,使用的话结合演示：http://www.hcharts.cn/demo/index.php 就能很快上手。使用方法会以百度图表Echarts为例，，大同小异而已.

这是百度图表Echarts 的官网：http://echarts.baidu.com/

在使用过程中主要看看文档，然后看一下实例，就可以集成到项目里了，在官网里可以简单的看到文档。

在集成到项目的过程中注意路径的配置。如果使用的是xhtml 注意要加上//<![CDATA[ ........//]]>

避免出错。

还有就是在配置图表和交流数据的过程中使用的一般都是JSON格式，需要对JSON格式有种清晰的认识。

下面贴出静态的一个demo，数据都可以改为程序传输，看你使用的什么后台技术了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>debug-the-Echarts</title>

</head>
<body>
    <div id="chart-unit" style="height: 400px;"></div>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">

    /*一开始不能使用最后确认是因为路径的问题！！！！！！！！！！使用cdn就没事了！！！！！！！*/
// 在xhtml中注意使用这个标签避免页面错误
//<![CDATA[ 
 require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
           
 option = {
    title : {
        text: '',
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    
    calculable : true,

    //生成图表数据开始
    legend: {
        //
        data:['***大队','****侦查大队','*****警察大队']
    },
    xAxis : [
        {
            type : 'category',
            //'已立案','已破案','已移诉','已处罚','已调解','拘留','取保','监居','逮捕','警告','行政罚款','行政拘留'
            data : ['已AAA','已BBB','已CCC','以DDD','已FFF','已GGG','QQQQ','WWWW','EEEE','TTTT']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
name:'***大队',type:'bar', data:[425,0,466,0,69,0,79,99,9,25]},{
name:'****侦查大队',type:'bar', data:[32,0,27,0,35,0,35,40,0,7]},{
name:'*****警察大队',type:'bar', data:[6,0,6,0,9,0,1,1,0,0]}
    ]
    //生成图表数据结束
};
           
           require(
                    [
                        'echarts',
                        'echarts/chart/bar'
                        ],
                    function(ec) {
                        var unitChart = ec.init(document.getElementById('chart-unit'));
                        // alert(sfdgasg);
                        unitChart.setOption(option);                        
                        }
                   );
//]]> 
</script>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    ECharts单文件引入
    <!-- <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> -->
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
    <!-- 以上是柱状图，下面实验扇形图！ -->
    <div id="pie-chartExample" style="height: 400px;"></div>
    <div id="pie-chartSelf" style="height: 400px;"></div>
    扇形!!!
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">

option_pieExample = {
    title : {
        text: '南丁格尔玫瑰图',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [20, 110],
            center : ['25%', 200],
            roseType : 'radius',
            width: '40%',       // for funnel
            max: 40,            // for funnel
            itemStyle : {
                normal : {
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    label : {
                        show : true
                    },
                    labelLine : {
                        show : true
                    }
                }
            },
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        },
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['75%', 200],
            roseType : 'area',
            x: '50%',               // for funnel
            max: 40,                // for funnel
            sort : 'ascending',     // for funnel
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
};

    var option_pieSelf = {
                    tooltip: {
                          trigger: 'item',
                          formatter: "{a} <br/>{b} : {c} ({d}%)"//配置百分比
                    },

toolbox: {//工具栏配置
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,

                    legend: {
        x : 'center',
        y : 'bottom',
        data:['A类型','B类型','C类型','D类型','E类型','F类型']
                    },
                    
                    series : [
                     {
            name:'面积模式',//
            type:'pie',
            radius : [30, 140],//半径范围
            center : ['50%', 200],//中心原点的坐标可以使用px和百分比
            roseType : 'area',//这里使用面积模式还有半径模式'radius'，就是大小根据半径来显示还是面积来显示
            x: '50%',               // for funnel
            max: 50,                // for funnel
            sort : 'ascending',     // for funnel
            data:[
              {value:10, name:'A类型'},
                {value:5, name:'B类型'},
                {value:15, name:'C类型'},
                {value:25, name:'D类型'},
                {value:20, name:'E类型'},
                {value:35, name:'F类型'}
            ]
        }
                    ]
                };
        
                // 为echarts对象加载数据 
               
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' 
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                // alert("sgreagreag");
                var myPieChartExample = ec.init(document.getElementById('pie-chartExample')); 
                var myPieChartSelf = ec.init(document.getElementById('pie-chartSelf')); 
                 myPieChartExample.setOption(option_pieExample); 
                 myPieChartSelf.setOption(option_pieSelf); 
             }
                
        );


        /* xAxis : [
        {
            type : 'category',
          data : ['1月','2月',{
            value:'3月',
            textStyle: {
              color:'red',
              
                
            }
            
          },'4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],*/
    </script>



</body>

</html>