Echarts的一些总结
Echarts是专注做统计图表的插件，其本质是使用canvas进行图表的绘制。而如今它的属性和配置也是越来越丰富。基本的配置很简单，比如饼状图，就是数据和要显示的文字和颜色，柱状图，就是横纵坐标和数据。
eg：
饼图
statusDataoption = {
title : {
text: '按状态统计',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{b} : ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
top:'',
data: ['草稿的活动数', '审核中的活动数', '进行中的活动数', '已结束的活动数']
},
series : [
{
name: '',
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
data:[
{value:data.data.draftCount, name:'草稿的活动数\n'+data.data.draftCount+'个', itemStyle:{
normal:{color:'#C33531'}
}},
{value:data.data.auditingCount, name:'审核中的活动数\n'+data.data.auditingCount+'个', itemStyle:{
normal:{color:'#D38265'}
}},
{value:data.data.ongoingCount, name:'进行中的活动数\n'+data.data.ongoingCount+'个', itemStyle:{
normal:{color:'#9FDABE'}
}},
{value:data.data.hasEndCount, name:'已结束的活动数\n'+data.data.hasEndCount+'个', itemStyle:{
normal:{color:'#61A0A9'}
}}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
label :{
show : true ,
formatter : '{b}{d}%'
}
}
},
//roleCode:['JS004','JS005','JS006','JS007','JS008','JS001','JS002','JS003']
}
]
};
statusChart.setOption(statusDataoption);
statusChart.on('click', function (params) {
window.location.href=url;
});
柱状图：
termDataoption = {
title : {
text: '学年活动数及参与人数'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['活动数','活动参与人数']
},
toolbox: {
show : true,
//解决保存为图片显示不全
x:'950',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : data.data.termNames
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'活动数',
type:'bar',
data:data.data.qnums,
stack: '个',
//barWidth: 200/data.data.qnums.length,
//barWidth: 30,
/*markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},*/
markLine : {
data : [
{type : 'average', name: '平均值'}
]
},
itemStyle:{
normal:{
color:'#8FDCDD',
label: {
show: true,
position: 'insideBottom',
textStyle: {
color: 'green'
}
}
}
}
},
{
name:'活动参与人数',
type:'bar',
data:data.data.joinnums,
stack: '人',
//barWidth: 200/data.data.joinnums.length,
//barWidth: 30,
/*markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},*/
markLine : {
data : [
{type : 'average', name : '平均值'}
]
},
itemStyle:{
normal:{
color:'#D16E6B',
label: {
show: true,
position: 'insideBottom',
textStyle: {
color: 'green'
}
}
}
}
}
],
/*dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 20,//滑动条的 左右2个滑动条的大小
height: 8,//组件高度
left: 30, //左边的距离
right: 40,//右边的距离
bottom: 30,//右边的距离
handleColor: '#ddd',//h滑动图标的颜色
handleStyle: {
borderColor: "#cacaca",
borderWidth: "1",
shadowBlur: 2,
background: "#ddd",
shadowColor: "#ddd",
},
fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: '#1eb5e5'
}, {
offset: 1,
color: '#5ccbb1'
}]),
backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
filterMode: 'filter',
},
//下面这个属性是里面拖到
{
type: 'inside',
show: true,
xAxisIndex: [0],
start: 1,
end: 100
}
]*/
};
termChart.setOption(termDataoption);
其中柱状图有自带的右上角工具栏，可以转换折线图和查看数据，保存为图片等。
在开发中遇到一些问题：
首先是保存为图片的图标的title，会显示不全，解决方法是如上的给其设置一共x宽度，根据自身设置的图表宽度和需要进行设置；
其次是饼图的一些自定义formatter；再次是柱状图的显示具体数据（鼠标移动上去也会显示数据），数据的显示位置设置--echarts bar series下的label position：inside，top，bottom，left，right。即上中下左右，还可以对其进行组合，如insideBottom。需要说明的一点就是设置insideTop的时候，如果数据较小或者为0，那么会出现文字跑到坐标轴下方去了甚至和X轴上的文字重合。当然这些也可以通过一些稍微复杂的自定义配置进行避免。
最后就是宽度问题，如果X轴已知，就不需要考虑这些，直接设置固定的宽度或自适应即可，而对于如果X轴也未知的情况下，显然设置固定宽度不太可行，除非设置超出滚动和画布的动态宽度，若不设置barWidth，则组件会自己自适应设置宽度，我们当然也可以自己做自适应，拿一个宽度除以数据的数量，或者其他更精确的公式。
与此同时就会考虑到滚动条，组件有自带的dataZoom可以进行设置。
此处也引用一处教详细的echarts笔记
https://www.cnblogs.com/goloving/p/9008165.html
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 ...
随机推荐
- C# 可访问性不一致问题（修改成员的访问修饰符）。
错误实例一:父类的访问性低于子类 class Person { } public class Students:Person { } 错误实例二:方法的访问修饰符需要和参数的类型的访问修饰符一致 cl ...
- .NET Core 实践一：微服务架构的优点(转)
微服务现在已经是各种互联网应用首选的云架构组件,无论是 BAT 还是 滴滴.美团 ,微服务都是重要的一环. 相对于微服务,传统应用架构有以下缺点: 1. 业务代码混杂,团队成员职责边界不清,团队协作体 ...
- 为什么redis是单线程的？速度还这么快
为什么说Redis是单线程的? 为什么redis是单线程的?速度还这么快
- Redirect all output to file
That part is written to stderr, use 2> to redirect it. For example: foo > stdout.txt 2> std ...
- jQuery插件之上传文件ajaxfileupload.js源码与使用
在网页应用中,一般会用到上传文件或者图片什么的到服务器,那么可以用ajaxfileupload.js,但是在使用ajaxfileupload.js时候,当服务器返回的json带有&符号的时候, ...
- window.print()小知识
window.print() 实际上,是浏览器打印功能菜单的一种程序调用.与点击打印功能菜单一样,不能精确分页,不能设置纸型,套打的问题更加无从谈起,只不过,可以让用户不用去点菜单,直接点击网页中的 ...
- SAP MM MM17里不能修改物料主数据'Purchasing Value Key'字段值？
SAP MM MM17里不能修改物料主数据'Purchasing Value Key'字段值? 记得在D项目上线之前数据导入系统之后,业务提出一些物料采购视图里的’Purchasing value k ...
- 通过git上传本地代码到github仓库
最近呢,武汉天气燥热,在公司没啥事,就自己写了一下小demo. 作为一个菜鸟,只在github上扒过别人的代码,还没自己上传过,就试了一下,遇到了一些坑,记录一下. 前提是电脑上安装了git,没有安装 ...
- Verilog实现模长等于六十的二进制编码计数器
注释都加上了 由于参考网上的代码,其实现了置数 ,使能等功能,一并加上了 编译结果能通过 百度网盘文件下载:https://pan.baidu.com/s/1IVTD19NRk-s2dKBXtATkA ...
- day11(python)装饰器
def wrapper(f):#1 def inner(*args,**kwargs):#3 ret = f(*args,**kwargs)#5 return ret#8 return inner#4 ...