美文网首页
X,Y轴字体太多省略号同时鼠标移上去展示全部

X,Y轴字体太多省略号同时鼠标移上去展示全部

作者: lu2294 | 来源:发表于2020-03-03 19:24 被阅读0次
    
    /** 折线组件组件 */
    import React from 'react'
    import ReactEcharts from 'echarts-for-react'
    import { Tooltip, Button } from 'antd';
    import moment from 'moment';
    import _ from 'lodash'
    import echarts from 'echarts';
    
    const Index = props => {
        const { data } = props
        const getOptions = () => {
            const myOptions = {
                grid: [
                    {
                        left: '28%',
                        right: '12%',
                        top: '8%',
                        bottom: '10%',
                    }
                ],
                yAxis: [
                    {
                      //就是一月份这个显示为一个线段,而不是数轴那种一个点点
                      show : true,
                      boundaryGap: true,
                      inverse:true,
                      type: "category",
                      name: "时间",
                      data: data[1],
                      axisLine:{       //y轴
                        show:false
              
                      },
                      axisTick:{       //y轴刻度线
                        show:false
                      },
                      axisLabel : {
                            formatter: function(v){
                                if(String(v).length > 6){
                                    return v.substring(0, 6) + '...';
                                }else{
                                    return v
                                }
                            },
                            
                            textStyle: {
                                color: '#A6B9C8'
                            }
                        },
                      splitLine: {     //网格线
                        show: false
                      },
                      triggerEvent: true,
                    }
                  ],
                  xAxis: [
                    {
                      show: false,
                      type: "value",
                      name: "销量(kg)",
                      splitLine: {
                        show: false
                      }
                    }
                  ],
                series: [
                    {
                        // name: [1,6,3,8,5],
                        type: 'bar',
                        barWidth : 15,
                        showSymbol: false,
                        label: {
                            show: false
                        },
                        lineStyle:{ 
                            color:'#1A71FF' //改变折线颜色
                        },
                        itemStyle: {
                                            normal: {
                                                barBorderRadius:[5, 5, 5, 5],
                                                color: function(params) {
                                                    let colorList = [
                                                        "#FF4747",
                                                        "#FA6400",
                                                        "#FA6400",
                                                        "#04DCFF",
                                                        "#04DCFF",
                                                    ];
                                                    if(colorList[params.dataIndex]){
                                                        return colorList[params.dataIndex];
                                                    }
                                                    return '#04DCFF'
                                                },
                                                label: {
                                                    show: true,
                                                    position: 'right',
                                                    textStyle:{color:'#00C1DE'},
                                                     formatter: '{c}件'
                                                }
                                            }
                                        },
                        data: data[0],
                    }
                ]
            }
            return myOptions
        }
        const myOptions = getOptions(80)
       
       const  mouseover = {
            'mouseover': (params)=>{
                if( params.componentType == 'yAxis' ){
                    let offsetX = params.event.event.clientX
                    let offsetY = params.event.event.clientY
                    let xAxisTip = document.querySelector('.x-axis-tip')
                    xAxisTip.innerText = params.value;
                    xAxisTip.style.left = offsetX+ "px"
                    xAxisTip.style.top = offsetY + 11 + "px"
                    xAxisTip.style.display = 'block';
                  }
            },
            'mouseout': ()=> {
                let xAxisTip = document.querySelector('.x-axis-tip');
                xAxisTip.style.display = 'none';
              },
        }
        return (
                <ReactEcharts
                lazyUpdate
                notMerge
                option={myOptions}
                style={{
                    width: '100%',
                    height: '100%',
                }}
                onEvents={mouseover}
            />
                
                
        )
    }
    Index.defaultProps = {
        data: []
    }
    export default Index
    
    
    这几个注意
    triggerEvent: true,
    
    
    
    
    onEvents={mouseover}
    
    
    const  mouseover = {
            'mouseover': (params)=>{
                if( params.componentType == 'yAxis' ){
                    let offsetX = params.event.event.clientX
                    let offsetY = params.event.event.clientY
                    let xAxisTip = document.querySelector('.x-axis-tip')
                    xAxisTip.innerText = params.value;
                    xAxisTip.style.left = offsetX+ "px"
                    xAxisTip.style.top = offsetY + 11 + "px"
                    xAxisTip.style.display = 'block';
                  }
            },
            'mouseout': ()=> {
                let xAxisTip = document.querySelector('.x-axis-tip');
                xAxisTip.style.display = 'none';
              },
        }
    
    image.png

    相关文章

      网友评论

          本文标题:X,Y轴字体太多省略号同时鼠标移上去展示全部

          本文链接:https://www.haomeiwen.com/subject/ddiklhtx.html