1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| <script lang="ts" setup>
| import { onMounted,computed } from 'vue'
| import { useCounterStore } from '@/stores/counter'
| import { $echarts, ECOption } from '@/utils/echarts'
| import { Button } from 'vant'
| import testAxios from '@/views/test-axios.vue'
|
| const counter = useCounterStore()
|
| // counter.count++
| const count=computed(()=>{
| return counter.count
| })
| console.log(count, 'count')
| const add=()=>{
| counter.count++
| }
| onMounted(() => {
| // 测试echarts的引入
| const ele = document.getElementById('echarts') as HTMLCanvasElement
| const myChart = $echarts.init(ele)
| const option: ECOption = {
| title: {
| text: 'ECharts 入门示例'
| },
| tooltip: {},
| legend: {
| data: ['销量']
| },
| xAxis: {
| data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
| },
| yAxis: {},
| series: [
| {
| name: '销量',
| type: 'bar',
| data: [5, 20, 36, 10, 10, 20]
| }
| ]
| }
| myChart.setOption(option)
| })
|
| </script>
|
| <template>
| <div>hello vue3</div>
| <Button type="primary">
| Tertiary
| </Button>
| <div @click="add">累加器{{ count }}</div>
| <div id="echarts" style="width: 400px;height: 200px;"></div>
| <test-axios></test-axios>
| </template>
|
|
