本文主要是介绍echarts ( 折线图,柱状图 ) 和 饼图 tooltip 文字样式修改,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
1.折线图柱状图
tooltip: {confine: true,//是否将 tooltip 框限制在图表的区域内。trigger: 'axis',backgroundColor: '#0085ff',extraCssText: 'background: linear-gradient(to top,#ffffff,#eff1fe);padding:12px 20px', //渐变颜色formatter: function (params) {// params 是一个数组,数组中包含每个系列的数据信息let result = params[0].name;params.forEach(function (item) {result += "<br/>";// item 是每一个系列的数据const seriesName = item.seriesName; // 系列名称const value = item.value; // 数据值result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+item.color+'" ></span>'; result += `${seriesName}: ${value+'33'}<br/>`;});return result;},textStyle: {color: 'black',fontSize: '14',},axisPointer: {type: 'shadow',shadowStyle: {color: 'rgba(24, 144, 255, 0.12)',}}// formatter: '{a}\n{c}' + this.unitName,},
2.饼图
tooltip: {confine: true,//是否将 tooltip 框限制在图表的区域内。trigger: 'item',backgroundColor: '#86a8ff', //下面小三角颜色extraCssText: 'background: linear-gradient(to top, #ffffff,#eff1fe);padding:12px 20px', //渐变颜色formatter: function (params) {// params 是一个数组,数组中包含每个系列的数据信息let result = params.name;result += "<br/>";// const seriesName = item.seriesName; // 系列名称const value = params.value; // 数据值result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params.color+'" ></span>'; // result += `${seriesName}: ${value+'33'}<br/>`;result += `${value}<br/>`;return result;},textStyle: {color: 'black',fontSize: '14',},// formatter: '{a}\n{c}' + this.unitName,},
这篇关于echarts ( 折线图,柱状图 ) 和 饼图 tooltip 文字样式修改的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!