四、Echarts实现堆叠折线图

重在处理接口返回的数据

1. 数据：

dataDetails: {

test_result: {

test_bugs: {

"test_bugs_trend": {

"2022-06-30": {

"已修复": 7,

"已创建": 10

"2022-07-01": {

"已修复": 1,

"已创建": 1

"2022-07-02": {

"已修复": 2,

"已创建": 2

}

// 数据处理缺陷发展趋势堆叠柱状图

computed: {

// 获取日期

bugsTrendData() {

const obj = this.detailsData.test_result.test_bugs.test_bugs_trend;

return Object.keys(obj);

// 获取已修复数组

bugsTrendFixedArr() {

const obj = this.detailsData.test_result.test_bugs.test_bugs_trend;

return this.bugsTrendData.map((item) => obj[item]['已修复']);

// 获取已创建数组

bugsTrendCreatedArr() {

const obj = this.detailsData.test_result.test_bugs.test_bugs_trend;

return this.bugsTrendData.map((item) => obj[item]['已创建']);

methods: {

// 缺陷发展趋势

let bugsTrendData = echarts.init(

document.getElementById('bugsTrendData')

);

bugsTrendData.setOption({

title: {

text: '',

tooltip: {},

legend: {

data: ['已修复', '已创建'],

xAxis: {

data: this.bugsTrendData,

yAxis: {},

series: [

{

name: '已修复',

data: this.bugsTrendFixedArr,

type: 'line',

stack: 'x',

emphasis: {

focus: 'series',

itemStyle: {

normal: {

color: '#8dc1a9',

{

name: '已创建',

data: this.bugsTrendCreatedArr,

type: 'line',

stack: 'x',

emphasis: {

focus: 'series',

itemStyle: {

normal: {

color: '#dd6b66',

});

}

四、Echarts实现堆叠折线图相关推荐

echarts入门堆叠折线图
效果图鼠标移到折线图上只显示当前的信息 tooltip : {show: true,trigger: 'item'}, 鼠标移到折线图上显示所有信息 tooltip : {show: true,tr ...
vue使用echarts的堆叠折线图一直警告[Violation] 'requestAnimationFrame' handler 用时 N 毫秒怎么解决...
这个警告通常是因为你的图表渲染过于复杂或者数据量过大,导致在浏览器的一帧内渲染超时. 你可以尝试以下方法来解决这个问题: 减少图表中的数据量,使其更加简单,从而减少渲染时间. 使用图表的 lazyUp ...
01-Echarts折线图基本实现、最大值、最小值、堆叠折线图等等
目录 Echarts折线图基本实现特点最大值.最小值.平均值.标注区间显示折线线条平滑效果.风格.填充效果紧挨边缘脱离0值比例堆叠折线图 Echarts折线图基本实现特点折线图常用来分 ...
Echarts 快速入门折线图
基础折线图简单折线图如果我们想建立一个横坐标是类目型(category).纵坐标是数值型(value)的折线图,我们可以使用这样的方式: option = {xAxis: {type: " ...
[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
Matlab论文插图绘制模板第31期—堆叠折线图（stackedplot）
在之前的文章中,分享过Matlab折线图的绘制模板: 面积图的绘制模板: 面积填充图的绘制模板: 这次再来分享一种线图:堆叠折线图. 先来看一下成品效果: 特别提示:Matlab论文插图绘制模板系列, ...
【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
echarts type:line 折线图折线折点样式
echarts type:line 折线图折线折点样式 series: [{name: '课时',type: 'line',data: [23,60,20,36,23,85],label:{ //折 ...
直播app源代码，echarts 柱状图，折线图互转实例
直播app源代码,echarts 柱状图,折线图互转实例的相关代码 function initDayChart(){var myChart = echarts.init(document.getEle ...

四、Echarts实现堆叠折线图

四、Echarts实现堆叠折线图相关推荐

最新文章

热门文章