zoukankan      html  css  js  c++  java
  • 2021.3.22 Android Echart绘制折线图

    一、今日学习内容

       

    type:'line'

     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>折线图</title>
        <script src="script/echarts.min.js"></script>
    </head>
    <body>
    <!--为echarts准备一个容器,画图就画在里面-->
    <div id="box" style=" 600px;height: 600px;"></div>
    <script>
        //初始化ehcharts实例
        var myChart=echarts.init(document.getElementById("box"));
        //指定图表的配置项和数据
        var option={
            //标题
            title:{
              text:'生鲜销量统计'
            },
            //工具箱
            //保存图片
            toolbox:{
                show:true,
                feature:{
                    saveAsImage:{
                        show:true
                    }
                }
            },
            //图例-每一条数据的名字叫销量
            legend:{
                data:['销量']
            },
            //x轴
            xAxis:{
                data:["苹果","橘子","橙子","香蕉","菠萝","榴莲"]
            },
            //y轴没有显式设置,根据值自动生成y轴
            yAxis:{},
            //数据-data是最终要显示的数据
            series:[{
                name:'销量',
                type:'line',
                data:[40,20,35,60,55,10]
            }]
        };
        //使用刚刚指定的配置项和数据项显示图表
        myChart.setOption(option);
    </script>
    </body>
    </html>

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>访问量统计</title>
    </head>
    <body>
    <div id="chart1" style="600px; height: 400px;"></div>
    <script type="text/javascript" src="js/echarts.common.min.js"></script>
    <script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'折线图'
            },
            tooltip:{},
            legend:{
                data:['访客来源']
            },
            xAxis:{
                data:["智联招聘","51job","拉钩","Boss直聘"]
            },
            yAxis:{
            },
            series:[{
                name:'访问量',
                type:'line',
                data:[600,310,200,800]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart1'));
    
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
    
    </body>
    </html>

    设置填充底部

      areaStyle: {
                    normal: {}
                }

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>访问量统计</title>
    </head>
    <body>
    <div id="chart1" style="600px; height: 400px;"></div>
    <script type="text/javascript" src="js/echarts.common.min.js"></script>
    <script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'折线图'
            },
            tooltip:{},
            legend:{
                data:['访客来源']
            },
            xAxis:{
                data:["智联招聘","51job","拉钩","Boss直聘"]
            },
            yAxis:{
            },
            series:[{
                name:'访问量',
                type:'line',
                areaStyle: {
                    normal: {}
                },
                data:[600,310,200,800]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart1'));
    
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
    
    </body>
    </html>

    设置填充地步颜色

      

                areaStyle: {
                    normal: {color: '#80ffc0'}
                }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>访问量统计</title>
    </head>
    <body>
    <div id="chart1" style="600px; height: 400px;"></div>
    <script type="text/javascript" src="js/echarts.common.min.js"></script>
    <script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'折线图'
            },
            tooltip:{},
            legend:{
                data:['访客来源']
            },
            xAxis:{
                data:["智联招聘","51job","拉钩","Boss直聘"]
            },
            yAxis:{
            },
            series:[{
                name:'访问量',
                type:'line',
                areaStyle: {
                    normal: {color: '#80ffc0'}
                },
                data:[600,310,200,800]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart1'));
    
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
    
    </body>
    </html>

    二、遇到的问题

      没有遇到问题

    三、明日计划

      明天继续学习Android

  • 相关阅读:
    ant实践总结
    Ubuntu安装JDK和Eclipse
    Xp下安装Ubuntu
    [Hadoop] 传智播客新版Hadoop视频教程 段海涛老师Hadoop八天完全攻克Hadoop视频教程 Hadoop开发
    Ctypes简单应用以及PyQt5等简单使用过程中遇到的部分问题
    python初探:关于闭包
    利用Nginx+Frp搭建HTTP正向代理
    C#发送邮件时提示:“不允许使用邮箱名称。服务器响应为:”的错误解决办法
    提倡IT从业人员终身学习
    打算在博客园安家了
  • 原文地址:https://www.cnblogs.com/wmdww/p/14903897.html
Copyright © 2011-2022 走看看