首页 > 代码库 > echart使用

echart使用

1. <script src="http://www.mamicode.com/2.<script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: ‘http://echarts.baidu.com/build/dist‘
            }
        });
        
         // 使用
     require(//通过动态加载使用echarts
         [
             ‘echarts‘,
             ‘echarts/chart/bar‘,       // 使用柱状图就加载bar模块,按需加载
             ‘echarts/chart/line‘,       //折线图
//              ‘echarts/chart/scatter‘,//散点图
//              ‘echarts/chart/k‘,      //k线图
                ‘echarts/chart/pie‘,    //饼状图
//              ‘echarts/chart/radar‘,  //雷达图
//              ‘echarts/chart/force‘,    //力导和弦图
//              ‘echarts/chart/chord‘,  //和铉图
//              ‘echarts/chart/map‘,    //地图
              ‘echarts/chart/gauge‘,    //仪表盘
              ‘echarts/chart/funnel‘,    //漏斗图
//              ‘echarts/chart/eventRiver‘//事件河流图
         ],
         function (ec) {
              //=================================柱状图===============================
             // 基于准备好的dom,初始化echarts图表
             var myChart = ec.init(document.getElementById(‘main‘)); 
             // 为echarts对象加载数据 ,数据来源eahartView.js
             myChart.setOption(optionCharts); 
            });
            
            
          var optionCharts = {
                tooltip : {
                    trigger: ‘axis‘
                },
                legend: {
                    data:[‘最高‘,‘最低‘]
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataZoom : {show: true},
                        dataView : {show: true},
                        magicType : {show: true, type: [‘line‘, ‘bar‘, ‘stack‘, ‘tiled‘]},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                dataZoom : {
                    show : true,
                    realtime : true,
                    start : 20,
                    end : 80
                },
                xAxis : [
                    {
                        type : ‘category‘,
                        boundaryGap : false,
                        data : function (){
                            var list = [];
                            for (var i = 1; i <= 30; i++) {
                                list.push(‘2013-03-‘ + i);
                            }
                            return list;
                        }()
                    }
                ],
                yAxis : [
                    {
                        type : ‘value‘
                    }
                ],
                series : [
                    {
                        name:‘最高‘,
                        type:‘line‘,
                        data:function (){
                            var list = [];
                            for (var i = 1; i <= 30; i++) {
                                list.push(Math.round(Math.random()* 30));
                            }
                            return list;
                        }()
                    },
                    {
                        name:‘最低‘,
                        type:‘line‘,
                        data:function (){
                            var list = [];
                            for (var i = 1; i <= 30; i++) {
                                list.push(Math.round(Math.random()* 10));
                            }
                            return list;
                        }()
                    }
                ]
            };  
    </script>

    <div id="line" style="height:400px"></div>


    

echart使用