zoukankan      html  css  js  c++  java
  • echarts简单导入

    我用的是thinkPHP框架

    <JS href="__PUBLIC__/JS/echarts.js" />导入路径  新建一个文件夹 下载源码后放到public下面  

    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style=" 1000px;height:600px;margin:auto;border:1px solid red"></div>
    <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
    tooltip : {
    trigger: 'axis'//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
    },
    legend: {
    data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    toolbox: {
    show : true,
    feature : {
    mark : {show: true},
    dataView : {show: true, readOnly: false},//数据预览
    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},//支持柱形图和折线图的切换
    restore : {show: true},//复原
    saveAsImage : {show: true}//是否保存图片
    }
    },
    calculable : true,
    xAxis : [
    {
    type : 'category',
    boundaryGap : false,
    data : ['周一','周二','周三','周四','周五','周六','周日']
    }
    ],
    yAxis : [
    {
    type : 'value'
    }
    ],
    series : [
    {
    name:'邮件营销',
    type:'line',
    stack: '总量',
    data:[120, 132, 101, 134, 90, 230, 210]
    },
    {
    name:'联盟广告',
    type:'line',
    stack: '总量',
    data:[220, 182, 191, 234, 290, 330, 310]
    },
    {
    name:'视频广告',
    type:'line',
    stack: '总量',
    data:[150, 232, 201, 154, 190, 330, 410]
    },
    {
    name:'直接访问',
    type:'line',
    stack: '总量',
    data:[320, 332, 301, 334, 390, 330, 320]
    },
    {
    name:'搜索引擎',
    type:'line',
    stack: '总量',
    data:[820, 932, 901, 934, 1290, 1330, 1320]
    }
    ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    </script>
  • 相关阅读:
    favourite programming quotes
    a fast algorithm to compute the area of a polygon
    customize your own memory allocator (2)
    一道概率算法
    study on source code of Tcmalloc
    智力题2
    how does malloc/free work?
    Windows PowerShell系列课程(视频课程讲师:李大川)
    跟我一起学Visual Studio 2008系列课程(视频课程讲师:徐长龙)
    C# 3.0 锐利体验系列课程(视频课程讲师:李建忠)
  • 原文地址:https://www.cnblogs.com/ITGR/p/7813444.html
Copyright © 2011-2022 走看看