echarts 柱状图鼠标滑过显示图标+数字每三位打千分号+单位

傷城~ 2022-11-02 15:28 649阅读 0赞

### echarts 柱状图 鼠标悬浮显示 图标+数字每三位打千分号+单位 ###

*   *  千分号+单位
     *  全部代码
     *  示例代码
     *  柱状图鼠标滑过显示单位

## 千分号+单位 ##

1.图标：params\[i\].marker  
2.数字每三位打千分号：params\[i\].value.toLocaleString()  
3.加单位：如下

formatter:function(params) 
 { 
 var relVal = params[0].name; 
 for (var i = 0, l = params.length; i < l; i++) { 
 relVal +=' ' + params[i].marker+params[i].seriesName + ' : ' + params[i].value.toLocaleString()+"K"; 
 } 
 return relVal; 
 } 
 },

## 全部代码 ##

barLine:function(){ 
 this.chartBars=this.$echarts.init(document.getElementById("bar"));
 this.chartBars.setOption({ 
 tooltip: { 
 trigger: 'axis',
 axisPointer: { 
 type: 'cross',
 crossStyle: { 
 color: '#999'
 }
 },
 formatter:function(params) 
 { 
 var relVal = params[0].name; 
 for (var i = 0, l = params.length; i < l; i++) { 
 relVal +=' ' + params[i].marker+params[i].seriesName + ' : ' + params[i].value.toLocaleString()+"K"; 
 } 
 return relVal; 
 } 
 },
 grid: { 
 left: '3%',
 right: '3%',
 bottom: '0%',
 top:'10%',
 containLabel: true
 },
 xAxis: [
 { 
 type: 'category',
 data: this.dateTen,
 axisPointer: { 
 type: 'shadow'
 }
 }
 ],
 yAxis: 
 { 
 type: 'value',
 splitLine: { show: false}
 
 },
 series: [
 { 
 name:'账单金额',
 type:'bar',
 data:this.recentOctoberBill,
 color: ['#87CEFA'],
 barWidth: '65%',
 label: { 
 normal: { 
 color:'#000',
 show: true,
 position: 'inside',
 "formatter": function(a){ return a.value.toLocaleString()+'k'}
 }
 }
 },
 { 
 name:'账单金额',
 type:'line',
 data:this.recentOctoberBill,
 itemStyle:{ 
 normal:{ 
 lineStyle:{ 
 type:'dotted' //'dotted'虚线 'solid'实线
 }
 }
 }, 
 label: { 
 normal: { 
 color:'#000',
 show: true,
 position: 'top',
 "formatter": function(a){ return a.value.toLocaleString()+'k'}
 }
 }
 }
 ]
 }) 
 },

## 示例代码 ##

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]

## 柱状图鼠标滑过显示单位 ##

关键代码

tooltip: { 
 trigger: 'axis',
 axisPointer: { // 坐标轴指示器，坐标轴触发有效
 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
 },
 formatter: function (params) { 
 console.log('params', params);
 return params[0].name + " " + params[0].seriesName + ":" + params[0].value + '单';
 },
 },

鼠标滑过效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 1]

拓展属性

tooltip : { 
 trigger: 'axis',
 formatter:function(params){ 
 return params[0].name+" "+params[0].seriesName+":"+params[0].data+" "+
 params[1].seriesName+":"+params[1].data+"%";
 },
 textStyle:{ 
 　　align:'left'
 　　　},
 },

打印params

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 2]  
params 对应的变量和值

(1) […]
 
 0: { …}
 
 "$vars": Array(3) [ "seriesName", "name", "value" ]
 
 axisDim: "x"
 
 axisId: "\u0000series\u00000\u00000"
 
 axisIndex: 0
 
 axisType: "xAxis.category"
 
 axisValue: "优酷"
 
 axisValueLabel: "优酷"
 
 borderColor: undefined
 
 color: "#649D0E"
 
 componentIndex: 0
 
 componentSubType: "bar"
 
 componentType: "series"
 
 data: Object { value: "2", itemStyle: { …} }
 
 dataIndex: 0
 
 dataType: undefined
 
 dimensionNames: Array [ "x", "y" ]
 
 encode: Object { x: (1) […], y: (1) […] }
 
 marker: ""
 
 name: "优酷"
 
 seriesId: "\u0000订单来源分析\u00000"
 
 seriesIndex: 0
 
 seriesName: "订单来源分析"
 
 seriesType: "bar"
 
 value: "2"
 
 <prototype>: Object { … }
 
 length: 1
 
 <prototype>: Array []
 flow:798:29

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20221024/27c5e906ce1149438d4abc49cf8f14fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 1]: /images/20221024/918b65ec0a5040179a768bc7dba38809.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70 2]: /images/20221024/df75a671c88440c3b85f74afa834c7cb.png