Browse Source

引入echarts

master
nelson 2 years ago
parent
commit
2ba7f00ea2
  1. 1
      package.json
  2. 45
      src/views/stock/chg/Index.vue

1
package.json

@ -10,6 +10,7 @@
},
"dependencies": {
"axios": "^0.26.1",
"echarts": "^5.3.2",
"element-plus": "^2.1.9",
"save": "^2.4.0",
"vue": "^3.2.25",

45
src/views/stock/chg/Index.vue

@ -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() // 使refDOM使main.value
onMounted(
() => {
init()
}
)
const init = () => {
// domecharts
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…
Cancel
Save