精华内容
下载资源
问答
  • echarts tooltip样式设置

    2020-09-03 10:17:11
    tooltip:{ trigger:"axis", axisPointer:{ type:"shadow",//背景色 shadowStyle:{ color:"rgba(0,246,255,0.1)"//背景色设置 ...

    tooltip: {

                        trigger: "axis",

                        axisPointer: {

                            type: "shadow",//背景色

                            shadowStyle: {

                                color: "rgba(0,246,255,0.1)"//背景色设置

                            }

                        },

    //提示框样式调整

                        extraCssText: 'width:200px;height:80px;line-height:30px;background:rgba(0,0,0,0.5);font-size:18px;padding:10px 0;text-align:center;'

                    },

    例子如图:

    展开全文
  • echarts tooltip样式修改(2)

    千次阅读 2020-03-04 15:11:45
    我脑袋里想到两种方式:要么用echarts里面的 ----> tooltip -------> formatter来进行设置;要么写个组件,用鼠标事件mouseover和mouseout来控制组件的显示。 但是,我吧,就想用formatter。。。。 关于...

    最近做了一个需求,UI设计是这样:
    在这里插入图片描述
    我脑袋里想到两种方式:要么用echarts里面的 ----> tooltip -------> formatter来进行设置;要么写个组件,用鼠标事件mouseover和mouseout来控制组件的显示。
    但是,我吧,就想用formatter来实现。。。。
    关于tooltip的配置如下:

                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'shadow',
                    textStyle: {
                      color: '#ffffff'
                    }
                  },
                  backgroundColor: null,
                  // borderColor: '#FCEA00',
                  // borderWidth: 1,
                  borderRadius: 0,
                  padding: [10, 10, 10, 10],
                  textStyle: {
                    align: 'left',
                    fontSize: 14
                  },
                  formatter: function (v) {
                    var str = ''
                    v.forEach((item) => {
                      var unit = item.seriesName === '温度' ? '℃' : '%'
                      var str2 = item.marker + type + item.seriesName + ': ' + '<span style="color: ' + item.color + ';font-family:Microsoft YaHei;font-weight:700;">' + item.data[1] + unit + '</span>' + '<br/>'
                      str = str + str2
                    })
                    var y = new Date(parseInt(v[0].axisValue * 1000)).getFullYear()
                    var m = new Date(parseInt(v[0].axisValue * 1000)).getMonth() + 1 > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getMonth() + 1 : '0' + (new Date(parseInt(v[0].axisValue * 1000)).getMonth() + 1)
                    var d = new Date(parseInt(v[0].axisValue * 1000)).getDate() > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getDate() : '0' + new Date(parseInt(v[0].axisValue * 1000)).getDate()
                    var h = new Date(parseInt(v[0].axisValue * 1000)).getHours() > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getHours() : '0' + new Date(parseInt(v[0].axisValue * 1000)).getHours()
                    var mm = new Date(parseInt(v[0].axisValue * 1000)).getMinutes() > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getMinutes() : '0' + new Date(parseInt(v[0].axisValue * 1000)).getMinutes()
                    var dStr = y + '-' + m + '-' + d + ' ' + h + ':' + mm
                    var inner = '<div style="padding: 25px 20px; border: 1px solid #FCEA00; background-color: rgba(0, 0, 0, 0.7);">' + dStr + '<br/>' + str + '</div>'
                    var out = '<div style="background: linear-gradient(to left, #FCEA00, #FCEA00) left top no-repeat, linear-gradient(to bottom, #FCEA00, #FCEA00) left top no-repeat, linear-gradient(to left, #FCEA00, #FCEA00) right top no-repeat, linear-gradient(to bottom, #FCEA00, #FCEA00) right top no-repeat, linear-gradient(to left, #FCEA00, #FCEA00) left bottom no-repeat, linear-gradient(to bottom, #FCEA00, #FCEA00) left bottom no-repeat, linear-gradient(to left, #FCEA00, #FCEA00) right bottom no-repeat, linear-gradient(to left, #FCEA00, #FCEA00) right bottom no-repeat;background-size: 1px 21px, 21px 1px, 1px 21px, 21px 1px;padding: 10px;">' + inner + '</div>'
                    return out
                  }
                },
    
    1. 首先,将tooltip的backgroundColor设为null ,不设border,假装没有任何的背景和框框
    2. 里面的数据先找到合适的排列,再加个div 设个border
    3. 最后外面再加个div 写四个角的border

    结果:
    在这里插入图片描述

    展开全文
  • echarts tooltip内容样式布局自定义

    千次阅读 2019-10-08 10:58:23
    先看效果图 实现的主要代码 tooltip: { trigger: 'axis', padding:0, axisPointer: { type: 'line', lineStyle: { type: 'solid', width: 1, color: '#e0e2eb'...

    先看效果图

    在这里插入图片描述

    实现的主要代码

    tooltip: {
       trigger: 'axis',
        padding:0,
        axisPointer: {
            type: 'line',
            lineStyle: {
                type: 'solid',
                width: 1,
                color: '#e0e2eb'
            }
        },
        formatter: function(params) {
            var name1 = params[0].name;
            var str = '<div class="tooltip">\
                     <div class="tooltip-title note-circle-blue">' + ' 数据增量 ' + '</div>\
                     <div class="tooltip-content">\
                     <span class="tooltip-title-left">' + name1 + '</span> <sapn class="tooltip-title-right"> ' + params[0].data + ' </sapn>\
                    </div>\
                   </div>';
            return str;
        }
    },
    

    CSS代码

    .tooltip {
        border-radius: 4px;
        box-shadow: 2px 4px 6px 6px rgba(0, 0, 0, 0.2);
        background: #fff;
    }
    
    .tooltip-title {
        padding: 0 5px;
        width: 170px;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #ebf0f5;
        color: #333;
    }
    
    .tooltip-content {
        padding: 5px 10px;
        min-height: 50px;
    }
    
    .tooltip-title-right {
        float: right;
        padding-right: 10px;
        font-size: 16px;
        color: #30a8e7;
    }
    
    .tooltip-title-left {
        padding-left: 10px;
        color: #333;
    }
    

    项目全部代码块

     function returnRanNum() {
      return Math.round(Math.random() * 3000 + 1000);
    }
    function returnLineDataY(len) {
        var arr = [];
        for (var i = 0; i < len; i++) {
            arr.push(returnRanNum())
        }
        return arr;
    }
    var lineOne = echarts.init(document.getElementById('lineOne'));
    var lineOneOption = {
        color: ['#5db1f3', '#fba741'],
        legend: {
            show: true,
            bottom: 0,
            data: ['2018/10/17 数据增量'],
        },
        tooltip: {
            trigger: 'axis',
            padding:0,
            axisPointer: {
                type: 'line',
                lineStyle: {
                    type: 'solid',
                    width: 1,
                    color: '#e0e2eb'
                }
            },
            formatter: function(params) {
                var name1 = params[0].name;
                var str = '<div class="tooltip">\
                         <div class="tooltip-title note-circle-blue">' + ' 数据增量 ' + '</div>\
                         <div class="tooltip-content">\
                         <span class="tooltip-title-left">' + name1 + '</span> <sapn class="tooltip-title-right"> ' + params[0].data + ' </sapn>\
                        </div>\
                       </div>';
                return str;
            }
        },
        grid: {
            x: 60,
            y: 20,
            x2: 30,
            y2: 50,
            borderWidth: 1
        },
        // calculable: true,
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#666'
                }
            },
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    width: 1,
                    color: '#ababab'
                }
            },
            axisTick: {
                show: false
            },
            data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07']
        }],
        yAxis: [{
            type: 'value',
            // name: "服务量:(万次)",
            // nameTextStyle: {
            //   color: '#666'
            // },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: '#666'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#e9e9e9'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 1,
                    color: '#ababab'
                }
            },
            axisTick: {
                show: false
            }
        }],
        series: [{
            name: '2018/10/17 数据增量',
            type: 'line',
            smooth: true,
            // showSymbol: true,
            // symbolSize: 8,
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(93,177,243, .4)'
                    }, {
                        offset: 1,
                        color: 'rgba(255,255,255,0.1)'
                    }], false),
                    opacity: 0.9
                }
            },
            data: returnLineDataY(7)
        }]
    };
    lineOne.setOption(lineOneOption);
    

    总结

    结合上次发的内容,补充formatter的强大功能。

    展开全文
  • echarts 自定义tooltip样式 备份 在echarts文档中有个extraCssText可以进行自定义样式覆盖 最终效果图

    echarts 自定义tooltip样式

    备份

    在echarts文档中有个extraCssText可以进行自定义样式覆盖

    • 最终效果图
      截屏2020-10-14 上午8.55.00.png
    展开全文
  • echarts tooltip 轮播

    2018-08-01 10:21:37
    echarts-tooltip 轮播 很不错的,图标轮播,具体样式还是可以的
  • echarts设置tooltip样式

    千次阅读 2019-02-13 15:30:21
    echarts设置tooltip自定义样式,可以在tooltip添加 extraCssText属性,用此来定义自定义样式,参考代码如下 tooltip: { show: true, formatter: function (param) { //console.log(param.value) return param.value...
  • echarts折线图的时候,hover数据点的样式是默认,但是有的时候显示的样式和自己理想的样式有区别的时候,我们就需要自己更改样式,来满足自己的需求,呢要怎么进行更改呢,官方文档说明可以在tooltip的formatter...
  • Echarts tooltip不影响其样式地给文字加单位 代码: formatter: function (params) { var result = params[0].name + "<br>"; params.forEach(function (item) { if (item.value) { result += it...
  • ehcarts tooltip 自定义背景样式,带小三角。
  • 自定义样式css:  body,html{ width: 100%; height: 100%; box-sizing: border-box; background: #3c4262;}#myChart{ width: 800px; height: 500px; margin: 150px auto; background: #3c4262;}...
  • 最近在用echarts开发页面可视化数据时,用到了UI提供的echarts 样式,需要自定义tooltip悬浮提示框的样式,最初在网上找了一些例子,都是你抄我的,我抄你的。 问题:如何自定义tooltip提示框中图标和文本样式? ...
  • 1.问题描述 实现如图效果,当鼠标悬浮...按钮点击方法不执行(需增加全局作用域的样式tooltip无法使用vue组件的方法, 必须定义windows全局上) tooltip字段主要配置如下 tooltip: { // 鼠标是否可以进入悬浮.
  • 已经使用了formatter回调方法设置了高度和样式。滚动条展示出来了 但是应该怎么让自己的鼠标可以控制这个弹窗的滚动条?</p>
  • this.circleChart = { tooltip: { trigger: 'item', backgroundColor: '#fff', textStyle: { color: '#666', ...
  • echartstooltip 基本样式问题处理

    千次阅读 2019-01-01 17:03:14
    echarts中遇到几个样式问题,现总结如下: 1、tooltip样式中 值换行 在tooltip中修改加上一句代码 formatter: '{b0}: {c0}&lt;br /&gt;' 示例如下: tooltip: { trigger: 'axis', ...
  • echarts中的tooltip是提示框组件,正常展示如下:
  • 最近用echarts做数据展示时,出现了地图上的点,鼠标hover上去的时候,不是显示我动态设置的样式,而是第一次只显示点的纬度,像这样: 并且它只是第一次hover的时候这样,第二次的时候,就显示我动态设置的样式了 ...
  • echarts设置toolTip大小和样式问题

    千次阅读 2019-10-07 16:35:51
    最近研究echarts,发现提示框太大,位置不合适问题, 用jq,css选中div的tooltip设置大小有...http://echarts.baidu.com/option.html#tooltip.extraCssText 最后解决了 tooltip: { trigger: 'item', formatt...
  • echarts图 自定义tooltip样式

    万次阅读 2019-03-24 13:55:40
    echarts图 自定义tooltip样式 当碰到的需求需要在tooltip里面展示不同的内容的时候,比如在红色的区域显示的内容,和不在红色的区域显示又是不一样的内容。如下图: 怎么做的呢? 通过规则rules(规则根据需求来...
  • echarts 全国地图下钻 以及tooltip样式修改 这个项目涉及到地图下潜 以及tooltip样式修改 以及部分饼状图折线图 希望打个笔记吧 做得也不容易 废话不多说 上代码 需要引入jq echarts 以及各个省份的json文件 效果图...
  • 实现在Echarts地图的tooltip提示框中绘制图表 最近遇到一个需求是需要在地图中,鼠标点击或者停留在地图中某一片区域时,该区域显示亮高和显示tooltip提示框信息,但是难点在于需要在tooltip提示框中再绘制一层图表...
  • echarts 定义样式文字

    2020-05-19 16:21:02
    最近一年在做用到echarts 一些归纳和记录 先附上效果图 varxAxis=["辅导","协作","授权","达至最佳绩效","影响力"]; var dataPretest=[3,4,4,4,4]; vardataPosttest=[3,3,5,6,4]; var options={ tooltip: { ...
  • echarts图表自定义tooltip提示框样式

    千次阅读 2020-04-14 13:50:48
    回调函数以字符串拼接tooltip提示框样式 echarts option中对tooltip属性设置: tooltip: { trigger: 'axis', //tooltip触发条件 坐标轴 axisPointer: { lineStyle: { color: '#57617B' //显示竖线颜色 } ...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 195
精华内容 78
关键字:

echartstooltip样式