初试Echarts(之一)合并两个折线图&不同区间不同样式
2022/2/8 23:52:19
本文主要是介绍初试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版本
待续
这篇关于初试Echarts(之一)合并两个折线图&不同区间不同样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升