vue使用echart 鼠标悬浮时显示的标题

心已赠人 2021-11-10 16:58 959阅读 0赞

1.首先我们要导入echart  
![在这里插入图片描述][20190803162238263.png]  
2.绑定js代码 div的id绑定  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQzOTQ5NA_size_16_color_FFFFFF_t_70]  
并在mouted内  
![在这里插入图片描述][20190803162517940.png]  
3.下面就编写自己所需要的图（本例是柱形图）

var that = this
 this.userGrowth.setOption ({
 title: {
 },
 tooltip: {
 // trigger: 'axis'
 trigger: 'axis',
 formatter: function(params){
 var res='<div>'+'</div>'
 res+=''+''
 res+=''+ timeList[params[0].dataIndex] +''
 res+=''+that.$t('T_The_ticket_number')+':'+ dataList1[params[0].dataIndex] + that.$t('T_single') +''
 res+=''+that.$t('T_Recount_the_number')+':'+ dataList2[params[0].dataIndex] + that.$t('T_single') +''
 return res;
 }
 
 },
 legend: {
 data:[this.$t('T_The_ticket_number'),this.$t('T_Recount_the_number')],
 
 },
 xAxis: {
 type: 'category',
 data: timeList
 },
 yAxis: {
 type: 'value',
 name:this.$t('T_number')+':'+this.$t('T_single'),
 },
 
 series: [{
 name: this.$t('T_The_ticket_number'),
 // type: 'line',
 type: 'bar',
 stack: '购票数量',
 smooth: true,
 data: dataList1,
 itemStyle : { normal: {label : {show: this.showData}}}
 },
 {
 name: this.$t('T_Recount_the_number'),
 // type: 'line',
 type: 'bar',
 stack: '验票数量',
 smooth: true,
 data: dataList2,
 itemStyle : { normal: {label : {show: this.showData}}}
 },
 
 ]
 });
 },

formatter所对应的的是鼠标悬浮时的显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQzOTQ5NA_size_16_color_FFFFFF_t_70 1]

[20190803162238263.png]: /images/20211109/3c2f674b32d84ab9a2e8794bb34fe29a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQzOTQ5NA_size_16_color_FFFFFF_t_70]: /images/20211109/711608f52af74b9682c99bd60d58267f.png
[20190803162517940.png]: /images/20211109/fafb131d09074d5e8e24c2532265689d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQzOTQ5NA_size_16_color_FFFFFF_t_70 1]: /images/20211109/08ae012e3a134f658fa07daa95a654f5.png