初试Echarts（之一）拼接两个折线图&不同区间不同样式
①效果
折线1和折线2为拆分版本，折线3为合并版本。
合并方法是采用两个series元素，并分别设置lineStyle
最开始参考（https://blog.csdn.net/weixin_33991418/article/details/89369690），在折线2数据组前面插入大量“-”，这样就可以把折线2数据组推到折线1数据组之后显示，后面发现多此一举。直接连接两个数据组，通过折线图的重叠也可以达到相同效果，并且还无需额外处理实现了交点（t50和t51）的连线。
②原生JS版本
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EChartstitle>
<script src="echarts.js">script>
<style>
main {
/*对子元素开启弹性布局*/
display: flex;
/*弹性元素在必要的时候换行*/
flex-wrap: wrap;
/*将弹性元素居中*/
justify-content: center;
}
style>
head>
<body>
<main>
main>
<script type="text/javascript">
const WIDTH = 600;
const HEIGHT = 400;
// main用来放div1 div2 div3
let container = document.querySelector('main')
// div1用来放折线图1
let div1 = createDiv(WIDTH, HEIGHT)
container.appendChild(div1)
// div2用来放折线图2
let div2 = createDiv(WIDTH, HEIGHT)
container.appendChild(div2)
// div3用来放折线图3
let div3 = createDiv(WIDTH * 2, HEIGHT, 'none')
container.appendChild(div3)
// 创建空图
let lineChart1 = echarts.init(div1)
let lineChart2 = echarts.init(div2)
let lineChart3 = echarts.init(div3)
// 模拟两份数据
const DATA_SIZE = 100;
let packets = makeDate(DATA_SIZE)
let packets1 = packets.slice(0, DATA_SIZE / 2)
let packets2 = packets.slice(DATA_SIZE / 2, DATA_SIZE)
// 将数据填充到折线图
lineChart1.setOption({
title: {
text: '折线1',
},
xAxis: {
data: packets1.map(p => p.time)
},
yAxis: {},
series: [
{
data: packets1.map(p => p.data),
type: 'line',
lineStyle: {
color: 'black',
}
}
]
})
lineChart2.setOption({
title: {
text: '折线2',
},
xAxis: {
data: packets2.map(p => p.time)
},
yAxis: {},
series: [
{
data: packets2.map(p => p.data),
type: 'line',
lineStyle: {
color: 'black',
type: 'dashed',
opacity: 0.5,
}
}
]
})
lineChart3.setOption({
title: {
text: '折线3',
},
xAxis: {
data: packets1.concat(packets2).map(p => p.time)
},
yAxis: {},
series: [
{
data: packets1.map(p => p.data),
type: 'line',
lineStyle: {
color: 'black',
}
},
{
data: packets1.concat(packets2).map(p => p.data),
type: 'line',
lineStyle: {
color: 'black',
type: 'dashed',
opacity: 0.5,
}
}
]
})
function createDiv(width, height, display = 'block') {
let result = document.createElement('div')
result.style.width = width + 'px'
result.style.height = height + 'px'
// result.style.display = display
return result
}
function makeDate(dataSize) {
let result = [];
for (let i = 0; i != dataSize; ++i) {
result.push({
time: "t" + i,
data: Math.random(),
})
}
return result;
}
script>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EChartstitle>
<script src="echarts.js">script>
<style>
main {
/*对子元素开启弹性布局*/
display: flex;
/*弹性元素在必要的时候换行*/
flex-wrap: wrap;
/*将弹性元素居中*/
justify-content: center;
}
style>
head>
<body>
<main>
main>
<script type="text/javascript">
const WIDTH = 600;
const HEIGHT = 400;
// main用来放div1 div2 div3
let container = document.querySelector('main')
// div1用来放折线图1
let div1 = createDiv(WIDTH, HEIGHT)
container.appendChild(div1)
// div2用来放折线图2
let div2 = createDiv(WIDTH, HEIGHT)
container.appendChild(div2)
// div3用来放折线图3
let div3 = createDiv(WIDTH, HEIGHT, 'none')
container.appendChild(div3)
// 创建空图
let lineChart1 = echarts.init(div1)
let lineChart2 = echarts.init(div2)
let lineChart3 = echarts.init(div3)
// 模拟两份数据
const DATA_SIZE = 50;
let packets1 = makeDate(DATA_SIZE)
let packets2 = makeDate(DATA_SIZE)
// 将数据填充到折线图
lineChart1.setOption({
title: {
text: '折线1',
},
xAxis: {
data: packets1.map(p => p.time)
},
yAxis: {},
series: [
{
data: packets1.map(p => p.data),
type: 'line',
lineStyle: {
color: 'black',
}
}
]
})
lineChart2.setOption({
title: {
text: '折线2',
},
xAxis: {
data: packets2.map(p => p.time)
},
yAxis: {},
series: [
{
data: packets2.map(p => p.data),
type: 'line',
lineStyle: {
color: 'black',
type: 'dashed',
opacity: 0.5,
}
}
]
})
lineChart3.setOption({
title: {
text: '折线3',
},
xAxis: {
data: packets1.map(p => p.time)
},
yAxis: {},
series: [
{
data: packets1.map(p => p.data),
type: 'line',
lineStyle: {
color: 'black',
}
},
{
data: packets2.map(p => p.data),
type: 'line',
lineStyle: {
color: 'black',
type: 'dashed',
opacity: 0.5,
}
}
]
})
function createDiv(width, height, display = 'block') {
let result = document.createElement('div')
result.style.width = width + 'px'
result.style.height = height + 'px'
// result.style.display = display
return result
}
function makeDate(dataSize) {
let result = [];
for (let i = 0; i != dataSize; ++i) {
result.push({
time: "t" + i,
data: Math.random(),
})
}
return result;
}
script>
body>
html>
另一种效果.html
③Vue.js版本
待续