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


Posted in Javascript onJuly 10, 2018

前言

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

效果图如下:

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

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

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

总结

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

Javascript 相关文章推荐
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 #Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 #Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 #Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 #Javascript
vue超时计算的组件实例代码
Jul 09 #Javascript
微信小程序自定义底部弹出框
Nov 16 #Javascript
详解vue中组件参数
Jul 09 #Javascript
You might like
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python生成随机验证码的两种方法
2015/12/22 Python
Python实现随机选择元素功能
2017/09/14 Python
python中的闭包函数
2018/02/09 Python
用Eclipse写python程序
2018/02/10 Python
python 编码规范整理
2018/05/05 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
python如何将图片转换素描画
2020/09/08 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
环保倡议书格式范文
2014/05/14 职场文书
2014年个人委托书范本
2014/10/13 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript