echarts之我用
最近在用echarts做项目，抽点时间总结一下。
首先说一下什么是echarts。echarts是百度开发的类似于fusioncharts的图表展示控件。区别于fusioncharts的是echarts是基于html5的，不需要浏览器安装flash控件。只需要浏览器支持HTML5即可。
echarts主页：http://echarts.baidu.com/
echarts效果展示：http://echarts.baidu.com/doc/example.html?qq-pf-to=pcqq.c2c
echarts属性解读：http://echarts.baidu.com/doc/doc.html#Legend
先贴一个代码实例：
<body>
<div id="main" style="height:800px;"></div><!--图表展示位置DIV-->
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts:'asset/echarts'//echarts路径
}
}); // 使用
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/pie' //使用的Echart类型，可在下面data部分查看。
],
function(ec){
var myChart = ec.init(document.getElementById('main'));//根据ID获取用于展示的DIV
option = {
title : {
text: '未来一周气温变化', //图表标题
subtext: '纯属虚构' //图表副标题
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温'] //图例
},
toolbox: { //工具
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [ //X轴展示的内容
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [ //y轴坐标
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}
],
series : [ //具体展示内容
{
name:'最高气温', //展示内容1对应的图例
type:'line', //图表类型，需根据该类型引入相应的js
data:[11, 11, 15, 13, 12, 13, 10], //图表内容
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
myChart.setTheme("macarons"); //设置echarts的主题
myChart.setOption(option); //在DIV上绘制图表
});
</script>
</body>
下面就如何使用该控件进行一步一步讲解：
首先引入echarts.js该js文件
然后再页面中定义好需要展示图表的div的位置，并设置唯一ID。
然后引入上图中的js代码块，修改相应的代码就OK了。
修改代码前可以去echarts效果展示中查看相应的效果图，适用于自己的点进去复制左侧的代码，替换代码块中的option。然后添加用到的echarts类型相应的js。
应用过程中遇到的问题：
1、堆叠式柱状图数据过于密集时数字重叠。
解决方法：控制展示数据，当小于某个数时不展示，将下面代码添加到series中，修改if else 条件。
itemStyle: {
normal: {
label : {
show: true, position: 'insideTop',
formatter:function(value){
if(value.data<=2)
return "";
else
return value.data;
}
}
}
},
2、滚动条太高，覆盖数据
解决方法：设置滚动条高度。
dataZoom : {
show : true, //滚动条是否展示
start : 0, //滚动条开始位置--百分比
end : 25, //滚动条结束为止--百分比
height:20 //滚动条高度
},
3、y轴太窄，数据显示不全
解决方法：控制图像面板的位置，使坐标轴区域面积变大。
grid: {
x: 110 //面板的开始位置，距div左侧的像素数
},
4、点击柱子或节点相应事件
myChart.on("click",function(params,ctx){ if(params.seriesName=="图例"){//如果点击的柱子或节点是图例中的一个的时候，相应事件
//事件
}
});
});
5、控制鼠标悬浮显示内容，下面代码是控制如果是负数的时候显示正数。
tooltip : {
trigger: 'item',
formatter: function (params){
if(params.value<=0)
return params.name + '<br/>'+ params.seriesName + ' : ' + params.value*(-1);
else
return params.name + '<br/>'+ params.seriesName + ' : ' + params.value;
}
},
echarts之我用的更多相关文章
- 一起来玩echarts系列（一）------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
- 数据图表插件Echarts（一）
一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
- ECharts数据图表系统？ 5分钟上手！
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
- knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...
- ECharts 初识（基于MVC+jQuery+Angularjs实现的Demo）
一.背景: 我们这行做web开发的,很多时候都需要做数据统计报表,现在我所使用的是来自百度团队的ECharts.官方网址:http://echarts.baidu.com/ 我们知 ...
- Ionic2系列——在Ionic2中使用ECharts
在群里看到有人问怎么在Ionic2中集成ECharts来显示图表.当时答应说写个blog,简单写下步骤. 在TypeScript中如果要使用第三方库,必须要有d.ts,也就是定义文件,没有这个文件的话 ...
- ECharts的简单使用过程
网页中经常要使用图表,以前使用的是highcharts插件,现在发现echarts使用起来和highcharts差不多,但是个人感觉echarts更酷炫,以下是echarts的使用过程,其实highc ...
随机推荐
- 可利用空间表（Free List）
写这篇文章的动因是因为 2015 年 04 月 02 日的阿里在线笔试题考到了这个知识点.我当时模模糊糊的写了一些,估计写的也不对,所以在这里总结一下. 原题 常常会有频繁申请.释放内存的需求,比如在 ...
- FineUI之使用SQL脚本从数据库表中生成对应的输入控件
在WEB开发时.常常须要根据数据库表中的字段建立对应的输入控件,来获取输入的数据.每次都须要按字段来敲,显然太低效.并且easy出错.这里提供一个SQL脚本生成对应输入控件的方法. USE DBDem ...
- react 开发过程中的总结/归纳
1.点击元素,获取绑定该事件的父级元素,使用 e.currentTarget.e.target 获取的是,出发该事件的元素,该元素有可能是所绑定事件的元素的子元素. 2.使用 react router ...
- google免费DNSserver好用不？
中国的网络实在不行,网速一直就是令人诟病. 比韩日那是差太多了,可是相比非洲还是不错.可是这根本无法满足国人的上网需求.于是大家都想破了脑袋想提高网速.这不方法来了么? 笔者在网上找了几种方法关于怎样 ...
- 2015/12/30 Java语法学习
①标识符包括:包名.类名.方法名.变量名.常量名.属性名 标识符书写规则:1,标识符由字母.数字._.$ 组成 2,数字不能出现在开始位置 ...
- Java 反射 —— 运行时的类型信息
1. 反射机制的由来 RTTI 机制可以告知某个对象的确切类型,但有一个前提,该类型在编译时必须已知(编译器在编译时打开和检查 .class 文件以获取类型信息).似乎是个很宽松的限制,但假如你获取了 ...
- 对于系统盘升级windows10怕空间不够，还是打算继续卸载一些软件
本来是打算从其他盘压缩,然后扩展,可是怕把磁盘给弄坏了,然后就保存原来的,就是看升级的推送什么时候来了.
- 【154】C#打包程序成安装包
参考0:用C#写完程序怎么用C#打包成安装程序setup自己做的图文说明示例 参考1:解决“默认公司名称” C#打包应用安装后,显示“默认公司名称”,想问问通过哪里可以修改??? 参考2:解决“添加卸 ...
- git回到没push的commit
创建: 2017/10/28 merge master以后数据库出了问题,改好以后发现view有点问题,commit以后没提交就reset了.过后才想起来怎么回去???吓成狗,索性找到了下面这个. ...
- bzoj1202: [HNOI2005]狡猾的商人(并查集 差分约束)
1202: [HNOI2005]狡猾的商人 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4127 Solved: 1981[Submit][Sta ...