知道你们懒得手打网址，给你们贴上：http://echarts.baidu.com/echarts2/

1、下载并解压之后，找到echarts-2.2.7\build\dist\echarts-all.js

2、在工程里新建一个HTML页面，完整代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript"  src="./js/echarts-all.js"></script>

<title>ECharts</title>

</head>

<body>

         <!-- 定义div区域 -->

	<div id ="main" style="width:600px;height:400px"></div>

<script type="text/javascript">

        // 初始化echarts实例，并关联div

        var myChart = echarts.init(document.getElementById('main'));

　　　　　//配置报表的数据和参数

        var option={

            backgroundColor: '#2c343c',

            textStyle: {

                        color: 'rgba(255, 255, 255, 0.3)'

                    },

            series : [

                {

                    name: '访问来源',

                    type: 'pie',

                    radius: '55%',

                    data:[

                        {value:400, name:'搜索引擎'},

                        {value:335, name:'直接访问'},

                        {value:310, name:'邮件营销'},

                        {value:274, name:'联盟广告'},

                        {value:235, name:'视频广告'}

                    ],

                    roseType: 'angle',

                    itemStyle: {

                        emphasis: {

                            shadowBlur: 200,

                            shadowColor: 'rgba(0, 0, 0, 0.5)'

                        }

                    },

                    label: {

                        normal: {

                            textStyle: {

                                color: 'rgba(255, 255, 255, 0.3)'

                            }

                        }

                    },

                    labelLine: {

                        normal: {

                            lineStyle: {

                                color: 'rgba(255, 255, 255, 0.3)'

                            }

                        }

                    }

                }

            ]

        }

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

　注意ECharts的js的引入路径正确，即可

效果如下所示：

ECharts报表的使用的更多相关文章

  1. 使用ECharts报表统计公司考勤加班，大家加班多吗？

    最近个项目已经连续加班1个月多,因为公司经常有在外面客户现场或出差的情况,人事每个月初会把上个月的份考勤打卡记录全部发出来,让我们对自己的考勤,突然想到可根据大家打卡时间记录统计每天工作时间,看大家是 ...

  2. vue组件之echarts报表

    vue组件之echarts报表 将echarts报表封装成组件,动态传入数据,显示图表. 1.饼状图 父组件: <MPie :datas="piedata"></ ...

  3. echarts 报表使用

    下载echats后,将下包中的js引入项目,\echarts-2.2.7\echarts-2.2.7\build\dist //在页面中建立宽高的区域,用来显示报表 <div style=&qu ...

  4. echarts报表显示%+没有0

    function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...

  5. ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  6. ECharts 报表事件联动系列三：柱状图，饼状图实现联动

    源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. ECharts 报表事件联动系列二：柱状图，饼状图添加事件

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  8. ECharts 报表事件联动系列一：刷新页面

    本示例实现了以下功能: 1.点击刷新按钮,仅刷新柱状图,而不是整个页面 2.点击柱状内容刷新柱状图,并更新title 3.点击X轴,Y轴更新title,并弹出alert. 源码代码如下: <!D ...

  9. echarts报表

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

随机推荐

  1. Go第八篇之包的使用

    Go 语言的源码复用建立在包(package)基础之上.Go 语言的入口 main() 函数所在的包(package)叫 main,main 包想要引用别的代码,必须同样以包的方式进行引用,本章内容将 ...

  2. 51nod 1082 与7无关的数

    暴力 打表过的 注意爆int 还有 7的倍数 和 数字中有7的 #include<bits/stdc++.h> using namespace std; typedef long long ...

  3. ajax post 参数说明

  4. Ubuntu 14.04 下 OF-Config安装

    参考: Github of-config configure.ac - configure file issue OF-Config安装 1.安装OvS v2.3.1: Releases $ tar ...

  5. linux 多进程fork

    对于父进程,fork函数返回了子程序的进程号,而对于子程序,fork函数则返回零,这样,对于程序,只要判定fork函数的返回值,就知道自己是处于父进程还是子进程中.

  6. 如何学好Java大数据并快速提升

    Java作为一种最流行的,最热门的编程语言,可以说它无处不在,目前全球有着数十亿的设备正在运行着Java,很多服务器程序都是用Java编写,用以处理每天超过数以千万的数据.无论是手机软件.手机Java ...

  7. js实现滑动拼图验证码

    js实现滑动拼图验证码,我这个样式是仿那些大网站做了, 学习用的,只用到前端. 小的个人网站感觉还可以用,大一点的别人用机器一下就破解了. 下面看图示: 样子大概是这样的. 源码在这 百度网盘:    ...

  8. Codeforces 913D - Too Easy Problems

    913D - Too Easy Problems 思路:二分check k 代码: #include<bits/stdc++.h> using namespace std; #define ...

  9. NGUI中 鼠标划出屏幕后，停止对 UIDragScrollView 的 press

    using UnityEngine; /// <summary> /// NGUI中 鼠标划出屏幕后,停止对 UIDragScrollView 的 press /// </summa ...

  10. Mysql错误: Lock wait timeout exceeded 解决办法

    一.临时解决办法: 执行mysql命令:show full processlist; 然后找出插入语句的系统id 执行mysql命令:kill id 或 首先,查看数据库的进程信息: show ful ...