ECharts的广泛网址：

http://echarts.baidu.com/doc/example.html

零编程玩转图表：

http://tushuo.baidu.com/?qq-pf-to=pcqq.c2c

结合使用做的你想做的图表吧！

<%@ page language="java" contentType="text/html; charset=gbk"
pageEncoding="gbk"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Insert title here</title>
<%@ include file="/WEB-INF/tgp-pages/common/common-var.jsp"%>
<script type="text/javascript"
src="${root}/echarts/build/dist/echarts.js"></script>
<script type="text/javascript"
src="${root}/echarts/build/dist/echarts-all.js"></script>

<script type="text/javascript"
src="${root}/echarts/doc/asset/js/esl/esl.js"></script>

</head>
<body>
<div id="mainMap" style="height: 500px;" ></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var option;
/*$(document).ready(function(){
$.ajax({
url: "/TBPWeb/sbjk/equipinfo/substation/stationDao.jsp?method=getStation",
contentType : "application/x-www-form-urlencoded;charset=utf-8",
type : "post",
datatype : "json",
async : false,
success: function (text) {
id = text;
}
});
});*/
var myChart = echarts.init(document.getElementById('mainMap'));

option = {
title: {
text: "某站点用户访问来源",
subtext: "纯属虚构",
x: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
x: "left",
data: ["主变", "断路器", "线路", "刀闸", "母线"]
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: true
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
itemStyle: {
normal: {
label: {
show: true,
formatter: "{b}: {c} ({d}%)"
}
}
},
data: [
{
value: 335,
name: "主变"
},
{
value: 310,
name: "断路器"
},
{
value: 234,
name: "线路"
},
{
value: 135,
name: "刀闸"
},
{
value: 148,
name: "母线"
}
]
}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
</html>

ECharts是我接触过的最优秀的可视化工具，也是进步最快的软件，希望它早日成为世界级的开源项目。的更多相关文章

  1. GitHub 优秀的 Android 开源项目（转）

    今天查找资源时看到的一篇文章,总结了很多实用资源,十分感谢原作者分享. 转自:http://blog.csdn.net/shulianghan/article/details/18046021 主要介 ...

  2. GitHub 优秀的 Android 开源项目

    转自:http://blog.csdn.net/shulianghan/article/details/18046021 主要介绍那些不错个性化的View,包括ListView.ActionBar.M ...

  3. GitHub 优秀Android 开源项目

    阅读目录 1.Xabber客户端 2.oschina客户端 3.手机安全管家 4.星座连萌 5.玲闹铃 6.魔乐盒 7.PWP日历 8.Apollo音乐播放器 9.夏普名片识别 10.高仿人人网 11 ...

  4. 【转】GitHub 优秀的 Android 开源项目

    转自:http://blog.csdn.net/shulianghan/article/details/18046021 主要介绍那些不错个性化的View,包括ListView.ActionBar.M ...

  5. 【Android 应用开发】GitHub 优秀的 Android 开源项目

    原文地址为http://www.trinea.cn/android/android-open-source-projects-view/,作者Trinea 主要介绍那些不错个性化的View,包括Lis ...

  6. Github发现优秀的开源项目

    先上个大logo,哈哈. github上有非常多的资源,我们可以在github上搜索到非常多的开源项目.那么如何使用github查找资源? 罗列出一下几种方式. 1.Explore 登录GitHub, ...

  7. 如何在 Github 上发现优秀的开源项目？

    之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到点子上了,Git ...

  8. 【转载】如何在 Github 上发现优秀的开源项目？

    之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到点子上了,Git ...

  9. [转]GitHub 优秀的 Android 开源项目

    GitHub 优秀的 Android 开源项目 主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageV ...

随机推荐

  1. 【扬中集训 DAY4T3】holiday

    [题目链接] 点击打开链接 [算法] 建C棵线段树即可,注意要用前缀和优化 [代码] 这是标程 #include <bits/stdc++.h> using namespace std; ...

  2. 聊聊Web App、Hybrid App与Native App的设计差异(转)

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

  3. OpenCV视频的读写

    实验室的项目是处理视频,所以就从视频的读取和写入开始吧! 常用的接口有C++和Python,Python肯定要简洁许多,不过因为项目需要,还是用C++了(PS:其实是我被Python的速度惊到了... ...

  4. 1、HTML的本质以及在web中的作用

    一.HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: -写Html文件(充当模板的作用)****** -数据库获取数据,然后替换到html文件的指定位置(We ...

  5. k8s-基于canel的网络策略-十九

    一.前提 上一节学习了flannel,但是我们应该了解flannel只能提供网络通讯,而不能提供网络策略.因此,我们本节学习canal,让它来提供网络策略,来配合flannel使用. canal是ca ...

  6. lightoj1169【DP】

    题意(来自大哥): 有两栋楼,左边一栋,右边一栋,层数从1-n,地面的标号为0,每一层有一个水果.有一只猴子在地面上,他现在要上到n层去,在第i层会吃掉水果花费一定时间. 猴子有两种方式从第i层到i+ ...

  7. poj 1988 Cube Stacking【带权并查集】

    设s[x]为x所在栈里的个数,c[x]表示x下面有几个,合并的时候直接合并s,然后路径压缩的时候更新c即可 #include<iostream> #include<cstdio> ...

  8. loj#2542. 「PKUWC2018」随机游走（树形dp+Min-Max容斥）

    传送门 首先,关于\(Min-Max\)容斥 设\(S\)为一个点的集合,每个点的权值为走到这个点的期望时间,则\(Max(S)\)即为走遍这个集合所有点的期望时间,\(Min(S)\)即为第一次走到 ...

  9. IT兄弟连 Java Web教程 Tomcat

    本文采用的Tomcat服务器版本是Tomcat8.5版本,Tomcat8.5支持Servlet3.1.JSP2.3以及EL3.0规范.并且Tomcat8.5版本对JDK8的支持比Tomcat8更加全面 ...

  10. Django models数据库配置以及多数据库调用设置

    今天来说说web框架Django怎么配置使用数据库,也就是传说中MVC(Model View Controller)中的M,Model(模型). 简单介绍一下Django中的MVC: 模型(model ...