知道你们懒得手打网址，给你们贴上：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基础 try-except else进行配合

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

  2. linux下有线网卡出现ADDRCONF(NETDEV_UP): eth0: link is not ready的解决方法

    一.背景 2018年5月24日,笔者的pc已经连续运转两天了,突然要使用有线网卡,却发现有线网卡无法正常工作,于是查看了一下内核日志: r8169 0000:05:00.0 eth0: link do ...

  3. Mysql中unique与primary约束的区别分析（转）

    本文章来给大家介绍在mysql中unique与primary约束的区别分析,unique与primary是我们在创建mysql时常用的类型了,下面我来给大家介绍介绍.   定义了UNIQUE约束的字段 ...

  4. requirejs概念

  5. 【TCP/IP详解 卷一：协议】第一章概论 学习笔记

    第一章 概述 游览了一下,本章主要是简介OSI模型的低层(1-4层).介绍了TCP/IP协议族的相关知识. TCP/IP的分层 Application <--> TCP / UDP < ...

  6. HDU 6150 Vertex Cover（构造）

    http://acm.hdu.edu.cn/showproblem.php?pid=6150 #include<iostream> #include<algorithm> #i ...

  7. .net 与 java 开发微服务对比

    java+spring boot+maven对比.net 优势: 1. spring 自身带的ioc 比.net 更简单易用. 2. spring actuator的健康检测等运行时状态查看功能很赞. ...

  8. poj 1523 SPF 无向图求割点

    SPF Description Consider the two networks shown below. Assuming that data moves around these network ...

  9. UI自动化测试篇 ：webdriver+ant+jenkins自动化测试实践

    http://www.cnblogs.com/chengtch/p/6063360.html 前面基本弄清楚了webdriver+ testng 的测试环境部署,现在这里记录一下结合ant及jenki ...

  10. [原][库][c++]tinyxml使用小结

    参考:http://blog.csdn.net/L_Andy/article/details/40615517 tinyxml官网: http://www.grinninglizard.com/tin ...