时间的法外狂徒

导航

echarts功能配置实例----柱/折线、饼图

---恢复内容开始---

echarts中的柱状图和折线图的参数配置可以共用，一般只需要修改图表类型这一个参数即可。

一、echarts最简单的实例

　　1、折线图/柱状图

　　

<html>
    <head>
        <script src="resource/jquery-3.3.1.min.js"></script>
        <script src="resource/echarts.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //创建存放图表的echar
                var chart = echarts.init($('#echartsLineDemo')[0]);
                //echars的参数配置项
                option = {
                    xAxis: {
                        //坐标轴类型，大致可分类目轴category，x轴；数值轴value，y轴；
                        type: 'category',
                        //坐标轴名称数组
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        //需要显示的数据
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        //图表类型：line是折线、bar是柱状图、pei是饼图。
                        type: 'line'
                    }]
                };
                //添加option
                chart.setOption(option);
            });

        </script>
    </head>
    <body>
        <div id="echartsLineDemo" style="height: 500px;width: 800px;" >
            
        </div>

    </body>
</html>

补充：折线图和柱图图的配置类似，只需把图表类型修改成bar即可。

　　2、饼图

　　　　只需要更改option的配置即可。

option = {
                    title : {
                        text: '某站点用户访问来源',
                       
                        x:'center'
                    },
                   
                   
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:335, name:'直接访问'},
                                {value:310, name:'邮件营销'},
                                {value:234, name:'联盟广告'},
                                {value:135, name:'视频广告'},
                                {value:1548, name:'搜索引擎'}
                            ],
                           
                        }
                    ]
                };

 

posted on 2019-02-21 17:31  抄手砚  阅读(1023)  评论(0)    收藏  举报