單頁面中使用vue和iview、echarts，引用元件
阿新 • • 發佈：2021-11-24
index.html檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>單頁面應用</title>
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
headers.vue
<template>
<div>
<i-button>Default</i-button>
<i-button type="primary">Primary</i-button>
<i-button type="dashed">Dashed</i-button>
<i-button type="text">Text</i-button>
<br><br>
<i-button type="info">資訊按鈕</i-button>
<i-button type="success">成功按鈕</i-button>
<i-button type="warning">警告按鈕</i-button>
<i-button type="error">錯誤按鈕</i-button>
<i-button>Click me!</i-button>
</div>
</template>
<script>
module.exports = {
}
</script>
<style>
</style>
echarts.vue
<template>
<div>
<div style="width:500px;height:500px" ref="chart"></div>
</div>
</template>
<script>
const echarts = require('echarts');
module.exports = {
data () {
return {};
},
methods: {
initCharts () {
let myChart = echarts.init(this.$refs.chart);
// 繪製圖表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
},
mounted () {
this.initCharts();
}
}
</script>
echarts.js
echarts官網下個echarts.js即可