echarts图表相关配置问题整理、自定义图表滚动条样式、x轴label竖直显示、自定义toolltip内容及样式、tooltip位置自适应、图表无数据引用自定义图片、浏览器窗口变化图表自适应更新等

置顶 已于 2022-05-09 10:03:59 修改
阅读量645 收藏 4
点赞数 1
分类专栏： 前端小强踩坑之路 文章标签： echarts js react html
于 2021-10-19 14:13:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hzq88888/article/details/120844697
版权

自定义echarts图表滚动条样式：

 代码：

图表的html格式为：
<div className="medicFeeStyl">
    <div id="medicFeePic" style={{ width: '100%', height: '100%' }}></div>
    <div id="noDataImg6" style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
     <img src={noDataPic} alt="" style={{ width: 140, height: 130, display: 'inline-block' }}></img>
    </div>
</div>

valData的数据格式为：
const costPandectPicAll = { xAxis: [], series: [{ data: [] }, { data: [] }, { data: [] }, { data: [] }, { data: [] }, { data: [] }, { data: [] }, { data: [] }] };
this.getCostPandectBar(costPandectPicAll)

getCostPandectBar = (valData) => {
        const { profitByDeptList } = this.state
        if (profitByDeptList === null || profitByDeptList.length === 0) { // 获取的数据源
            $('#noDataImg6').show()  //无数据时显示一张自定义图片展示
            $('#medicFeePic').hide()
            return {}
        } else {
            $('#noDataImg6').hide()
            $('#medicFeePic').show()
            const xAxis = valData.xAxis;
            const series = valData.series
            const { adminValue } = this.state
            var option = {
                tooltip: {
                    trigger: 'axis',
                    textStyle: {
                        color: 'rgba(0,0,0,0.65)',
                        fontSize: 14,
                        fontWeight: 'normal'
                    },
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    extraCssText: 'min-width:300px',
                    position: function (pos, params, dom, rect, size) {
                        if((pos[0]+size.contentSize[0])>size.viewSize[0]){
                            return 'left'
                        }
                    },
                    formatter: function (param) {
                        if (param.length > 0) {
                            var newTip = ""
                            for (var i = 1; i < param.length; i++) {
                                if (param[i].data.ratio == undefined) {
                                    newTip += `<div style="display:flex;justify-content: space-between;"><span style="min-width:100px">${param[i].marker}${param[i].seriesName}</span> <span style="margin-right:24px;text-align:right;min-width:100px;font-weight:600;color:rgba(0,0,0,0.85)"> ${param[i].data.value} 元</span><span style="min-width:60px;text-align:right;font-weight:600;color:rgba(0,0,0,0.85)"></span></div>`
                                } else {
                                    newTip += `<div style="display:flex;justify-content: space-between;"><span style="min-width:100px">${param[i].marker}${param[i].seriesName}</span> <span style="margin-right:24px;text-align:right;min-width:100px;font-weight:600;color:rgba(0,0,0,0.85)"> ${param[i].data.value} 元</span><span style="min-width:60px;text-align:right;font-weight:600;color:rgba(0,0,0,0.85)">${param[i].data.ratio}%</span> </div>`
                                }
                            }
                            if (adminValue != 2) {
                                return `${param[0].name}<br/><div style="display:flex;justify-content: space-between;"><span style="min-width:100px">${param[0].marker}${param[0].seriesName}</span> <span style="margin-right:24px;text-align:right;min-width:100px;font-weight:600;color:rgba(0,0,0,0.85)"> ${param[0].data.value} 元</span><span style="min-width:60px;text-align:right;font-weight:600;color:rgba(0,0,0,0.85)"></span></div><div style="display:flex;justify-content: space-between;"><span style="min-width:100px;text-indent:13px">总费用</span> <span style="margin-right:24px;text-align:right;min-width:100px;font-weight:600;color:rgba(0,0,0,0.85)"> ${param[0].data.total}元</span><span style="min-width:60px;text-align:right;font-weight:600;color:rgba(0,0,0,0.85)"></span></div>${newTip}`
                            } else {
                                return `[${param[0].name}] ${param[0].data.drgName}<br/><div style="display:flex;justify-content: space-between;"><span style="min-width:100px">${param[0].marker}${param[0].seriesName}</span> <span style="margin-right:24px;text-align:right;min-width:100px;font-weight:600;color:rgba(0,0,0,0.85)"> ${param[0].data.value} 元</span><span style="min-width:60px;text-align:right;font-weight:600;color:rgba(0,0,0,0.85)"></span></div><div style="display:flex;justify-content: space-between;"><span style="min-width:100px;text-indent:13px">总费用</span> <span style="margin-right:24px;text-align:right;min-width:100px;font-weight:600;color:rgba(0,0,0,0.85)"> ${param[0].data.total}元</span><span style="min-width:60px;text-align:right;font-weight:600;color:rgba(0,0,0,0.85)"></span></div>${newTip}`
                            }
                        }
                    }
                },
                dataZoom: profitByDeptList.length > 20 ? [//给x轴设置滚动条
                    {
                        start: 0,//默认为0
                        end: 100,//默认为100
                        type: 'slider',
                        show: true,
                        zoomLock: false,
                        brushSelect: false, //滚动条只允许滑动，不允许框选范围
                        maxValueSpan: 19,
                        minValueSpan: 19,
                        xAxisIndex: [0],
                        moveHandleSize: 0,
                        handleSize: 0,//滑动条的 左右2个滑动条的大小
                        height: 10,//组件高度
                        left: '10%', //左边的距离
                        right: '10%',//右边的距离
                        bottom: 22,//下边的距离
                        borderColor: "#ffffff",
                        fillerColor: '#d8d8d8', //选中滑条颜色
                        borderRadius: 5,
                        dataBackground: '#ffffff',
                        backgroundColor: '#ffffff',//两边未选中的滑动条区域的颜色
                        showDataShadow: false,//是否显示数据阴影 默认auto
                        showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                        realtime: true, //是否实时更新
                        filterMode: 'filter',
                    },
                    //下面这个属性是里面拖到
                    {
                        type: 'inside',
                        show: true,
                        zoomLock: true,
                        xAxisIndex: [0],
                        start: 0,//默认为1
                        end: 100,//默认为100
                    },
                ] : [],
                color: ['#B2E3F3', '#009FD4', '#39D1AF', '#FFD45B', '#7FCFE9', '#7A7DFF', '#556FC6'],
                grid: {
                    x: 16,  //左
                    y: 30,  //上
                    x2: 24, //右
                    y2: 32,  //下
                    containLabel: true,
                },
                legend: {
                    bottom: 0,
                    left: 18,
                    icon: 'square',
                    textStyle: {//文字颜色
                        fontSize: 12,
                        color: 'rgba(0,0,0,0.65)'
                    },
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 16,
                    selectedMode: false,
                    data: ['医保赔付金额', '药材费', '手术费', '检查费', '耗材费', '诊疗服务', '其它']
                },
                xAxis: {
                    type: 'category',
                    data: xAxis,
                    nameTextStyle: {
                        color: 'rgba(0,0,0,0.45)',
                        fontSize: 14
                    },
                    axisLabel: {
                        interval: 'auto',
                        show: true,
                        textStyle: {
                            color: 'rgba(0,0,0,0.45)',  //更改坐标轴文字颜色
                            fontSize: 14      //更改坐标轴文字大小
                        },
                        color: "rgba(0,0,0,0.45)",
                        formatter: function (value) {
                            let fuhaoValue;
                            if (adminValue != 2) {
                                fuhaoValue = value
                            } else {
                                fuhaoValue = '︹' + value + '︺'
                            }
                            value = fuhaoValue.toString();
                            var maxlength = 6;
                            var newValue;
                            if (value.length > maxlength) {
                                newValue = value.substring(0, maxlength);
                                return newValue.split("").join("\n")
                            } else {
                                return value.split("").join("\n");
                            }
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#d9d9d9' //更改坐标轴颜色
                        },
                        onZero: false  //为true时让轴在0点位置
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '费用(元)',
                    nameTextStyle: {
                        color: 'rgba(0,0,0,0.45)',
                        fontSize: 14,
                        // padding: [0, 0, 0, -75]
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#e8e8e8'],
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            align: 'right',
                            fontSize: 14     // 文字右对齐
                        },
                        color: "rgba(0,0,0,0.45)",
                    }
                },
                series: [
                    {
                        name: '医保赔付金额',
                        type: 'bar',
                        barWidth: 6,
                        emphasis: {
                            focus: 'series'
                        },
                        data: series[7].data
                    },
                    {
                        name: '药材费',
                        type: 'bar',
                        barWidth: 6,
                        stack: '费用',
                        emphasis: {
                            focus: 'series'
                        },
                        data: series[1].data
                    },
                    {
                        name: '手术费',
                        type: 'bar',
                        barWidth: 6,
                        stack: '费用',
                        emphasis: {
                            focus: 'series'
                        },
                        data: series[3].data
                    },
                    {
                        name: '检查费',
                        type: 'bar',
                        barWidth: 6,
                        stack: '费用',
                        emphasis: {
                            focus: 'series'
                        },
                        data: series[2].data
                    },
                    {
                        name: '耗材费',
                        type: 'bar',
                        barWidth: 6,
                        stack: '费用',
                        emphasis: {
                            focus: 'series'
                        },
                        data: series[4].data
                    },
                    {
                        name: '诊疗服务',
                        type: 'bar',
                        barWidth: 6,
                        stack: '费用',
                        emphasis: {
                            focus: 'series'
                        },
                        data: series[5].data
                    },
                    {
                        name: '其它',
                        type: 'bar',
                        barWidth: 6,
                        stack: '费用',
                        emphasis: {
                            focus: 'series'
                        },
                        data: series[6].data
                    }
                ]
            };
            var medicFeePic = echarts.init(document.getElementById('medicFeePic'));
            medicFeePic.clear()
            medicFeePic.setOption(option);
        }

        window.addEventListener("resize", function () {
            medicFeePic.resize();
        });  //监听浏览器窗口变化视图随之更新
    }

℡仅此、而已
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3D地球+自定义tooltip，自定义样式完美显示
04-17
在描述中提到的“解决TOOLTIP不显示问题”，这通常是指在使用ECharts 3D地球时，由于默认的tooltip配置可能无法满足特定需求，导致数据提示信息无法正常显示。Tooltip是ECharts中一种重要的交互元素，当鼠标悬停在...
echarts自作地图显示散点图 tooltip自定义内容
07-10
在本文中，我们将深入探讨如何使用ECharts库创建自定义地图并显示散点图，同时定制Tooltip的内容。ECharts是一款由百度开发的基于JavaScript的数据可视化库，它支持丰富的图表类型，包括柱状图、折线图、饼图以及...
echarts自定义滚动条
細水、長流√的专栏
11-07 783
echarts自定义滚动条
echarts改变滚动条的样式
m0_68925632的博客
10-14 1355
echarts改变滚动条的样式
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
最新发布
码喽的自我修养
06-08 1966
​以柱状图为例子，当数据过多时，echarts图就会堆叠在一起，看起来十分难看。通常解决办法是通过减小barWidth值来缩小柱子宽度，但是若数据达到上百条，这场面是相当壮观。另一个很常用的就是在外部容器div添加overflow: scroll;，这确实能解决一些问题，但是若是数据量过少，就会显的非常稀疏，经历过的都懂。言归正传，以上都不是最佳解决方式，echarts其实已经为提供好相应的API配置了，无论是横向滚动还是纵向滚动，dataZoom都能满足。
echarts滚动图例样式设置
MISS_CJL的博客
01-06 6355
echarts滚动图例样式设置
实现echarts图表滚动，设置自定义滚动条
热门推荐
mango的博客
03-11 2万+
echarts自带的dataZoom设置后触发的鼠标滚轮滚动事件会放大缩小echarts图表本身，而不是我们想要的图表滚动效果。 并且要实现自定义滚动条还是需要自己设置的滚动条用得舒服。通过dataZoom配置项设置很是麻烦。 于是想出了通过内嵌高度溢出的图表，外层使用高度固定的div来设置滚动条。 &lt;el-scrollbar style="height:235px;"&gt; ...
echarts 滚动条配置
小嘟嘟的博客
07-12 5288
dataZoom=[ //区域缩放 { id: ‘dataZoomX’, show:true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。 backgroundColor:“rgba(47,69,84,0)”, //组件的背景颜色 type: ‘slider’, //slider表示有滑动块的，inside表示内置的 dataBackground:{ //数据...
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁.zip
06-15
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁 组件介绍： <charts/> 基础组件，主要用于生成布局和图表。 <charts-legend/> 图例组件，主要用于生成图表的图例， 配置项 。 <charts-series/> ...
echarts图表导出excel示例
09-04
首先，为了展示ECharts图表，我们需要引入ECharts库及相关模块。在示例中，`require.config`用于配置模块加载路径，确保`echarts`以及`echarts/chart`下的`bar`, `line`, 和 `pie`模块能够正确加载。这样，我们就...
开源图表echarts-经典图表代码整理
11-26
本资料主要整理了ECharts的经典图表代码，帮助用户快速理解和使用这个强大的工具。 首先，ECharts支持多种图表类型，包括折线图、柱状图、饼图、散点图、K线图、地图、仪表盘等。这些图表在数据可视化中各有其应用...
echarts 图表设置 滚动条
zhang_zan
08-10 4861
echarts图表设置滚动条
修改 echarts 默认样式记录，包含设置横向滚动条样式、坐标轴标签溢出 hover 显示全部
TangAcrab的博客
11-02 3110
自定义 echarts 样式，包含设置横向滚动条样式、坐标轴标签溢出 hover 显示全部
echarts的滑动条 dataZoom 样式自定义
qq_41515189的博客
07-21 2532
echarts 自定义 dataZoom
echarts滚动条样式修改
少油少盐不要辣
07-05 469
【代码】echarts滚动条样式修改。
echarts图表渐变色 、及X轴滚动条样式处理
DXL131795的博客
12-09 2060
由于项目中运用echarts可能较多。因此对同一种类型的echarts进行一个封装，页面调用根据传入不同的状态生成不同样式，例如横向柱状图和纵向柱状图。 话不多说上代码 父页面 checkOptionData:function(){ let xDate=["1","2","3",'4','5','6','7']; let y1=[100,600,200,100,100,100,100]; let y2=[200,100,300,100,100,10
echarts dataZoom修改滑动条的样式
weixin_50249353的博客
03-06 2370
echarts dataZoom
echarts柱状图设置滚动条，去掉下面的区域只要滑动条，并弄粗滚动条
weixin_42190844的博客
12-29 1968
echarts在使用柱状图时，横向元素过多，会一直缩小，不利于查看内容。这时候我们一般会设置横向滚动条。
vue中echarts图表x轴数据长达大显示不全
08-09
在Vue中使用Echarts图表...总结起来，调整图表大小、缩短x轴数据内容、使用x轴滚动和tooltip显示完整信息这些方法可以帮助解决Vue中Echarts图表x轴数据长达大显示不全的问题。具体使用哪种方法取决于数据的特点和需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值