echarts整合多个类似option的方法实例

转载  更新时间:2018年07月10日 09:50:40   作者:锦年与panda   我要评论

这篇文章主要给大家介绍了关于echarts整合多个类似option的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

最近项目里面遇到一些图表需要用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对于一个前端来说是多么的重要。而我自己也在不断的努力中,很感谢我老大,很多不懂的地方问他,他都会帮我解决。继续加油吧。

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • js动态创建、删除表格示例代码

    js动态创建、删除表格示例代码

    生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号,具体的实现过程如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • js中将多个语句写成一个语句的两种方法小结

    js中将多个语句写成一个语句的两种方法小结

    js中将多个语句写成一个语句的两种方法讲述了逗号运算符将多个语句写成一个语句以及花括号写成一个语句的实现方法,需要的朋友可以参考一下
    2007-12-12
  • 每天一篇javascript学习小结(基础知识)

    每天一篇javascript学习小结(基础知识)

    这篇文章主要介绍了javascript基本的知识点,包括字符串、特殊字符运算、变量转字符串等,对javascript的基础知识讲解的很全面,为了更好地帮助大家学习javascript,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js实现千分符和保留几位小数的简单实例

    js实现千分符和保留几位小数的简单实例

    下面小编就为大家带来一篇js实现千分符和保留几位小数的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • Ajax和Comet技术总结

    Ajax和Comet技术总结

    Ajax是一种技术,一种能够向服务器请求额外的数据而无需卸载页面的技术,能够使网页具备更优的用户体验。Ajax技术的核心是XMLHttpRequest对象(XHR)。本文从XHR开始谈起,理解Ajax技术的特点,再对跨域以及Comet等技术进行简要理解和总结。下面跟着小编一起来看下吧
    2017-02-02
  • JS 分号引起的一段调试问题

    JS 分号引起的一段调试问题

    看看执行后有什么效果,无论textbox1.text是什么值,都会时放条件判断.为什么呢
    2009-06-06
  • js基于setTimeout与setInterval实现多线程

    js基于setTimeout与setInterval实现多线程

    这篇文章主要介绍了js基于setTimeout与setInterval实现多线程的方法,分析了多线程的原理与javascript模拟实现多线程的相关技巧,需要的朋友可以参考下
    2016-06-06
  • javascript之鼠标拖动位置互换效果代码

    javascript之鼠标拖动位置互换效果代码

    javascript之鼠标拖动位置互换效果代码...
    2007-11-11
  • canvas实现钟表效果

    canvas实现钟表效果

    本文主要分享了canvas实现钟表效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Bootstrap源码解读排版(1)

    Bootstrap源码解读排版(1)

    这篇文章主要源码解读了Bootstrap排版,介绍了Bootstrap排版的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论