zoukankan      html  css  js  c++  java
  • echars的使用

    1、首先引入echars的js文件 该文件可从echars官网下载

    在某些图表中可能会引用ecStat.js文件 如线性回归散点图 我们直接下载引用即可

    <head>
        <title></title>
        <script type="text/javascript" src="js/echarts.js"></script>
    </head>
    

      

    2、创建一个容纳和显示echars图表的div容器

    <body>
            <div id="ech" style=" 600px;height: 500px"></div>
    </body>
    

      

    3、编写js显示echars图
    	至于要是用那个图标我们直接从官网复制其option格式就行,其用法都一样
    	我们仅仅复制下来是不能够显示的 
    	我们还需要使用 echarts的init方法得到echars的div容器
    	然后就是复制官网的数据格式
            最后将option数据使用myChart.setOption(option);将数据放到对象中
    
    <script type="text/javascript">
        window.onload=function (){
            var myChart = echarts.init(document.getElementById("ech"));
            alert("jj");
            var option = {
     
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                        type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                    }
                },
                legend: {
                    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        data:[320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name:'邮件营销',
                        type:'bar',
                        stack: '广告',
                        data:[120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name:'联盟广告',
                        type:'bar',
                        stack: '广告',
                        data:[220, 182, 191, 234, 290, 330, 310]
                    }
     
                ]
            };
            myChart.setOption(option);
        }
    

      

    
    
  • 相关阅读:
    Array.prototype.slice.call(arguments)
    change,propertychange,input事件小议
    H5项目常见问题汇总及解决方案
    director.js:客户端的路由---简明中文教程
    Web APP开发技巧总结
    Flex 布局教程:语法篇
    解决iPhone中overflow:scroll;滑动速度慢或者卡的问题
    flexbox布局的兼容性
    移动前端知识总结
    使用React重构百度新闻webapp前端
  • 原文地址:https://www.cnblogs.com/yxdmoodoo/p/9567148.html
Copyright © 2011-2022 走看看