echarts的标线、折线分段变色、区域变色
说明
个人对echars的理解
echars图的option我理解的是本质就是一个json，你可以写入不同的参数，echarts给解析成你想要的样式。你可以在开始的时候定义一个json，然后在功能里对这个json进行修改，或者写一个函数来得到你想要的json数据。
案例说明
这个页面直接就是可以使用，引入的js全部换成在线的了。其中的option是官网最简单折线图改造的，你可以把我的页面直接复制到你的功能里使用，也可以把option复制到echarts的官网里也能出来这个效果图。
示意图
页面代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<!-- <script th:src="@{/js/echarts.min.js}"></script>-->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<title>demo</title>
</head>
<body>
<div id="app" view>
<div id="container" style="width: 960px; height: 960px; " ></div>
</div>
</body>
<script>
//折线
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
visualMap: {
show: false,
dimension: 1,
pieces: [{gte: 200, lte: 210, color: 'gold'},{gte: 0, lte: 150, color: 'red'}],
outOfRange: {
color: 'black'
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
markLine: {
symbol : [ 'none', 'none' ],//去掉箭头
lineStyle : {
normal : {
color : 'rgba(112,208,136,0.9)',
type : 'solid',
width : 2
// 这儿设置安全基线颜色
}
},
data : [
{
yAxis : parseInt('140'),
name : '下限'
}, {
yAxis : parseInt('180'),
name : '上限'
}
],
label : {
normal : {
textStyle : {
color : 'rgba(112,208,136,0.9)'
},
formatter :function (param) {
return param.name;
}
},
},
},
}
]
};
var myChart;
var vm = new Vue({
el : "#app",
data : {
},
mounted : function() {
option.series[0].markArea = { //标记区域
itemStyle : { //全局的
normal : {
color : 'rgba(112,208,136,0.5)'
}
},
data : [ [ {
yAxis : parseInt(170),//y轴坐标控制
itemStyle : {
color : 'rgba(112,208,136,0.1)'
}
}, {
yAxis : parseInt(130),//y轴坐标控制
itemStyle : {
color : 'rgba(112,208,136,0.1)'
}
} ] ]
};
myChart = echarts.init(document
.getElementById("container"));
myChart.setOption(option, true);
},
methods : {
},
});
</script>
</html>
标线 markLine
markLine: {
symbol : [ 'none', 'none' ],//去掉箭头
lineStyle : {
normal : {
color : 'rgba(112,208,136,0.9)',
type : 'solid',
width : 2
// 这儿设置安全基线颜色
}
},
data : [
{
yAxis : parseInt('140'),
name : '下限'
}, {
yAxis : parseInt('180'),
name : '上限'
}
],
label : {
normal : {
textStyle : {
color : 'rgba(112,208,136,0.9)'
},
formatter :function (param) {
return param.name;
}
},
},
},
把上面的代码写到series里就会有上下限两条横线，如果没有其中的一条，会一条线到顶或者到底的区域变色，两条线会是两条线的中间变色。在这里用到了formatter 函数，参数为param，他会加载当前的option里的数据，这样就能都动态的显示不同的标线名字，也可以直接写一个字符串，那么所有标线的名字都会是这个字符串。
折线分段变色 visualMap
visualMap: {
show: false,
dimension: 1,
pieces: [{gte: 200, lte: 210, color: 'gold'},{gte: 0, lte: 150, color: 'red'}],
outOfRange: {
color: 'black'
}
},
这里的prices里可以动态的写入大于小于某个值的时候让折现显示什么颜色。可以像示例这样写死，也可以在后面加载的时候重新根据后台的传参动态的设置区间段的折现颜色
区域变色 markArea
option.series[0].markArea = { //标记区域
itemStyle : { //全局的
normal : {
color : 'rgba(112,208,136,0.5)'
}
},
data : [ [ {
yAxis : parseInt(170),//y轴坐标控制
itemStyle : {
color : 'rgba(112,208,136,0.1)'
}
}, {
yAxis : parseInt(130),//y轴坐标控制
itemStyle : {
color : 'rgba(112,208,136,0.1)'
}
} ] ]
};
这里就是在函数里对markArea重新赋值，就能画出示意图的浅绿色的区域。也可以在开始的option里写死也行。这里是方便演示不同的赋值才分别在开始定义了一个json，在funtion里又重新赋值。
遇到问题
不识别字符型的数字
开始的时候一直出不来效果，需要对数据进行转换 parseInt(170),转换成int型才能识别
出现白屏
这个是因为在函数里对option重新赋值，但是option本质是一个json，我当时的series是一个有两个参数的数据，在第一个数组里有markArea，第二个数组里没有markArea，当我option.series[1].markArea.itemStyle 的时候因为第二个没有markArea这个参数，会是null，null没法获取itemStyle，就会报错，非常不好排查这种问题。
formatter函数
这个函数当时不怎么会用怎么传参，不太清楚，一直没有把参数传进去，查了好几篇文章才学会的。
2394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
