echarts 原始数据%号拼接、显示最后一位、虚线突出最后一位、一条线段不同颜色显示
echarts装载的数据：
var xAxisData = [10, 20, 30, 60, 50, 70, 80, 40, 90];
option = {
title: {
// text: '炎症占比变化曲线',
text: 'Whole lung lesion ratio curve',
subtext: 'Whole lung lesion ratio'
// subtext: '全肺占比'
},
/*legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},*/
grid: [{
bottom: '0',
left: 10,
containLabel: true
}],
tooltip: {
trigger: 'axis',
formatter: '{b0}
lesion ratio：{c0}%',// 原始数据%号拼接
/*axisPointer: {
type: 'cross'
}*/
},
/*toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},*/
xAxis: {
type: 'category',
boundaryGap: false,
data: ['6-1', '6-2', '6-3', '6-4', '6-5', '6-6', '6-7', '6-8', '6-9', '6-10', '6-11']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} %'
// formatter: '{value} '
},
axisPointer: {
snap: true
}
},
visualMap: {
show: false,
dimension: 0,
// pieces: [{
// gt: 0,
// lte: 80,
// color: '#FF8C00'
// }]
pieces: [{//一条线段不同颜色显示
gt: -1,
lte: 60,
color: 'red'
}, {
gt: 60,
color: 'green'
}]
},
series: [
{
// symbol: 'none',
// lineStyle: {
// // color: 'green',
// width: 5
// },
// name: '占比',
name: ' lesion ratio',
type: 'line',
smooth: true,
data: [10, 20, 30, 60, 50, 70, 80, 40, 90],
label: {
normal: {
show: true,//显示
position: 'top'
}
},
markLine: {
symbol: ['none', 'none'],
label: {show: false},
data: [//虚线突出最后一位
{xAxis: 8},
{yAxis: 90}
],
lineStyle: {
color: ['#434343'],
width: 1,
}
},
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
textStyle: {
fontSize: 12,
color: "#333",
align:'end',
},
formatter: (params) => {//显示最后一位
if (xAxisData.length - 1 == params.dataIndex) {
return params.value+'%' + '\n' + params.name;
} else {
return ""
}
},
},
}
}
/*markArea: {
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
}*/
}
]
};
完整代码：
先npm安装echarts
npm install echarts --savemain.js：
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;vue3.X正确安装echarts后，在自己组件中直接使用
async checkHF() {
const _this = this;
var container = document.getElementById('hf-chart');
const myChart = this.$echarts.init(container);
const option = {
title: {
// text: '炎症占比变化曲线',
text: 'Whole lung lesion ratio curve',
subtext: 'Whole lung lesion ratio'
// subtext: '全肺占比'
},
/*legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},*/
grid: [{
bottom: '0',
left: 10,
containLabel: true
}],
tooltip: {
trigger: 'axis',
formatter: '{b0}
lesion ratio：{c0}%',
/*axisPointer: {
type: 'cross'
}*/
},
/*toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},*/
xAxis: {
type: 'category',
boundaryGap: false,
// data: ['6-1', '6-2', '6-3', '6-4', '6-5', '6-6', '6-7', '6-8', '6-9', '6-10', '6-11']
data: _this.xAxisData,
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} %'
// formatter: '{value} '
},
axisPointer: {
snap: true
}
},
visualMap: {
show: false,
dimension: 0,
// pieces: [{
// gt: 0,
// lte: 80,
// color: '#FF8C00'
// }]
pieces: [{
gt: -1,
lte: _this.nodeSplit,
color: 'red'
}, {
gt: _this.nodeSplit,
color: 'green'
}]
},
series: [
{
// symbol: 'none',
// lineStyle: {
// // color: 'green',
// width: 5
// },
// name: '占比',
name: ' lesion ratio',
type: 'line',
smooth: true,
// data: [10, 20, 30, 60, 50, 70, 80, 40, 90],
data: _this.seriesData,
label: {
normal: {
show: true,//显示
position: 'top'
}
},
markLine: {
symbol: ['none', 'none'],
label: {show: false},
data: [
// {xAxis: _this.seriesData.length - 1},
{yAxis: _this.seriesData[_this.seriesData.length - 1]}
],
lineStyle: {
color: ['#434343'],
width: 1,
}
},
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
textStyle: {
fontSize: 12,
color: "#333",
align:'end',
},
formatter: (params) => {
if (_this.seriesData.length - 1 == params.dataIndex) {
// console.log(params.value + '' + params.name)
return params.value+'%' + '\n' + params.name;
} else {
return ""
}
},
},
}
}
/*markArea: {
data: [ [{
name: '早高峰',
xAxis: '07:30'
}, {
xAxis: '10:00'
}], [{
name: '晚高峰',
xAxis: '17:30'
}, {
xAxis: '21:15'
}] ]
}*/
}
]
};
myChart.setOption(option)
},