echarts legend初始化不显示 数据为空清除echarts数据 更改提示框的提示文字
legend.name 与 series.name 设置不一致所导致
另外要引入legend模块,按需引入相关模块
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
想要知道echarts中回调函数的格式,就可以使用JSON.stringify(参数名)的形式来具体看该参数到底是数组还是对象,看它的结构有利于明白自己想要获取哪些值,这是一个很好的办法。
tooltip : { // trigger: 'axis', //axis 显示全部 trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, showDelay : 0, //显示延迟 // show:false //trigger为item的时候返回 // formatter:function(params){ // console.log(JSON.stringify(params)) // return params.name+'<br>'+params.seriesName+':'+params.value // }, //trigger为axis的时候返回 formatter:function(params){ console.log(JSON.stringify(params)) var str=''; params.forEach((item,index)=>{ if(item.value>0){ str+=' '+item.seriesName+':'+item.value+'</br>' } }) return params[0].name+'</br>'+str } }, legend: { data:legendArray, show:true, // orient: 'vertical', // left: 'left', // data: ['A', 'B'], // formatter: function(name) { // console.log(name); // return name ; // // if(name === 'A') { // // return name + ":"+"350(数值)"; // // } // } }, grid: { left: '3%', right: '4%', bottom: '10%', top:'10%', containLabel: true }, xAxis : [ { type : 'category', data : xArray, "axisLabel":{ interval: 0, rotate:45, //这里是竖着显示文字 // formatter:function(value){ // return value.split("").join("\n"); // } }, } ], yAxis : [ {type : 'value' } ], series:newSeries, // series : [ // { // name:'A', // type:'bar', // // datasetIndex: 0, // stack: '广告', // data:[120,0,0, 134, 90, 230, 210,10], // itemStyle:{ // normal:{ // color:colorsList[index], // label:{ // show:true, // // position:'inside', // position:'insideBottom', // formatter:function(param){ // if(param.value>0){ // return param.value // }else{ // return '' // } // }, // textStyle:{fontSize:18} // } // } // }, // { // name:'B', // type:'bar', // stack: '广告', // // datasetIndex: 0, // data:[220,0, 191, 234, 290, 330, 310,20] // }, // { // name:'A', // type:'bar', // // datasetIndex: 0, // stack: '广告', // data:[0, 232, 0, 154, 190, 330, 410,40] // }, // { // name:'D', // type:'bar', // // datasetIndex: 0, // stack: '广告', // data:[0, 232, 201, 154, 190, 330, 410,80] // }, // ],
数据为空清除echarts数据
mychart.clear()
标签:
修改提示文字 清除上次空数据
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通