1.通过npm获取echarts (通过cmd中打开项目文件)
npm install echarts --save
2.在vue项目中引入echarts:
①在main.js中写入下面两行代码
import * as echarts from ‘echarts’;
Vue.prototype.$echarts = echarts
②新建Echarts.vue文件
//在Echarts.vue文件中,写入下面的代码块:
<template>
<div class="Echarts">
<div id="main" style="width: 600px;height: 400px;"></div>
</div>
</template>
<script>
export default {
name: 'Echarts',
methods: {
myEcharts(){
var myChart = this.$echarts.init(document.getElementById('main'));
//配置图表
var option = {
title: {
text: 'echarts入门示例',
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5,20,36,10,10,20]
}]
};
myChart.setOption(option);
}
},
mounted(){
this.myEcharts();
}
}
</script>
<style>
</style>
③在App.vue文件中 引入-注册-使用上述定义的组件 Echarts.vue
附录:
Echarts官网:
https://echarts.apache.org/handbook/zh/get-started/