tiny-vue/examples/sites/demos/pc/app/chart/props/demo7.vue

36 lines
840 B
Vue

<template>
<tiny-line :data="chartData" :grid="grid"></tiny-line>
</template>
<script lang="jsx">
import { ChartLine } from '@opentiny/vue'
export default {
components: {
TinyLine: ChartLine
},
data() {
return {
chartData: {
columns: ['日期', '成本', '利润'],
rows: [
{ 日期: '1月1日', 成本: 15, 利润: 12 },
{ 日期: '1月2日', 成本: 12, 利润: 25 },
{ 日期: '1月3日', 成本: 21, 利润: 10 },
{ 日期: '1月4日', 成本: 41, 利润: 32 },
{ 日期: '1月5日', 成本: 31, 利润: 30 },
{ 日期: '1月6日', 成本: 71, 利润: 55 }
]
},
grid: {
show: true,
top: 50,
left: 10,
backgroundColor: '#ccc',
borderColor: '#000'
}
}
}
}
</script>