知道你们懒得手打网址，给你们贴上：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. Linux驱动模块的Makefile分析【转】

    本文转载自:http://blog.chinaunix.net/uid-29307109-id-3993784.html 1． 获取内核版本 当设备驱动需要同时支持不同版本内核时,在编译阶段,内核模块 ...

  2. 高斯消元&&luogu3389

    高斯消元(Gauss) 高斯消元和我们做二元一次方程组差不多 流程: 1.把系数和右边的值就是用二维数组存下来->转化成矩阵 我们的目标是把这个矩阵装换成 上三角的形式 对角线系数全部为1,1下 ...

  3. eclipse 在线安装反编译插件

    打开eclipse help>install New Software…..>add Name:jd-eclipse_update_site Location:http://jd.beno ...

  4. DPDK的安装与绑定网卡

    DPDK的安装有两种方法: 第一种是使用dpdk/tools/setup.sh选择命令字来安装:第二种是自己手动安装.为了更好地熟悉DPDK,我使用第二种方法. 0.设定环境变量 export RTE ...

  5. AtCoder square869120 Contest #3 F sushi

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  6. python 函数赋值

    ⾸先我们来理解下Python中的函数 def hi(name="yasoob"): return "hi " + name print(hi()) # outp ...

  7. MongoDB（课时13 where条件过滤）

    3.4.2.8 条件过滤 关系型数据库开发对于数据的筛选,想到的一定是where语句,MongoDB里面提供的是"$where". 范例:使用where进行数据的查询 db.stu ...

  8. django QueryDict对象

    类的原型:class QueryDict[source] 在HttpRequest对象中,GET和POST属性都是一个django.http.QueryDict的实例.也就是说你可以按本文下面提供的方 ...

  9. iframe 通信问题

    iframe作用: 1:页面部分刷新(iframe也是一个window,html是完整的不是部分html片段) 2:跨域 3:父子window通信 iframe1.window.xx=xx;paren ...

  10. ContentPresenter

    这是2年前写了一篇文章 http://www.cnblogs.com/Clingingboy/archive/2008/07/03/wpfcustomcontrolpart-1.html 我们先来看M ...