echarts中tooltip默认展示的样式
在echarts中tooltip默认展示的样式是这样的：
X轴的name + ':' + value 如下图
tooltip：读音是/tu l ti p/ 工具提示 兄弟们 够意思嘛 发音都备注了
自定义tooltip样式
有些时候，我们想自定义tooltip的样式，比如：
在名称前新增上其他描述，在数值的后面新增上单位。
这个时候我们就需要使用 formatter。
formatter：支持字符串模板和回调函数两种形式
下面我们来看一下回调函数这一种
自定义tooltip样式formatter的回调函数
<template>
<div>
<div class="box" id="box"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
myChart: null,
xAxisData :['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
seriesData: [
{
data: [1150, 200, 300, 356, 105, 200, 345],
type: 'line'
}
]
}
},
mounted(){
this.myChart = echarts.init(document.getElementById('box'));
this.drawCharts()
},
methods:{
drawCharts(xAxisData, seriesData){
if(!this.myChart){
this.myChart = echarts.init(document.getElementById('box'));
}
// 指定图表的配置项和数据
let option = {
xAxis: {
type: 'category',
data: this.xAxisData
},
yAxis: {
type: 'value'
},
tooltip: {
trigger:'axis',
formatter (res) {
if(res&& res.length){
let name, value;
res.forEach(element => {
name = element.name
value = element.value
});
return '张三'+ name +'的收入:' + value +'元'
}else{
return res
}
}
},
series: this.seriesData
};
// 使用刚指定的配置项和数据显示图表。
this.myChart.setOption(option);
}
}
}
</script>
<style lang="scss" scoped>
.box {
width: 800px;
height: 400px;
}
</style>
发现一个问题
从这张图片中，我们发现鼠标滑到附近的某个点，就能看到tooltip的样式。
它是通过哪一个属性来实现的呢？
下面我们的主角开始登场了。
trigger:'axis'
tooltip下的trigger属性
trigger是触发类型,下面是它的值
trigger:'axis' | 'item' | 'none'
axis:坐标轴触发，主要在柱状图，折线图等,使用类目轴的图表中使用。
用户可以通过点击或悬停在坐标轴上的某个位置,来触发显示该位置附近的数据项信息。
我们就可以使用trigger:'axis'来刚刚我们发现的问题
item:数据项触发，主要在饼图，雷达图，散点图等,无类目轴的图表中使用。
none：什么都不触发。
【特别提醒】 当trigger:axis时,formatter的参数类型由对象变成了一个数组。
我们怎么来区分是否是类目轴呢？
在ECharts中，可以通过xAxis或配置项的type字段来判断当前图表是否是类目轴。
如果xAxis的type设置为'category'，则表明该坐标轴是类目轴。
xAxis: {
type: 'category', // 类目轴
data: this.xAxisData
}
鼠标放上去就能看附近某个点tooltip的样式
tooltip: {
// 触发方式
trigger:'axis',
formatter (res) {
if(res&& res.length){
let name, value;
res.forEach(element => {
name = element.name
value = element.value
});
return '张三'+ name +'的收入:' + value +'元'
}else{
return res
}
}
}
如果多条线tooltip还能正常展示吗？
...其他代码不变...
export default {
data() {
return {
myChart: null,
xAxisData :['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
seriesData: [
{
data: [1150, 200, 300, 356, 105, 200, 345],
type: 'line'
},
{
data: [10, 290, 10, 36, 15, 20, 315],
type: 'line'
}
]
}
},
...其他代码不变...
}
</script>
如何处理只能显示出1条线？
tooltip: {
trigger: 'axis',
formatter: (c) => {
let str = ''
let temp = {
name: '',// X轴的名称
marker: '', // 颜色
valueData: '', // 数值
setWidthSpan: '',
}
c.forEach((item) => {
console.log('item', item)
temp.marker = item.marker
temp.name = item.name
temp.valueData = item.value
temp.setWidthSpan = '<span style="display:inline-block;width:10px;height:10px;"></span>'
str += temp.marker + temp.setWidthSpan + temp.valueData + '元' + '<br />'
})
return temp.name + '的收入与支出' + '<br />' + str
},
},
tooltip中自定义组件
params的回调函数：支持返回 HTML 字符串或者创建的 DOM 实例。
在echarts中，仅仅支持HTML字符串。
但是我们可以通过innerHTML将DOM实例变为字符串。
下面我来举个例子：
tooltip:{
trigger:'axis',
formatter (res) {
return `
<div>2024年张三的支出与收入</div>
<div>我是字符串模板模板哈哈</div>
</div>`;
},
},
我们发现使用模板字符串拼接是非常麻烦的。
我们如果使用veu组件，将会非常的简单，也方便我们后期的维护。
如何将vue组件转化为HTML字符串或者DOM实例。
我记得我们render函数和h函数吗？它就可以做到。
render函数和h函数的简单使用
render 函数接受一个 createElement(h) 函数作为参数，并返回一个虚拟 DOM 节点。
createElement 函数用于创建 Vue 的虚拟节点（VNode）。
render(h){
return h('div',{
class:{ // 第二个参数
'is-red': this.isRed
}
},
//第三个参数
[h('p','这是一个render')]
);
}
h函数的三个参数用法(vue2)
第一个参数是必须的。
类型:{String | Object | Function}
一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
是要渲染的html标签。
第一个参数div 是表示创建一个div的元素
第二个参数是可选的。
类型:{Object} 主要是当前html中的各种属性。
如attrs，class，style等
在开发时。建议传，实在没有传的时候，传入 null
第三个参数可选的。
类型：{String | Array | Object} children
虚拟子节点(vnodes),当前html标签的元素。
参考地址：www.cnblogs.com/weichen913/…
tooltip自定义内容使用Vue组件渲染
<!-- toolTipCom.vue -->
<template>
<div>
<div v-for="(item,index) in propsData">
{{ item.data.type==='z' ? '支出：' : '收入：' }} {{ item.data.value }} (元)
</div>
<div>下面你还可以自定义其他详情信息</div>
</div>
</template>
<script>
export default {
props: {
propsData: {
type: Array,
default: ()=>{
return []
}
}
}
}
</script>
import toolTipCom from '@/components/toolTipCom.vue'
import Vue from 'vue'
...其他代码保持不变...
data() {
return {
myChart: null,
xAxisData :['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
// 现在是多条线了
seriesData: [
{
data: [
{value:123, type:'z'},
{value:13, type:'z'},
{value:123, type:'z'},
{value:143, type:'z'},
{value:163, type:'z'},
{value:173, type:'z'},
{value:193, type:'z'}
],
type: 'line',
},
{
data: [
{value:123, type:'s'},
{value:123, type:'s'},
{value:1223, type:'s'},
{value:1433, type:'s'},
{value:1623, type:'s'},
{value:1733, type:'s'},
{value:193, type:'s'}
],
type: 'line',
}
]
}
},
...其他代码保持不变...
tooltip:{
trigger:'axis',
formatter (res) {
console.log(res)
const div = document.createElement('div');
let mapTooltip = new Vue({render: (h) => h( toolTipCom, { props: { propsData: res } }) });
console.log('mapTooltip', mapTooltip)
// 将vue(mapTooltip)组件实例挂载到创建的这个div元素上。
mapTooltip.$mount(div);
// 从挂载的 mapTooltip实例上通过$el属性中获取渲染后的HTML字符串。
return mapTooltip.$el.innerHTML;
}
},
自定义参数type:'s'可以在formatter函数中的res参数中获取到
这个 type:'s' 是在data中自定义的属性。
我们在tooltip中的formatter函数中res参数中是可以获取到的。
通过下面的图我们就一目了然了：
尾声
如果觉得我写的不错的话，请给我一点一个赞，收藏，写下你的想法。
感谢！
各位掘友， 周六啦，加班的掘友记得好好摸鱼。休息的掘友，一起打王者呀
