使用Echart绘制小程序图表碰到的一个问题以及解决方式
问题描述:
开发的小程序中的图表echart中X轴是项目数值,Y轴是日期;我要实现点击相对应的项目的时候,显示的提示(tooltip)中插入一个项目名称,不同的项目,名称不同。这个项目名称,是没有在X轴或Y轴分类出现的,是完全独立的字段,不知道如何实现?
设计图如下:
通过实验证明,无论是X还是Y轴,显示的内容都是可以用formatter自定义的,所以可以先把独立的字段对应的数组一项一项和X或Y对应的数组合并成一个字符串数组,然后使用的时候根据情况剪切。
为了看得比较轻松直观,分三块关键代码:
关键代码(一)
_fetchData (num) {
request({
method: 'GET',
url: `/api/douyinLiveMonitorTask/live/analyze/${this.props.uid}/${num}`
}).then((resp)=>{
let yData = []
let xData = []
for (var i =0; i < resp.data.salesAmountList.length; i++) {
yData.splice(0, 0, resp.data.salesAmountList[i].liveDate + resp.data.salesAmountList[i].liveTitle)
xData.splice(0, 0, resp.data.salesAmountList[i].salesAmount)
}
this.setState({
liveData: resp.data,
xData: xData,
yData: yData
},() => this.refresh())
})
}
关键代码(二)
yAxis: [
{
type: 'category',
splitLine: {
show: false
},
axisTick: {
show: false,
alignWithLabel: true
},
axisLine: {
show: false
},
axisLabel: {
formatter: (value) => {
value = value.slice(0, 10)
return value;
},
},
data: this.state.yData
}
],
关键代码(三)
var option = {
color: ['#3398DB'],
tooltip: {
show: true,
trigger: 'axis',
formatter: function (params) {
console.log(params)
if (params[0].data > 9999) {
params[0].data = (params[0].data/10000).toFixed(2) + 'w'
return params[0].name.slice(0, 10) + '\r\n' + params[0].name.slice(10) + '\r\n' + params[0].data
} else {
return params[0].name.slice(0, 10) + '\r\n' + params[0].name.slice(10) + '\r\n' + params[0].data
}
}
},
总结一下就是,向这种网上都找不到,文档里又写的不是很清楚的问题,就应该多思考,多去尝试,不要觉得不可能实现,不试怎么知道呢?实践出真知O(∩_∩)O哈哈~
文章已转移到个人公众号,有帮到你的话,用发财的小手关注一下我的公众号呗~