Skip to content

Commit

Permalink
fix(line): line display error while use dataZoom
Browse files Browse the repository at this point in the history 
when use string data in series.m sometimes will trigger display error, such as the title say, and
use array data will not.

fixed #394 #387
  • Loading branch information
@xiguaxigua
xiguaxigua committed Jun 25, 2018
1 parent f2ff77e commit 696798d
Show file tree
Hide file tree
Showing 2 changed files with 218 additions and 17 deletions.
25 changes: 8 additions & 17 deletions src/packages/line/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { itemPoint } from '../../constants'
import { getFormated, getStackMap } from '../../utils'
import { isArray } from 'utils-lite'

Expand Down Expand Up @@ -28,7 +27,6 @@ function getLineSeries (args) {
itemStyle,
lineStyle,
areaStyle,
xAxisType,
dimension
} = args
let series = []
Expand All @@ -43,10 +41,7 @@ function getLineSeries (args) {
} else if (nullAddZero) {
value = 0
}
const dataItem = xAxisType === 'category'
? value
: [row[dimension[0]], value]
dataTemp[item].push(dataItem)
dataTemp[item].push([row[dimension[0]], value])
})
})
metrics.forEach(item => {
Expand Down Expand Up @@ -112,7 +107,7 @@ function getLineYAxis (args) {
}

function getLineTooltip (args) {
const { axisSite, yAxisType, digit, labelMap, xAxisType, tooltipFormatter } = args
const { axisSite, yAxisType, digit, labelMap, tooltipFormatter } = args
const rightItems = axisSite.right || []
const rightList = labelMap
? rightItems.map(item => {
Expand All @@ -129,17 +124,13 @@ function getLineTooltip (args) {
const { name, axisValueLabel } = items[0]
const title = name || axisValueLabel
tpl.push(`${title}<br>`)
items.forEach(item => {
items.forEach(({ seriesName, data, marker }) => {
let showData = null
const type = ~rightList.indexOf(item.seriesName)
? yAxisType[1]
: yAxisType[0]
const data = xAxisType === 'category'
? item.data
: item.data[1]
showData = getFormated(data, type, digit)
tpl.push(itemPoint(item.color))
tpl.push(`${item.seriesName}: ${showData}`)
const type = ~rightList.indexOf(seriesName) ? yAxisType[1] : yAxisType[0]
const itemData = isArray(data) ? data[1] : data
showData = getFormated(itemData, type, digit)
tpl.push(marker)
tpl.push(`${seriesName}: ${showData}`)
tpl.push('<br>')
})
return tpl.join('')
Expand Down
210 changes: 210 additions & 0 deletions test/load/cdn/line/dataZoom.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="../../../../lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<title>RunJS 演示代码</title>
</head>

<body>
<div id="example">
<button @click="select">
切换
</button>

<ve-line :data="chartData" :data-zoom="{ start: 20, end: 100 }"></ve-line>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
chartData: {
columns: ['月份', '用戶數'],
rows: [{
"月份": "2017-01",
'用戶數': 0,
}, {
"月份": "2017-02",
'用戶數': 0,
}, {
"月份": "2017-03",
'用戶數': 0,
}, {
"月份": "2017-04",
'用戶數': 0,
}, {
"月份": "2017-05",
'用戶數': 0,
}, {
"月份": "2017-06",
'用戶數': 0,
}, {
"月份": "2017-07",
'用戶數': 0,
}, {
"月份": "2017-08",
'用戶數': 0,
}, {
"月份": "2017-09",
'用戶數': 0,
}, {
"月份": "2017-10",
'用戶數': 0,
}, {
"月份": "2017-11",
'用戶數': 0,
}, {
"月份": "2017-12",
'用戶數': 0,
}, {
"月份": "2018-01",
'用戶數': 1,
}, {
"月份": "2018-02",
'用戶數': 0,
}, {
"月份": "2018-03",
'用戶數': 0,
}, {
"月份": "2018-04",
'用戶數': 4,
}, {
"月份": "2018-05",
'用戶數': 0,
}, {
"月份": "2018-06",
'用戶數': 0
}],
},
list1: {
columns: ['月份', '用戶數'],
rows: [{
"月份": "2017-01",
'用戶數': 0,
}, {
"月份": "2017-02",
'用戶數': 0,
}, {
"月份": "2017-03",
'用戶數': 0,
}, {
"月份": "2017-04",
'用戶數': 0,
}, {
"月份": "2017-05",
'用戶數': 0,
}, {
"月份": "2017-06",
'用戶數': 0,
}, {
"月份": "2017-07",
'用戶數': 0,
}, {
"月份": "2017-08",
'用戶數': 0,
}, {
"月份": "2017-09",
'用戶數': 0,
}, {
"月份": "2017-10",
'用戶數': 0,
}, {
"月份": "2017-11",
'用戶數': 0,
}, {
"月份": "2017-12",
'用戶數': 0,
}, {
"月份": "2018-01",
'用戶數': 1,
}, {
"月份": "2018-02",
'用戶數': 0,
}, {
"月份": "2018-03",
'用戶數': 0,
}, {
"月份": "2018-04",
'用戶數': 4,
}, {
"月份": "2018-05",
'用戶數': 0,
}, {
"月份": "2018-06",
'用戶數': 0
}],
},
list2: {
columns: ['月份', '用戶數'],
rows: [{
"月份": "2017-01",
'用戶數': 0,
}, {
"月份": "2017-02",
'用戶數': 3,
}, {
"月份": "2017-03",
'用戶數': 2,
}, {
"月份": "2017-04",
'用戶數': 8,
}, {
"月份": "2017-05",
'用戶數': 0,
}, {
"月份": "2017-06",
'用戶數': 0,
}, {
"月份": "2017-07",
'用戶數': 4,
}, {
"月份": "2017-08",
'用戶數': 0,
}, {
"月份": "2017-09",
'用戶數': 0,
}, {
"月份": "2017-10",
'用戶數': 0,
}, {
"月份": "2017-11",
'用戶數': 5,
}, {
"月份": "2017-12",
'用戶數': 0,
}, {
"月份": "2018-01",
'用戶數': 1,
}, {
"月份": "2018-02",
'用戶數': 0,
}, {
"月份": "2018-03",
'用戶數': 0,
}, {
"月份": "2018-04",
'用戶數': 0,
}, {
"月份": "2018-05",
'用戶數': 0,
}, {
"月份": "2018-06",
'用戶數': 0
}],
}

},
methods: {
select: function() {
this.chartData = this.chartData == this.list1 ? this.list2 : this.list1
}
}
})
</script>
</body>

</html>

0 comments on commit 696798d

Please sign in to comment.