知道你们懒得手打网址，给你们贴上：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. JS高级语法与JS选择器

    元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...

  2. mysql 通过binlog 查看执行日志

    环境:linux deepin15.7   mysql 5.7 1.开启binlog vim /etc/mysql/mysql.conf.d/mysqld.cnf 添加 log_bin = /var/ ...

  3. C#中的异步编程模式

    异步编程模型(APM) 基于事件的异步编程模式 基于任务的异步模式 Async Await编程 关于C#,可以看看Learning Hard的博客

  4. 样本打散后计算单特征 NDCG

    单特征 NDCG 能计算模型的 NDCG,也就能计算单特征的 NDCG,用于评估单特征的有效性,跟 Group AUC 用途一样 单特征 NDCG 如何衡量好坏 如果是 AUC,越大于或小于 0.5, ...

  5. Python 以指定宽度格式化输出

    当对一组数据输出的时候,我们有时需要输出以指定宽度,来使数据更清晰.这时我们可以用format来进行约束 mat = "{:20}\t{:28}\t{:32}" print(mat ...

  6. An error occurred during installation: No such plugin: cloudbees-folder

    解决办法:下载cloudbees-folder.hpi放在目录/usr/local/tomcat/webapps/jenkins/WEB-INF/detached-plugins/下,重启tomcat ...

  7. c++ 指定长度容器元素的拷贝移动（copy_backward）

    #include <iostream> // cout #include <algorithm> // copy_backward #include <vector> ...

  8. jenkins 插件，下载地址

    http://updates.jenkins-ci.org/download/plugins/ 通常我们需要下载的插件有如下几个:

  9. XML_CPP_资料_libXml2_01_Code_ZC（?.pro）

    ZC:最下面有 ?.pro文件的设置写法 ZC: Win7x64,qt-opensource-windows-x86-msvc2010_opengl-5.3.2.exe,cn_visual_studi ...

  10. 基于DOMContentLoaded实现文档加载完成后执行的方法

    我们有时可能需要一些在页面加载完成之后执行的方法,其实js原生就提供了onload方法,所以我们最简单的办法就是直接给onload赋值一个函数,在页面加载完成之后就会自动执行 widnow.onloa ...