forked from opentiny/tiny-vue
111 lines
2.2 KiB
Vue
111 lines
2.2 KiB
Vue
<template>
|
|
<tiny-chart-boxplot :options="options"></tiny-chart-boxplot>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import { ChartBoxplot as TinyChartBoxplot } from '@opentiny/vue'
|
|
import { ref } from 'vue'
|
|
|
|
function makeData() {
|
|
let data = []
|
|
for (let i = 0; i < 18; i++) {
|
|
let cate = []
|
|
for (let j = 0; j < 100; j++) {
|
|
cate.push(parseFloat('0.' + window.crypto.getRandomValues(new Uint32Array(1))[0]) * 200)
|
|
}
|
|
data.push(cate)
|
|
}
|
|
return data
|
|
}
|
|
|
|
const sourceData0 = makeData()
|
|
const sourceData1 = makeData()
|
|
const sourceData2 = makeData()
|
|
|
|
const options = ref({
|
|
padding: [50, 30, 55, 20],
|
|
xAxis: {
|
|
axisLabel: {
|
|
formatter: 'expr {value}'
|
|
}
|
|
},
|
|
yAxis: {
|
|
min: -400,
|
|
max: 600
|
|
},
|
|
legend: {
|
|
shwo: true,
|
|
position: {
|
|
top: 15,
|
|
right: 'center'
|
|
}
|
|
},
|
|
dataZoom: {
|
|
show: true,
|
|
start: 0,
|
|
end: 20,
|
|
position: {
|
|
left: 40,
|
|
bottom: 18
|
|
}
|
|
},
|
|
dataset: [
|
|
{
|
|
source: sourceData0
|
|
},
|
|
{
|
|
source: sourceData1
|
|
},
|
|
{
|
|
source: sourceData2
|
|
},
|
|
{
|
|
fromDatasetIndex: 0,
|
|
transform: { 'type': 'boxplot' }
|
|
},
|
|
{
|
|
fromDatasetIndex: 1,
|
|
transform: { 'type': 'boxplot' }
|
|
},
|
|
{
|
|
fromDatasetIndex: 2,
|
|
transform: { 'type': 'boxplot' }
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'category_0',
|
|
type: 'boxplot',
|
|
datasetIndex: 3
|
|
},
|
|
{
|
|
name: 'category_1',
|
|
type: 'boxplot',
|
|
datasetIndex: 4
|
|
},
|
|
{
|
|
name: 'category_2',
|
|
type: 'boxplot',
|
|
datasetIndex: 5
|
|
}
|
|
],
|
|
tipHtml: (params) => {
|
|
const { data, color, seriesName } = params
|
|
const labels = ['lower', 'Q3', 'median', 'Q1', 'upper']
|
|
let htmlString = `<div style="font-weight:bold">${seriesName}</div>`
|
|
let arr = []
|
|
labels.forEach((item, index) => {
|
|
let string = `<div>
|
|
<span style="display:inline;width:10px;height:10px;
|
|
margin-right:4px; border-radius:5px;border-style:solid;border-width: 1px
|
|
border-color:${color};background-color:${color};></span>
|
|
<span style="display:inline-block;width:90px">${item}:</span><span>${data[index + 1]}</span>
|
|
</div>`
|
|
arr.push(string)
|
|
})
|
|
htmlString += arr.join('')
|
|
return htmlString
|
|
}
|
|
})
|
|
</script>
|