echarts-特殊需求
<div id="demoId" style="height:400px; border: 1px solid #aaaaaa ;width:912px"></div> <script type="text/javascript" src= "echarts/dist/echarts-all.js" ></script> <script type="text/javascript"> var echartsHandler=echarts.init(document.getElementById("demoId")); //图形框架 var options={ color:['#ff7f50','#87cefa','#da70d6','#32cd32'], title : { text:'柱-折混搭(点落于柱子上)', x:'left', padding:[20,0,0,30] }, tooltip: { show: false }, grid:{ x2:20, borderWidth:0 }, legend: { x:'68%', padding:[25,0,0,30], data:['产量','销量','上月产量','上月销量'] }, xAxis : [ { type : 'category', data : [], axisLabel: { // 坐标轴文本标签,详见axis.axisLabel show: true, interval: 'auto', rotate: 10, margin:10, // formatter: null, textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE color: '#333' } }, axisTick: { // 坐标轴小标记 show: false // 属性show控制显示与否,默认不显示 }, splitLine: { // 分隔线 show:false }, axisLine: { // 坐标轴线 show: false // 默认显示,属性show控制显示与否 } }, { type : 'category', data : [], show : false } ], yAxis : [ { type : 'value', splitNumber:10, axisLine: { // 坐标轴线 show: false // 默认显示,属性show控制显示与否 } } ], series : [ { "name":"产量", "type":"bar", "barWidth":15, "xAxisIndex":1, "clickable":false, "data":[] }, { "name":"销量", "type":"bar", "barWidth":15, "clickable":false, "data":[] }, { "name":"上月产量", "type":"line",smooth:false, // 取消平滑 "xAxisIndex":1, "clickable":false, "data":[] }, { "name":"上月销量", "type":"line", "xAxisIndex":0, "clickable":false, "data":[] } ] }; //数据装载 //虚构后台数据 var data={ "productname":"衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子,羊毛衫,雪纺衫,裤子,高跟鞋,袜子,衬衫 ", "productnums":"5, 20, 40, 10, 10, 20, 8, 20, 10, 10, 8,5 ", "sellnums":"5, 8, 20, 10, 10, 8, 20, 40, 10, 10, 20,5 ", "preMonthproductnums":"5, 20, 40, 10, 10, 20, 20, 10, 10, 8, 20,5 ", "preMonthsellnums":"5, 8, 20, 10, 10, 8, 20, 10, 8, 20, 40, 10" }; var returndata=data; //处理装载数据 //X轴数据装载 console.log(data) //X轴1 >>>>实现横轴增倍 var productnames=returndata.productname.split(','); var tempnames=[]; for(var i=0; i<productnames.length;i++) { tempnames.push(""); tempnames.push(productnames[i]) } options.xAxis[0].data=tempnames; options.xAxis[1].data=tempnames; //柱状图1 数据加倍,每个数据后面加一个0 </script> |
echarts-特殊需求相关推荐
- ECharts数据可视化(二)
本人学习视频为黑马程序员,视频连接为:黑马程序员 Echarts-介绍 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器 ...
- echarts 饼图取消legend图例的点击事件,保留鼠标悬浮legend上显示tooltie提示信息的事件
echarts 饼图 因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏,进行了数据的二次处理,所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件,会关 ...
- 1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字),手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
- Echarts4.0 使用系列——折线图,这里可能有你需要的
前言:项目中经常会使用到Echarts,有的需求差不多复用性高,由于之前没有好好总结,时间一长就容易忘,所以这里总结一下Echarts折线图使用,下面会列举官网一些Api. 一.效果图 二.配置基础折 ...
- ES6高级使用技巧(reduce,filter篇)
本周总结 这几天在写Echarts自定义需求的时候发现了,图形化算法和函数式编程的应用场景,很多时候我们现在学的东西并一定在当前的这种状态有用,但是兴趣吧,喜欢就去学呗,没准在日后的工作日常中用到了 ...
- 百度地图开发技术方案及解决办法
技术方案及解决办法 文章目录 技术方案及解决办法 总体方案 基础框架 前端网页 后端程序 结合搭建方法 跨域解决 python处理excel 问题描述 解决办法 网页结构 vue实例 内容引入 ele ...
- SpringBoot+MyBatis 天猫商城项目,超级漂亮【附源码】
大家好,我是小咖秀! 帮粉丝找了一个基于SpringBoot的天猫商城项目,快速部署运行,所用技术:MySQL,Druid,Log4j2,Maven,Echarts,Bootstrap ... 免费给 ...
- echarts formatter_基于echarts实现某些骚需求
阅读前提示:本文不会讲解ehcarts的API使用配置,要看请移步逛网文档,在此只提供一种关于某些特殊需求的快捷方便出效果的思路或建议... 做过基于echarts图表开发的小伙伴可能都有一种感觉,就 ...
- 坐标轴刻度取值算法-基于魔数数组-源于echarts的y轴刻度计算需求
数值型坐标轴刻度计算算法 前言 算法描述 上代码 代码运行效果 ts版本(2021/3/10补充) 结语 前言 因实习的公司是做大数据的,而我的工作刚好又是需要绘制一些数据图表的.绘制图表有许多现成的 ...
- echarts 柱状图(1)多条柱状图完成参考标准需求
tips:一定要引入最新版的echarts版本,此时最新版本为V5.2.2(仅供参考) 详细echarts配置可参考Highcharts 3D饼图文章~ <script src="ht ...
最新文章
- jar 工程我怎么在网页上url访问某一个方法_url及url参数与seo网站优化的关系
- 在HTML中英文换行问题
- Linux目录、文件的创建与删除
- 真正的高情商,从学会麻烦别人开始
- android缓存框架
- tf.nn.embedding_lookup()函数
- sql exists_SQL Exists运算符–终极指南
- JavaSE实战案例贪吃蛇小游戏
- 自创RTSP 服务器 用多款客户端软件测试接入可以,唯独VLC接入不了
- 基于氢探PowerECU的燃料电池控制系统开发经验
- 数字万用表怎么检查计算机,如何用数字万用表判断三极管是NPN还是PNP型
- 中标麒麟安装php环境,中标麒麟V6下wine完美运行通达信
- 微信小程序加入购物车效果动画
- 报错: error in ./node_modules/@vueuse/core/index.mjs
- HTML语言中用什么标签来标识,为了标识一个html文件应该使用什么标签
- 一些前端入门者可能需要的网站
- 让你的「文件传输助手」歇一歇吧,你完全有更实用的备忘录工具选择
- python计算绩效工资编程_Python实战精选:计算销售提成
- 浙大第五版概统复习提纲(前八章)
- 详解Visual Studio 2010中QT环境搭建配置