标签：初试 map type packets1 let result 折线图 data Echarts
①效果
折线1和折线2为拆分版本，折线3为合并版本。
合并方法是采用两个series元素，并分别设置lineStyle
②原生JS版本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<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>
③Vue.js版本
待续
标签：初试,map,type,packets1,let,result,折线图,data,Echarts 来源： https://www.cnblogs.com/xkxf/p/15872787.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。