• 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; 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:'搜索引擎'}
                                ],
                               
                            }
                        ]
                    };
    就算这个世道烂成一堆粪坑,那也不是你吃屎的理由
  • 相关阅读:
    hive查询结果输出到hdfs上
    重启mysql主从同步mongodb(tungstenreplicator)
    第二个MapReduce
    tungstenreplicator安装
    mysql
    整理requests和正则表达式爬取猫眼Top100中遇到的问题及解决方案
    requests和正则表达式爬取猫眼电影Top100练习
    selenium学习之查找元素(二)
    selenium学习之基本操作(一)
    像素坐标与逻辑坐标的转换
  • 原文地址:https://www.cnblogs.com/whalesea/p/10414053.html
Copyright © 2020-2023  润新知