nelson
3 years ago
2 changed files with 39 additions and 7 deletions
@ -1,15 +1,46 @@ |
|||
<template> |
|||
<div> |
|||
asd |
|||
</div> |
|||
<div ref="main" style="width: 100%; height: 400px" /> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Index' |
|||
<script setup lang="ts"> |
|||
import { ref, onMounted } from 'vue' |
|||
// 按需引入 echarts |
|||
import * as echarts from 'echarts' |
|||
const main = ref() // 使用ref创建虚拟DOM引用,使用时用main.value |
|||
onMounted( |
|||
() => { |
|||
init() |
|||
} |
|||
) |
|||
const init = () => { |
|||
// 基于准备好的dom,初始化echarts实例 |
|||
const myChart = echarts.init(main.value) |
|||
// 指定图表的配置项和数据 |
|||
const option = { |
|||
title: { |
|||
text: 'ECharts 入门示例' |
|||
}, |
|||
tooltip: {}, |
|||
legend: { |
|||
data: ['销量'] |
|||
}, |
|||
xAxis: { |
|||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] |
|||
}, |
|||
yAxis: {}, |
|||
series: [ |
|||
{ |
|||
name: '销量', |
|||
type: 'bar', |
|||
data: [5, 20, 36, 10, 10, 20] |
|||
} |
|||
] |
|||
} |
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
myChart.setOption(option) |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
<style scoped lang="scss"> |
|||
|
|||
</style> |
|||
|
Loading…
Reference in new issue