极客观点
项目管理
HarmonyOS
echarts中 如何自定义提示框呢？ 现在我的文字要放入这个提示框内
我想把1放入2中 如何实现呢？ 我的曲线是这样生成的
Echarts(item_id){
console.log(this.defaultID);
item_id=item_id || this.defaultID;
const _this=this;
const log=console.log;
let myChart =this.$echarts.init(document.getElementById('main'));
var optionFH = {
axisLine: {
show: false
},
// 控制网格线是否显示
splitLine: {
show: true
},
// 去除y轴上的刻度线
axisTick: {
show: false
},
title: {
left: 10,
show: true,
text: '',
textStyle: {
color: 'white',
fontSize: 16,
fontFamily: "微软雅黑",
}
},
tooltip: {
trigger: 'axis',
position:function(p,a){ //其中p为当前鼠标的位置 a为当前点击所有的属性和属性值
_this.obj.Actualvalue=a[0].value;
if(p[0]>250){
return [p[0] - 100, p[1] - 10];
}
if(p[0]<250){
return [p[0] + 10, p[1] - 10];
}
}
},
color: ["#02aac2"], //设置图例的颜色必须用数组格式
legend: {
orient: 'horizontal',
right: 25,
top: 0,
data: ['实时巡检'],
itemWidth: 22, //图例宽度圆点
itemHeight: 15,
background: "#149f79",
textStyle:{
color:"white",//图例开启时的颜色。
fontSize:13,//图标上方点击按钮的文字大小
}
},
calculable: true,
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: { //给x轴添加分割线
show: true,
lineStyle: {
color: '#35363B',
width: 1
}
},
axisLabel: {
show: true,
interval: 'auto',
textStyle: {
// color: '#35363B'
color: 'white'//字体颜色
}
//interval: Int //纵坐标的数据全部显示
},
axisLine:{
show: true,
lineStyle: {
// color: 'red'//x轴的颜色
color: 'white'//x轴的颜色
}
},
axisTick: {
show: false //是否显示坐标轴的刻度
},
data: [0]
//data: arrOne_FH
},
grid: { // 控制图的大小，调整下面这些值就可以，
x: 50,
top:20,//-----------------------------------------------------------------------------------
// width:300,//整体的宽度
// x2: 100,
// y2: 80,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
yAxis: {
type: 'value',
splitLine: { //给x轴添加分割线
show: true,
lineStyle: {
color: '#35363B',//里面线的颜色
width: 1
}
},
// name: "标单(元/吨)",
nameTextStyle: {
fontSize: 15,
color: '#a9a9a9'
},
axisLabel: {
show: true,
interval: 'auto',
inside: false,
// rotate: 90,
// margin: 8,
formatter: null,
showMinLabel: null,
showMaxLabel: null,
},
nameLocation: "end", //坐标轴名字的位置
// nameRotate:90,
axisLabel: { //坐标轴字体的颜色
show: true,
textStyle: {
// color: '#35363B'
color: 'white'//字体颜色
}
},
axisLine: { //是否显示y轴
show: true,
lineStyle: {
// color: 'red'//y轴的颜色
color: 'white'//y轴的颜色
}
},
axisTick: {
show: false //是否显示坐标轴的刻度
},
// max: function(value) {
// if(value.max<30){
// return Math.floor(value.max) + 5;
// }else if(value.max>=30&&value.max<=100){
// return Math.floor(value.max) + 10;
// }else if(value.max>100&&value.max<2000){
// return Math.floor(value.max) + 50;
// }else if(value.max>=2000){
// return Math.floor(value.max) + 100;
// }
// }
},
series: [
{
name: '实时巡检',//1号负荷
type: 'line',
symbol: 'none', //去除折线点
yAxisIndex: 0,
data:0,
itemStyle: {
normal: { //折线点的颜色，
color: function(params) {
var colorList = ["yellow"];
return colorList[params.dataIndex];
}
},
},
itemStyle: { //跟折线添加颜色
normal: {
lineStyle: {
color: "#02aac2"
}
},
},
}
]
};
myChart.setOption(optionFH);
if(item_id != null){ //如果不等于空
axios.get(`/gaoantun/api/task/getItemHistoryDataListByItemId/${item_id}`).then((response)=>{
log(response.data.data);
console.log(response.data.data);
var arrOne_FH = [];
var arrOne_FH_val = [];
let Onezhi;
for(var i in response.data.data){
var FHOne = response.data.data[i].recordTime.slice(11, 16);//x轴时间
var FHOne_val =response.data.data[i].value;
log(FHOne_val == null)
if(FHOne_val == null){//如果是null值说明是文本框为空
FHOne_val=response.data.data[i].comment;
// FHOne_val = "人员不足";
}
arrOne_FH.push(FHOne);
arrOne_FH_val.push(FHOne_val);
}
var resv = arrOne_FH.reverse();
arrOne_FH_val.reverse();
// optionFH.legend.data = [Onezhi]; //设置右上角的文字
optionFH.xAxis.data = resv;
// optionFH.series[0].name =Onezhi;
optionFH.series[0].data = arrOne_FH_val;
myChart.setOption(optionFH,true);
window.onresize = function () {
//重置容器高宽
myChart.resize();
};
})
}
if (optionFH.series[0].data.length==0) {
optionFH.yAxis.min="0";
optionFH.yAxis.max="3";
}
},请各位帮助
html5
主要用到
formatter实现自定义下面是我写过的一个例子，
formatter可以自定义返回内容，如下，把你的dom结构拼出来就可以了，相应的参数你可以打印par出来看一下