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 相关文章推荐
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
小程序云开发实战小结
Oct 25 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
webpack的移动端适配方案小结
Jul 25 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文件上传实例详解!!!
2007/01/02 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php 问卷调查结果统计
2015/10/08 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
js中eval详解
2012/03/30 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
医大实习自我鉴定
2013/12/07 职场文书
创业计划书撰写原则
2014/01/25 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
创先争优公开承诺书
2014/08/30 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
听证会主持词
2015/07/03 职场文书
古诗之感恩老师
2019/10/24 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers