本文主要是介绍echarts设置折现图拐点,只需要特定的值才显示拐点(比如:最大值、最小值),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、需求效果
echarts折线图,只需要显示最大值和最小值的拐点。
红色圆圈标红的是拐点。现在我只想要最大值、最小值显示。
只需要把这个放到一个,echarts在线编辑器就能修改,并看到效果。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
二、实现步骤
方案一:
需要把数据,变成下面这种形式。symbol就是拐点类型,none就是不显示。itemStyle.normal可以设置其样式。具体看api文档。
[
{
value:150
},
{
value:154
}
]
具体代码:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [
{
value: 9,
symbolSize: 8, //拐点大小
itemStyle: {
normal: {
color: 'red',
borderColor: 'red', //拐点边框颜色
},
},
},
{
value: 20,
symbol: 'none', //拐点样式 不显示
},
{
value: 15,
symbol: 'none', //拐点样式 不显示
},
{
value: 9,
symbol: 'none', //拐点样式 不显示
},
{
value: 20,
symbolSize: 8, //拐点大小
itemStyle: {
normal: {
color: 'red',
borderColor: 'red', //拐点边框颜色
},
},
},
{
value: 10,
symbol: 'none', //拐点样式 不显示
},
{
value: 15,
symbol: 'none', //拐点样式 不显示
},
],
type: 'line',
},
],
};
echarts折线图设置特定拐点https://www.makeapie.com/editor.html?c=xePqG2zTLi
方案二:
利用symbol函数实现
//使用这个 https://www.makeapie.com/editor.html?c=xePqG2zTLi 里面的方法更灵活
let value = [150, 230, 224, 218, 135, 147, 260];
let min = Math.min(...value); //计算最小值
let max = Math.max(...value); //计算最大值
console.log(min, max);
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
symbol: function (value, params) {
console.log(params);
if (value == min || value == max) {
return 'circle'; //拐点类型
} else {
return 'none'; //拐点不显示
}
},
itemStyle: {
normal: {
color: 'red',
borderColor: 'red', //拐点边框颜色
lineStyle: {
color: '#ff9c35', //折线颜色
},
},
},
},
],
};
利用symbol实现特定拐点显示
echarts官方文档https://echarts.apache.org/zh/option.html#title
echarts社区
总结:
echarts,社区里有很多效果,当官网示例没找到想要的效果可以去,社区里找找。可以自己发布作品。还可以在线编辑,修改。
————————————————
版权声明:本文为CSDN博主「崽崽的谷雨」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44058725/article/details/119379471
这篇关于echarts设置折现图拐点,只需要特定的值才显示拐点(比如:最大值、最小值)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!