Echarts组件 tooltip提示formatter函数

图表提示框的内容修改和HTML样式解决

setChart(value) {let myChart = echarts.init(document.getElementById("fee"));let option = {title: {text: ""},tooltip: {trigger:'axis',formatter: function(params){return "<div style='padding:5px 10px'>"+ params[0].name +"<br>" +params[0].marker +  params[0].seriesName +": "+ params[0].data  + '分钟'+'<br>' + params[1].marker+  params[1].seriesName +": "+ params[1].data + '分钟'+"</div>"}},legend: {data: ["费用统计"]},grid: {top: '15%',left: "1%",right: "1%",bottom: "10%",containLabel: true},xAxis: {data: this.statDate,nameTextStyle: {color: "#404040",fontWeight: "400",fontFamily: "SourceHanSansCN-Normal",fontSize: 12},axisLabel: {margin: 9,color: "#404040",fontWeight: "400",fontFamily: "SourceHanSansCN-Normal",fontSize: 12},splitArea: {// interval:0,}},yAxis: {type: "value",name:'分钟',splitLine:{show:true,lineStyle:{type:'dashed'}}},series: [{name: "通话时长",type: "line",itemStyle: {color: "#77C450"},areaStyle:{color:{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#77C450' // 0% 处的颜色}, {offset: 1, color: '#FFFFFF' // 100% 处的颜色}],global: false}},data: this.callLength,},{name: "录音时长",type: "line",itemStyle: {color: "#4C84FF"},areaStyle:{color:{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#4C84FF' }, {offset: 1, color: '#FFFFFF' }],global: false }},data: this.recordingLength,}]};myChart.setOption(option);},

Echarts组件 tooltip提示formatter函数相关推荐

html表格怎样传入数据类型,Echarts图表中pie类型tooltip中formatter函数传递的参数从哪里来？...
最近参与一个项目遇到一个问题,这个tooltip提示框信息怎么配?找了好久最终配置成功,分享到这里大家共享一下,能节省不少时间首先可以看一下系统介绍的文章,里面知识点比较多,也有注释,讲的很全,推荐 ...
uniapp App端 echarts 设置tooltip的formatter不生效问题及解决办法
一.开发需求在App端实现,图表的tooltip提示框中展示数值的单位.如下图: 二.遇到的问题 1.首先想到的是对tooltip进行相关的设置,然后试了两种方式,都没有效果. (1)设置toolt ...
echarts 地图tooltip提示框超出浏览器窗口怎么隐藏？
echarts tooltip提示框超出浏览器窗口怎么隐藏? 在使用echarts做图时,发现tooltip默认会超出浏览器窗口外,刚开始想做边境检测,试着写了一些代码发现太麻烦了,需要上下左右做多次 ...
echarts中tooltip提示框位置控制
关键代码: position: function(point, params, dom, rect, size) {//其中point为当前鼠标的位置,size中有两个属性:viewSize和cont ...
echarts图表 tooltip提示框，xAxis X轴，formatter自定义
做项目时根据设计图用echarts来进行展现数据统计设计图需要实现效果根据设计图进行实现的代码.代码里也进行处理了双y轴不重叠问题 <template><chart-item : ...
ECharts 提示框组件Tooltip属性大全（包含文本注释）
tooltip: { // 提示框组件:可以设置在全局(tooltip),可以设置在坐标系中(grid.tooltip.polar.tooltip.single.tooltip),可以设置在系列中(s ...
Echarts数据可视化tooltip提示框，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
echarts隐藏掉一条曲线，并且tooltip提示框中不显示
echarts隐藏掉一条曲线,并且tooltip提示框中不显示两步走: 1.隐藏掉一条曲线 series: [{name: '...',type: 'line',symbolSize: 0, // ...
在echarts中自定义提示框内容
1.期望效果以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...

Echarts组件 tooltip提示formatter函数

Echarts组件 tooltip提示formatter函数相关推荐

最新文章

热门文章