最近项目里面遇到一些图表需要用echarts来做。而我之前只用过一次echarts,也只是做了一个简单的饼状图,并没有涉及到很多的配置。但是现在这个项目,这些图表需要自己配置很多东西。像什么多余的网格线不显示啊,每个柱子的不一样的颜色渐变啊,这些都还好。问题在一个页面有多个柱状图,而这些柱状图除了数据和颜色不一样其他的都一毛一样。最后模仿老大做的整合多个option自己做了一个demo,自己写了详细的注释。效果图如下:

html代码如下:

 <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="chart1" style="width: 300px;height:300px;"></div>
<div id="chart2" style="width: 300px;height:300px;"></div>
<div id="chart3" style="width: 300px;height:300px;"></div>
<div id="chart4" style="width: 300px;height:300px;"></div>
<script src="aa.js"></script>
<script>
new aa();
</script>

js代码如下:

 function aa(){
//初始化加载图表
this.initchart();
}
aa.prototype = {
initchart:function(){
//定义每个图表的颜色数组,我这里是渐变色的柱子,有四个
var color = [ "#ad3f3b", "#df8380","#89a54e","#b7c894","#3c8d91","#78b1b5","#db853c","#f2b582"];
var dex = 0;
//遍历装图表的盒子
for(var i = 1; i <= 4; i++){
//把echarts初始化图表的方法提出来通过拼接id的方法找到每个div的id
var chart = echarts.init(document.getElementById('chart'+ i));
//把option做成一个变量,通过传参来初始化每个图 new echarts.graphic.LinearGradient是eachsrts柱子渐变的方法
//传递的参数有图表的名字,渐变的颜色,和所对应的单位
var option = this.optionFun("销售额", new echarts.graphic.LinearGradient(0,0,0,1,[
{offset:0,color: color[dex++]},
{offset:1,color:color[dex++]}
]), "单位");
//常规操作 为echarts对象加载数据
chart.setOption(option);
}
},
//然后接下来都是一些echarts的一些常规配置
optionFun:function(title,color,unit){
var option = {
title:{
text:title,
left:'center',
textStyle:{
fontStyle:'normal',
fontSizeL:'14px',
},
top:'top',
},
xAxis:{
type:'category',
data:['目标','完成'],
axisLine:{
lineStyle:{
color:'#999',
},
},
axisLabel:{
textStyle:{
color:'#333',
},
},
},
yAxis:{
type:'value',
name:unit,
nameLocation:'start',
nameTextStyle:{
color:'#333',
},
axisLine:{
lineStyle:{
color:'#999',
}
},
axisLabel:{
textStyle:{
color:'#333',
},
},
splitLine:{
show:false,
},
},
series:[{
data:data,//后台传过来的数据[98,57]
type:'bar',
barWidth:20,
itemStyle:{
normal:{
color:color,
barBorderRadius:2,
shadowColor:'rgba(4,13,31,0.5)',
shadowBlur:5,
shadowOffsetX:2,
shadowOffsetY:0,
label:{
show:true,
position:'top',
textStyle:{
color:'#333',
},
},
}
}
}],
};
//将option返回
return option;
}
}

其实后来发现,echarts一些常规的配置在官方给的文档里面都有,就是自己不太熟悉。最主要的还是自己掌握的东西太少了,不懂的融会贯通。也更加清楚了js对于一个前端来说是多么的重要。而我自己也在不断的努力中,很感谢我老大,很多不懂的地方问他,他都会帮我解决。继续加油吧。

注:这个配置目前不支持图表数量超过所定义的颜色数量后颜色循环,或许以后多研究下可以实现,但是目前是不支持的。

关于echarts整合多个类似option的更多相关文章

  1. 百度地图、ECharts整合HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  2. ECharts整合HT for Web的网络拓扑图应用

    ECharts图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在HT for Web上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是 ...

  3. ECharts整合HT&#160;for&#160;Web的网络拓扑图应用

    ECharts图形组件在1.0公布的时候我就已经有所关注.今天在做项目的时候遇到了图标的需求,在HTfor Web上也有图形组件的功能.可是在尝试了下详细实现后,发现HT for Web的图形组件是以 ...

  4. 将百度的ECharts整合到阿里的Weex中。

    由于公司的业务,之前PC版产品中,大量的使用了百度的ECharts库.所以现在要做移动端,在大概熟悉了Weex基本语法和搭建环境后,就着手研究如何将这两个好东西糅合起来. 首先,按照Weex官方教程, ...

  5. echarts图形报表缓存问题(option数据缓存)

    这几天我在工作中用到了echarts开发报表.每次查询出来的数据都是新的,但是echart展现的图形报表却还是之前的数据.网上找了搜索了很多次也没能解决,后面加了技术群才解决的. 我开始已经确定是报表 ...

  6. Echarts整合spring boot进行开发

    一.开始前的准备 Echarts官网下载: https://echarts.baidu.com/download.html

  7. ECharts+百度地图网络拓扑应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  8. ECharts+BaiduMap+HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  9. 时隔两个月再写的Echarts(Enterprise Charts,商业级数据图表)一文

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

随机推荐

  1. 采用 ITextPDF 类库测试向 PDF 中加入图片的示例

    package com.smbea.image; import com.artup.util.image.ImageUtil; import com.itextpdf.text.*; import c ...

  2. 为 Drupal 7 构建一个新主题

    主题解释了 Drupal 网站的用户界面 (UI).虽然主题结构并没有明显的变化,但 Drupal 版本 7 配备了一个新的主题实现方法.本文演示了如何创建一个新的 Drupal 7 主题. Drup ...

  3. 分享一个好东西(一天精通MongoDB数据库)

    https://pan.baidu.com/s/1o7V5e8U 总共几个小时的视频,看了之后醍醐灌顶.分享出来.

  4. Mirco F-measure and Macro F-measure

  5. PHP接口对方(C#)接收不到数据?ContentLength=-1

    工作时遇到的问题.浏览器可以查看到json数据,但是对方死活收不到数据. 最后发现发现ContentLength=-1. 找到问题:为什么.NET程序下载获得的ContentLength=-1? 摘抄 ...

  6. java面试题之----HashMap常见面试题总结

    “你用过HashMap吗?” “什么是HashMap?你为什么用到它?” 几乎每个人都会回答“是的”,然后回答HashMap的一些特性,譬如HashMap可以接受null键值和值,而Hashtable ...

  7. vmware克隆的linux机器网络不通

    当我使用vmware的完全克隆功能克隆出两台虚拟机之后,登录发现网络不通,仔细检查发现几个问题,由于克隆之后默认的eth0网卡在系统中会变成eth1,导致之前的eth0网卡配置信息无法加载,网络不通, ...

  8. 再学UML-Bug管理系统UML2.0建模实例(四)

    3.3 顺序图(实现模型) 在系统设计与实现阶段我们也可以使用顺序图进行建模,此时通过顺序图可以明确表示系统设计中对象之间的交互,考虑到具体系统实现,对象之间通过方法调用传递消息.在BMS系统中,对每 ...

  9. 使用sqlloader向oracle导入文本数据

    文本文件如下,注意文件名必须有后缀,文本行首也需要|分隔符:[oracle@ycr test]$ more person.txt|aaa|123|m|aaa|123|m|aaa|123|m|aaa|1 ...

  10. Dll注入:修改PE文件 IAT注入

    PE原理就不阐述了, 这个注入是PE感染的一种,通过添加一个新节注入,会改变PE文件的大小,将原有的导入表复制到新节中,并添加自己的导入表描述符,最后将数据目录项中指向的导入表的入口指向新节. 步骤: ...