echarts 添加百分号

效果图如下：

根据后端的数据来源，前端渲染页面时，需要前端自行给页面添加 % 。根据上图效果，可以看到有两个地方需要添加 % 的。一个是是悬浮框提示信息里面，另一个地方柱状图上方需要添加 %。

首先我们给悬浮添加 %，需要操作 tooltip 下的 format ，代码如下：

tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow" // 默认为直线，可选为：'line' | 'shadow'},formatter:function(params) {var str = params[0].name + '<br>'for(let item of params) {str += item.seriesName + ' : ' + item.value + '%<br>'}return str;}
},

给柱状图上面添加 %，则需要给 series 中 label 添加显示相关信息，代码如下：

series: [{name: "上月违法率",type: "bar",data: [],z: 10,label: {normal: {show: true,formatter:function(params){ //标签内容return  params.value+'%'},position: 'top',fontSize: 10,color:'#000'}},},...
]

我们可以设置悬浮提示框的位置，代码如下：

tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow" // 默认为直线，可选为：'line' | 'shadow'},position: function(point, params, dom, rect, size) {// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下// 提示框位置var x = 0; // x坐标位置var y = 0; // y坐标位置// 当前鼠标位置var pointX = point[0];var pointY = point[1];// 外层div大小// var viewWidth = size.viewSize[0];// var viewHeight = size.viewSize[1];// 提示框大小var boxWidth = size.contentSize[0];var boxHeight = size.contentSize[1];// boxWidth > pointX 说明鼠标左边放不下提示框if(boxWidth > pointX) {x = 5;} else { // 左边放的下x = pointX - boxWidth;}// boxHeight > pointY 说明鼠标上边放不下提示框if(boxHeight > pointY) {y = 5;} else { // 上边放得下y = pointY - boxHeight;}return [x, y];}
},

echarts 添加百分号相关推荐

echarts 添加百分号%
效果如下: 这里写图片描述 echart 3.0写法: option = { //提示框组件,鼠标移动上去显示的提示内容 tooltip: { trigger: 'ite ...
java中点击按钮出现echarts图表_echarts 显示下载按钮，echarts 自定义按钮，echarts 添加按钮...
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
echarts添加背景图
echarts添加背景图来源:https://www.liuyjuan.com/295.html 1)简单的方法直接给到外层的div元素上 /*比如说这段css样式*/ .TheStatistic ...
给echarts添加筛选时间控件时，控件不显示，并设置数据库无数据时echarts模块显示暂无数据
给echarts模块添加时间控件时,控件无效,经检查发现,控件被画布遮盖了,需要用一个form标签包括时间控件,否则时间控件不生效.另外,如果echarts从后台获取到的数据为空,需要提示暂无信息.这 ...
echarts添加地图散点
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
echarts 添加滚动轴
需求:解决x轴数据过多导致页面拥挤解决:添加滚动轴 dataZoom dataZoom:[{ //y轴固定,让内容滚动type: 'slider',xAxisIndex: [0],show:true ...
echarts添加背景图片,背景色及水印
2022-1-9学习记录添加背景图遇到的问题: 添加本地图片为背景图片时不显示图片解决: 在templates同级目录下创建一个static目录,将图片文件放置此文件夹内即可法一: 在div标 ...
echarts添加辅助线markLine
var chartDom = document.getElementById("columnBar");var myChart = echarts.init(chartDom);v ...
Echarts 添加横轴伸缩功能，并解决数据量过大情况下伸缩看起来错位问题，以及横坐标设置不同颜色，滑动时候文字颜色样式错位问题
原有基础横轴伸缩功能关键代码 dataZoom: [{type: 'inside',start: 0,end: 10},{start: 0,end: 10}], 完整代码,可以放到官方DEMO测试 ...

echarts 添加百分号

echarts 添加百分号相关推荐

最新文章

热门文章