<!--
此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2jrB4VEZUhLCi_MQegsJiAIwArAAMPLDQCv7-WQBMBQAshckAHFnJAMypVcUA7IUAbOnWoR4U1HT-ENDKcQ5x7glCYCIxALTJ6bNZmbALCw0LyTNV1W0dpF3etL39vHHoeOQAtgBGwP50YEaM0Kz-ytsn51f-JhAAXt4FmcdYAcqCYKM83ID0PRrpw6ABiVKNdIAYVa6SOCVIAHcIAIwNoiKVIZ5urIhHhtBpgpihpiICwzqDyOD4pjYFcOAIIqpcfiiNVXqQOVyOMiYRx4QBRSXNWXNDFs6H-WGychUPLALHUhJ2QYkWx2ADcQA
⚠ 请注意，该图表不是 Apache ECharts 官方示例，而是由用户代码生成的。请注意鉴别其内容。
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
function getXAxis(arrays){
let set = new Set()
for(let array of arrays){
for(let item of array){
set.add(item.createDate)
}
}
let newArray = new Array()
set.forEach(value => {
newArray.push(value);
})
newArray.sort((a, b) => {
return a.localeCompare(b)
})
return newArray;
}
var list1 = [
{value:0.3,createDate:"2023-02-10"},
{value:0.4,createDate:"2023-02-15"},
{value:0.7,createDate:"2023-02-18"},
{value:0.5,createDate:"2023-02-20"},
]
var list2 = [
{value:0.5,createDate:"2023-02-10"},
{value:0.6,createDate:"2023-02-15"},
{value:0.8,createDate:"2023-02-18"},
{value:0.4,createDate:"2023-02-20"},
]
var list3 = [
{value:-0.2,createDate:"2023-02-09"},
{value:-0.2,createDate:"2023-02-10"},
{value:-0.2,createDate:"2023-02-11"},
{value:-0.2,createDate:"2023-02-15"},
{value:-0.2,createDate:"2023-02-16"},
{value:-0.2,createDate:"2023-02-17"},
{value:-0.2,createDate:"2023-02-18"},
{value:-0.2,createDate:"2023-02-21"},
]
var list4 = [
{value:-0.5,createDate:"2023-02-09"},
{value:-0.5,createDate:"2023-02-11"},
{value:-0.5,createDate:"2023-02-12"},
{value:-0.5,createDate:"2023-02-16"},
{value:-0.5,createDate:"2023-02-17"},
{value:-0.5,createDate:"2023-02-18"},
{value:-0.5,createDate:"2023-02-19"},
{value:-0.5,createDate:"2023-02-22"},
]
let xAxisData = getXAxis([list1,list2,list3,list4]);
function getSeries(arrays){
let series = new Array();
for(let array of arrays){
if(array[0].value < 0){
let points = createPoints();
points.data = fillByCreateDate(xAxisData, array, null)
series.push(points);
}else{
let line = createLine();
line.data = fillByCreateDate(xAxisData, array, "mid")
series.push(line)
}
}
return series;
}
function createPoints(){
return {
data:[],
type: 'line',
symbol: 'triangle',
symbolSize: 20,
lineStyle: {
color: '#5470C600',
width: 4,
type: 'dashed'
},
itemStyle: {
borderWidth: 3,
borderColor: '#EE6666',
color: 'yellow'
}
}
}
function createLine(){
return {
data: [],
type: 'line',
symbol: function(array,obj){
if(!obj.data.mid){
return "emptyCircle";
}else{
return "none"
}
},
itemStyle: {
borderWidth:0,
borderColor: '#EE666600',
borderJoin:"miter",
color: function(obj){
if(!obj.data.mid){
return obj.color;
}else{
return "none"
}
},
borderWidth: function(obj){
console.log(obj)
}
}
}
}
function fillByCreateDate(createDates, datas, filler){
let res = new Array()
let j=0;
for(let i=0;i<createDates.length;i++){
if(!datas[j]){
res.push({value:null})
}else if(createDates[i] == datas[j].createDate){
res.push(datas[j++])
}else{
res.push({value:filler,mid:'mid'});
}
}
//处理中间值
if(filler == "mid"){
insertMid(res)
}
return res;
}
function insertMid(datas){
let before = null;
let n = 0;
for(let i=0;i<datas.length;i++){
if(!before && datas[i].value === "mid"){
datas[i] = {value:null};
continue;
}
if(!before){
before = datas[i].value;
continue;
}
if(datas[i].value === "mid"){
n++;
}else{
if(n > 0){
insertMid2(before, datas[i].value, datas, i , n)
n = 0;
}
before = datas[i].value;
}
}
}
function insertMid2(before, alter, datas, i , n){
let f = (alter - before) / (n + 1);
for(let j = i-n; j < i;j++){
datas[j].value = before + f;
before = datas[j].value;
}
}
let series = getSeries([list1,list2,list3,list4]);
console.log(series)
var option = {
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
series: series
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>