1.echarts 两根柱状图,两个折现图实现折线点落在柱子上,
高保真图:
处理思路:利用X双轴,拆分两对柱折组合,数据X2,间隔显示
x轴1:每个数据前加一个“”
x轴2:每个数据后加一个“”
Y数据轴柱子:
柱子1:[数据,0,数据,0,... ,数据,0]
折线1:[数据1,[(数据1+数据2)/2],数据2,[(数据2+数据3)/2] , ... , 数据n ,'-']
柱子2:[0,数据,0,数据,0,...,0,数据]
折线2:['-',数据0,[(数据1+数据2)/2],数据2,[(数据2+数据3)/2] , ... , 数据n ]
红色部分为辅助数据,柱状图0默认不会显示,折线图设置拐点不显示
处理过程:
<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
    var productnums=returndata.productnums.split(',');
    var tempproductnums=[];
    for(var i=0; i<productnums.length;i++)
    {
        tempproductnums.push(productnums[i]);
        tempproductnums.push(0);
    }
    options.series[0].data=tempproductnums;
   
    //柱状图2 数据加倍,每个数据前面加一个0
    var sellnums=returndata.sellnums.split(',');
    var tempsellnums=[];
    for(var i=0; i<sellnums.length;i++)
    {
        tempsellnums.push(0);
        tempsellnums.push(sellnums[i]);
    }
    options.series[1].data=tempsellnums;
   
    //折线图1 插入数=前后两个数的平均数,最后一个数据段不显示,虚构拐点不显示
    var preMonthproductnums=returndata.preMonthproductnums.split(',');
    var temppreMonth=[];
    for(var i=0; i<preMonthproductnums.length-1;i++)
    {
        temppreMonth.push(preMonthproductnums[i]);
        var num=(Number(preMonthproductnums[i])+Number(preMonthproductnums[i+1]))/2.0;
        var obj={value:num,symbol:'none'};
        temppreMonth.push(obj);
    }
    temppreMonth.push(preMonthproductnums[preMonthproductnums.length-1]);
    temppreMonth.push({value:'-',symbol:'none'});
    options.series[2].data=temppreMonth;
   
   //折线图2 插入数=前后两个数的平均数,第一个数据段不显示,虚构拐点不显示
    var preMonthsellnums=returndata.preMonthsellnums.split(',')
    temppreMonth=[];
    temppreMonth.push({value:'-',symbol:'none'});
    for(var i=0; i<preMonthsellnums.length-1;i++)
    {
        temppreMonth.push(preMonthsellnums[i]);
        var num=(Number(preMonthsellnums[i])+Number(preMonthsellnums[i+1]))/2.0;
       //  console.log(i+">>>"+num+"="+Number(preMonthsellnums[i])+":"+Number(preMonthsellnums[i+1]));
        var obj={value:num,symbol:'none'};
        temppreMonth.push(obj);
    }
    // console.log(temppreMonth)
    temppreMonth.push(preMonthsellnums[preMonthsellnums.length-1]);
    options.series[3].data=temppreMonth;
   
    echartsHandler.setOption(options);

</script>

心得总结:
1.多积累类似:console.log(), Number(),push(),split()等常用方法
2.多动手,多尝试
补充:
为了使柱子之间的距离变小采用三等分方式(增加两个辅助点)

echarts-特殊需求相关推荐

  1. ECharts数据可视化(二)

    本人学习视频为黑马程序员,视频连接为:黑马程序员 Echarts-介绍 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器 ...

  2. echarts 饼图取消legend图例的点击事件,保留鼠标悬浮legend上显示tooltie提示信息的事件

    echarts 饼图 因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏,进行了数据的二次处理,所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件,会关 ...

  3. 1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字),手把手教程系列

    一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...

  4. Echarts4.0 使用系列——折线图,这里可能有你需要的

    前言:项目中经常会使用到Echarts,有的需求差不多复用性高,由于之前没有好好总结,时间一长就容易忘,所以这里总结一下Echarts折线图使用,下面会列举官网一些Api. 一.效果图 二.配置基础折 ...

  5. ES6高级使用技巧(reduce,filter篇)

    本周总结 这几天在写Echarts自定义需求的时候发现了,图形化算法和函数式编程的应用场景,很多时候我们现在学的东西并一定在当前的这种状态有用,但是兴趣吧,喜欢就去学呗,没准在日后的工作日常中用到了 ...

  6. 百度地图开发技术方案及解决办法

    技术方案及解决办法 文章目录 技术方案及解决办法 总体方案 基础框架 前端网页 后端程序 结合搭建方法 跨域解决 python处理excel 问题描述 解决办法 网页结构 vue实例 内容引入 ele ...

  7. SpringBoot+MyBatis 天猫商城项目,超级漂亮【附源码】

    大家好,我是小咖秀! 帮粉丝找了一个基于SpringBoot的天猫商城项目,快速部署运行,所用技术:MySQL,Druid,Log4j2,Maven,Echarts,Bootstrap ... 免费给 ...

  8. echarts formatter_基于echarts实现某些骚需求

    阅读前提示:本文不会讲解ehcarts的API使用配置,要看请移步逛网文档,在此只提供一种关于某些特殊需求的快捷方便出效果的思路或建议... 做过基于echarts图表开发的小伙伴可能都有一种感觉,就 ...

  9. 坐标轴刻度取值算法-基于魔数数组-源于echarts的y轴刻度计算需求

    数值型坐标轴刻度计算算法 前言 算法描述 上代码 代码运行效果 ts版本(2021/3/10补充) 结语 前言 因实习的公司是做大数据的,而我的工作刚好又是需要绘制一些数据图表的.绘制图表有许多现成的 ...

  10. echarts 柱状图(1)多条柱状图完成参考标准需求

    tips:一定要引入最新版的echarts版本,此时最新版本为V5.2.2(仅供参考) 详细echarts配置可参考Highcharts 3D饼图文章~ <script src="ht ...

最新文章

  1. jar 工程我怎么在网页上url访问某一个方法_url及url参数与seo网站优化的关系
  2. 在HTML中英文换行问题
  3. Linux目录、文件的创建与删除
  4. 真正的高情商,从学会麻烦别人开始
  5. android缓存框架
  6. tf.nn.embedding_lookup()函数
  7. sql exists_SQL Exists运算符–终极指南
  8. JavaSE实战案例贪吃蛇小游戏
  9. 自创RTSP 服务器 用多款客户端软件测试接入可以,唯独VLC接入不了
  10. 基于氢探PowerECU的燃料电池控制系统开发经验
  11. 数字万用表怎么检查计算机,如何用数字万用表判断三极管是NPN还是PNP型
  12. 中标麒麟安装php环境,中标麒麟V6下wine完美运行通达信
  13. 微信小程序加入购物车效果动画
  14. 报错: error in ./node_modules/@vueuse/core/index.mjs
  15. HTML语言中用什么标签来标识,为了标识一个html文件应该使用什么标签
  16. 一些前端入门者可能需要的网站
  17. 让你的「文件传输助手」歇一歇吧,你完全有更实用的备忘录工具选择
  18. python计算绩效工资编程_Python实战精选:计算销售提成
  19. 浙大第五版概统复习提纲(前八章)
  20. 详解Visual Studio 2010中QT环境搭建配置

热门文章

  1. 一度智信开网店靠谱吗
  2. 神武4手游服务器维护,神武4手游快速升级攻略 神武4手游新区老区冲级攻略
  3. 计算机网络知识点————交换机
  4. Joining_thread简单实现
  5. php多用户表白源码,php源码]阿狸表白自动生成源码
  6. 迪杰斯特拉(Dijkstra)算法之两点之间的最短距离问题
  7. 腾讯云区块链服务(TBaaS)长安链一键上链初体验
  8. 信号与系统——阶跃信号与冲激信号
  9. Springboot实现发送邮箱
  10. 【Unity3D插件】DoTween插件的简单介绍及示例代码