使用Echarts
- 安装开发依赖Echarts
1
npm install echarts --save
- 在main.js中全局引入
1
2
3// 引入Echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts - 进行引用
注意用$ref操作dom元素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
55
56
57
58
59<template>
<div>
list
<div ref="myechart" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
export default {
mounted() {
this.setChart()
},
methods: {
setChart() {
var myChart = this.$echarts.init(this.$refs.myechart)
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {}, // 字体悬浮
legend: {
data: ['销量']
// 各种线的总名字名字(图例组件)
},
grid:{
left:'',
right:'',
bottom:'',
containLable:'' // 此值为布尔值 改为false时会溢出并且隐藏左侧标签
}, // 直角坐标系内绘制网格
xAxis: {
boundaryGap:// 布尔值 坐标两侧留白策略当设置为true时,刻度只是作为分割线
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [ // 系列列表
{
name: '销量', // 用于tooptip的显示,legend的图例筛选变化
type: 'bar',
stack:'销量' ,// 数据堆叠,如果设置相同值,则会数据堆叠
// 第二个数据值=第一个数据值+第二个数据值
// 第三个数据值=第二个数据值+第三个数据值
// 将stack去掉或者使用不同的值则不会发生数据堆叠
data: [5, 20, 36, 10, 10, 20]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
}
}
</script>
<style lang="" scoped>
</style>