vue項目使用echars的兩種方法
一、直接引入echarts
1.使用命令行安裝echars
npm install echarts --save
2.main.js中引入
import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)
3.Echarts.vue中
<template>
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基於準備好的dom,初始化echarts實例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 繪製圖表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
</script>
二、使用vue-echarts
1.先npm安裝vue-echarts
npm install echarts vue-echarts
2.main.js中全局引入
import ECharts from "vue-echarts";
import "echarts/lib/chart/line";
Vue.component("chart", ECharts);
3.Echars.vue
<template>
<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
</template>
<script>
export default {
data(){
orgOptions: {}
},
mounted() {
this.orgOptions = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
}
}
</script>