知道你们懒得手打网址，给你们贴上：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. Python3基础 os.path.splitext 处理文件名，得到文件名+扩展名

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  2. Type.Missing和System.Reflection.Missing.Value

    Type.Missing https://msdn.microsoft.com/en-us/library/system.type.missing(v=vs.110).aspx Missing.Val ...

  3. [luogu2119]魔法阵 NOIP2016T4

    很好的一道数学推导题 45分做法 $O(N^4)$暴力枚举四个材料 55分做法 从第一个约束条件可得到所有可行答案都是单调递增的,所以可以排序一遍,减少枚举量,可以拿到55分 100分做法 首先可以发 ...

  4. [bzoj 1616][Usaco2008 Mar]Cow Travelling游荡的奶牛

    题目描述 奶牛们在被划分成N行M列(2 <= N <= 100; 2 <= M <= 100)的草地上游走,试图找到整块草地中最美味的牧草.Farmer John在某个时刻看见 ...

  5. 基于大规模语料的新词发现算法【转自matix67】

    最近需要对商品中的特有的词识别,因此需新词发现算法,matrix的这篇算法很好. 对中文资料进行自然语言处理时,我们会遇到很多其他语言不会有的困难,例如分词——汉语的词与词之间没有空格,那计算机怎么才 ...

  6. MVC ---- 标准查询运算符

    标准查询运算符:定义在System.Linq.Enumerable类中的50多个为IEnumerable<T>准备的扩展方法,这些方法用来 对它操作的集合进行查询筛选. 筛选集合Where ...

  7. 广州工业大学2016校赛 F 我是好人4 dfs+容斥

    Problem F: 我是好人4 Description 众所周知,我是好人!所以不会出太难的题,题意很简单 给你n个数,问你1000000000(含1e9)以内有多少个正整数不是这n个数任意一个的倍 ...

  8. queue_01

    A.添加/移除 void queue::push(elemValue); // 尾部添加 viud queue::pop();  // 尾部移除 B.随机存取 C.数据存取 T queue::back ...

  9. 对不队——Alpha冲刺

    第五天  日期:2018/6/20 一. 今日完成任务:专家审稿逻辑的开发 冯晓.马思远:会议网站栏目管理开发,软件功能测试 王爽.彭辉:审稿管理员分稿和稿件查找功能开发,博客撰写 吴琼.郝延婷:更换 ...

  10. Spring AMQP 源码分析 08 - XML 配置

    ### 准备 ## 目标 通过 XML 配置文件使用 Spring AMQP ## 前置知识 <Spring AMQP 源码分析 07 - MessageListenerAdapter> ...