精华内容
下载资源
问答
  • echarts 自定义tooltip样式 备份 在echarts文档中有个extraCssText可以进行自定义样式覆盖 最终效果图

    echarts 自定义tooltip样式

    备份

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

    • 最终效果图
      截屏2020-10-14 上午8.55.00.png
    展开全文
  • echarts自定义tooltip样式

    万次阅读 2019-03-24 13:55:40
    echarts自定义tooltip样式 当碰到的需求需要在tooltip里面展示不同的内容的时候,比如在红色的区域显示的内容,和不在红色的区域显示又是不一样的内容。如下图: 怎么做的呢? 通过规则rules(规则根据需求来...

    echarts图 自定义tooltip的样式

    当碰到的需求需要在tooltip里面展示不同的内容的时候,比如在红色的区域显示的内容,和不在红色的区域显示又是不一样的内容。如下图:

    在红色的区域显示的内容

    在红色区域以外要显示的内容
    怎么做的呢?

    通过规则rules(规则根据需求来定),横纵坐标的值来自定义当前折线图上面点的提示框的内容

    const {rules} = this.state;
            
    tooltip: {
        trigger: 'axis',
        formatter(params) {
            const currentTime = params[0].data.time;
            const area = rules.find(item => currentTime >= item.areaStart && currentTime <= item.areaEnd);
            let text = '';
            if(area && params[0].data.value >= area.ratePercent){
                text = `<span style="color: red;">ﺴღﺴ&nbsp;警告:${moment(area.areaStart).format('HH:mm')}-${moment(area.areaEnd).format('HH:mm')}</span><br/><span style="font-size: 12px; color: red;">ratePercent&nbsp;${area.ratePercentSign}&nbsp;${area.ratePercent}%&nbsp;and&nbsp;totalNum&nbsp;${area.totalNumSign}&nbsp;${area.totalNum}</span><p style="height: 1px; width: 100%; background: rgba(190,190,190,.4); margin-top: 5px;" ></p>时间:${params[0].axisValue}<br />成交量:${params[0].data.count}<br />成交率:${params[0].data.value}%`
            }else{
                text = `时间:${params[0].axisValue}<br />成交量:${params[0].data.count}<br />成交率:${params[0].data.value}%`
    
            }
            return text;
        },
    },
    

    params[0].data里面返回的内容我们也可以自己定义,data里面return返回来的东西就是我们能在params[0].data里面取到。

    const {dataSource} = this.state;
     
    series: [
    	{
    	    showSymbol: false,
    	    name: '今日承兑率',
    	    type: 'line',
    	    color: ['#2E8B57'],
    	    legendHoverLink: false,
    	    data: dataSource.map(item => {            
    	        return {
    	            value: item.rate,
    	            count: item.tranCount,
    	            showAllSymbol: true,
    	            symbolSize: 0.1,
    	            time: item.time,
    	        };
    	    }),
    	},]
    
    展开全文
  • 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设置tooltip自定义样式,可以在tooltip添加 extraCssText属性,用此来定义自定义样式,参考代码如下

    tooltip: {
    show: true,
    formatter: function (param) {
    //console.log(param.value)
    return param.value[3]+":
    "+ param.value[2];
    },
    extraCssText:‘width:200px;height:60px;background:white;color:black’
    },

    展开全文
  • echarts图表自定义tooltip提示框样式

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

    回调函数以字符串拼接tooltip提示框样式

    在这里插入图片描述
    echarts option中对tooltip属性设置:

    tooltip: {
    	trigger: 'axis',	//tooltip触发条件 坐标轴
        axisPointer: {
    	    lineStyle: {
    	    	color: '#57617B'	//显示竖线颜色
    	    }
         },
         backgroundColor:'#05042C',	//tooltip背景色
         borderColor:'#2BEDF6',		//tooltip边框颜色
         borderWidth:2,
         formatter: function (param) {	//自定义tooltip内容 
         	var text = '';
            text += '<div style="display:flex;flex-direction:row;">'+
            			'<div style="background-color:#03D16D;height:auto;width:10px;margin-right:5px;"></div>'+
    	        		'<div style="display:flex;flex-direction:column;">'+
    	        			'<span>'+ param[0].value+'</span>'+
    	        			'<span>'+ param[0].axisValue+'</span>'
    	                '</div>'
    	            '</div>'
           return text;
        }
    },
    

    字符串模板

    折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)

    散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)

    地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)

    饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

    formatter:'{c}<br/>{b}'
    
    展开全文
  • <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> ...
  • ehcarts tooltip 自定义背景样式,带小三角。
  • 自定义tooltip.formatter
  • echarts tooltip内容样式布局自定义

    千次阅读 2019-10-08 10:58:23
    先看效果图 实现的主要代码 tooltip: { trigger: 'axis', padding:0, axisPointer: { type: 'line', lineStyle: { type: 'solid', width: 1, color: '#e0e2eb'...
  • ECHARTS3D 地球,解决TOOLTOP不显示问题.使用CSS自定义tooltip样式,完美显示。
  • Echarts自定义柱状图样式

    千次阅读 2019-08-28 16:07:16
    效果图: methods:{ set_equipmentChart() { let myChart = this.$echarts.init(document.getElementById('equipment')) let option1 = { tooltip: {}, grid:{ ...
  • echarts折线图的时候,hover数据点的样式是默认,但是有的时候显示的样式和自己理想的样式有区别的时候,我们就需要自己更改样式,来满足自己的需求,呢要怎么进行更改呢,官方文档说明可以在tooltip的formatter...
  • 实现在Echarts地图的tooltip提示框中绘制图表 最近遇到一个需求是需要在地图中,鼠标点击或者停留在地图中某一片区域时,该区域显示亮高和显示tooltip提示框信息,但是难点在于需要在tooltip提示框中再绘制一层图表...
  • 折线图颜色及拐点颜色 // 折线图 option 中 加入 color: ["red", "blue", "orange"], // 拐点颜色 series 数组中每项 ...自定义 tooltip tooltip: { trigger: "axis", formatter: function (s) { .
  • 今天在做一个功能时需要重新写一个Tooltip样式,但是发现只能使用字符串模板的格式 tooltip:{ trigger: 'axis', formatter:'<div style="padding:10px;fontSize:14px;">' + {b0} : {c0} + '</div>'...
  • echartstooltip中动态渲染自定义内容

    千次阅读 2020-03-26 02:52:34
    有这样一个需求:需要在图表最后那个hover或者click数据点时,能够在浮层(tooltip)中展示详细数据,并且这个浮层有规定样式,点击某个数据需要对应页面。也就是说浮层中的内容/样式/事件都需要自定义。 简单实例是...
  • 最近在用echarts开发页面可视化数据时,用到了UI提供的echarts 样式,需要自定义tooltip悬浮提示框的样式,最初在网上找了一些例子,都是你抄我的,我抄你的。 问题:如何自定义tooltip提示框中图标和文本样式? ...
  • 在用echarts做图时,label样式默认。在这里记录怎么修改label样式 echart1() { let Mychart1 = echarts.init(document.getElementById("chart1")); let option = { tooltip: { trigger: "item", }, legend: { ...
  • Echarts自定义提示内容

    2020-11-25 17:00:25
    echarts 默认带的提示框是显示系列名和value数值。...例如echarts 默认显示的样式为 想要展示的为 代码如下 var option = { title: { text: name }, tooltip: { show: true,//设置是否显示提示框 trigger:
  • 在使用Echarts的时候,经常会碰见需要自定义toolTip显示内容的需求, 常见的就是使用formatter(params) {}函数进行拼接,不清楚的可以看官网介绍 但是使用formater进行自定义显示后,会出现样式丢失的情况,就是...
  • } }, }, data () { return { option: { tooltip: { trigger: 'axis', padding: [8, 10, 8, 10], axisPointer: { type: 'line', lineStyle: { color: 'rgba(0, 0, 0, 0.65)' }, }, // 自定义提示框的内容 formatter:...

空空如也

空空如也

1 2 3
收藏数 56
精华内容 22
关键字:

echarts自定义tooltip样式