echarts学习使用心得

本文分享了作者在使用echarts过程中遇到的问题及解决方案,包括多Y轴设置、图表联动、全选功能实现、柱状图的平铺与叠加以及饼图的自定义悬浮文字。在柱状图中,通过stack属性控制柱条叠加和平铺。饼图的挑战在于自定义悬浮文字,并处理过多悬停内容超出图表范围的问题,通过调整tooltip格式实现分行显示。
摘要由CSDN通过智能技术生成

    echarts是一个前端图表的框架。是比较容易上手(我本来是专做后台,由于公司组织架构问题,才开始接触前端)并且适用面广(图表类型非常丰富)也非常实用(很多网站都有使用到)的框架。

    基本的使用流程在网上有很多很多的文章了,在这里我主要就是分享一下我自己在使用过程中碰到的一些问题和解决方法。

    首先,用的最多的一般还是折线图,柱状图和饼图。

    在我用到折线图的时候,碰到的难点主要就是多Y轴和联动。

    主要的核心代码:

    多Y轴:

for (var n = 0; n < series.length; n++) {
            var seriesData = new Array();
            var yAxisItem;
            var firstItems = rows[0].chartItems;
            if (n === 0) {
                yAxisItem = {
                    show: true,
                    type: 'value',
                    name: firstItems[n].unit,
                    seriesName: firstItems[n].dataitemName,
                    position: 'left',
                    splitArea: {show: true},
                    offset: n / 2 * 50
                };
            } else {
                if (n % 2 === 0) {
                    yAxisItem = {
                        show: false,
                        type: 'value',
                        name: firstItems[n].unit,
                        seriesName: firstItems[n].dataitemName,
                        position: 'left',
                        splitArea: {show: false},
                        offset: n / 2 * 50
                    };
                } else {
                    yAxisItem = {
                        show: false,
                        type: 'value&#
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值