vue引入echarts

下载echarts

1
npm install echarts --save

全局引入Echarts

在/src/main.js中加入:

1
2
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

创建一个图表

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
<template>
<div id="histogramChart">
</div>
</template>

<script>
export default {
name:'Histogram',
data(){
return {}
},
mounted() {
//在mounted生命周期函数中实例化echarts对象
this.drawHistogarm();
},
methods:{
drawHistogarm(){
//初始化echarts实例
let histogram = this.$echarts.init(document.getElementById('histogramChart'))
let option = {
title: {
text: '柱状图示例',
left: 'center'
},
tooltip: {
trigger:'axis'
},
xAxis: {
type: 'category',
data: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
},
yAxis: {
type: 'value'
},
series: [{
name: '数量',
type: 'bar',
barWidth: '50%',//设置柱子的宽度
data: [204,106,190,230,100,170,201]
}]
};
histogram.setOption(option);
}
}
}
</script>

<style scoped>
#histogramChart {
width: 500px;
height: 500px;
}
</style>

原文链接:https://blog.csdn.net/HH18700418030/java/article/details/96131262

按需加载

第一种方法

不用再main.js中全局加载,可以在用的的组件中引入
import echarts from ‘echarts’

直接就用就好了
上述例子中this.$echarts 改为echarts就好了

第二种方法(推荐)

在Echarts.vue文件中

1
2
3
4
5
6
7
8
9
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
//引入模型Series
require("echarts/lib/model/Series");

使用 require 而不是 import