[Vue]-——在vue项目中使用echarts

安装echarts依赖

npm install echarts -S

• 或者使用国内的淘宝镜像：
• 安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 使用

cnpm install echarts -S

• 创建图表

全局引入

• main.js

1. // 引入echarts

2. import echarts from 'echarts'

3.  

4. Vue.prototype.$echarts = echarts

• 1
• 2
• 3
• 4

• Hello.vue

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

•  

1. export default {

2. name: 'hello',

3. data () {

4. return {

5. msg: 'Welcome to Your Vue.js App'

6. }

7. },

8. mounted(){

9. this.drawLine();

10. },

11. methods: {

12. drawLine(){

13. // 基于准备好的dom，初始化echarts实例

14. let myChart = this.$echarts.init(document.getElementById('myChart'))

15. // 绘制图表

16. myChart.setOption({

17. title: { text: '在Vue中使用echarts' },

18. tooltip: {},

19. xAxis: {

20. data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

21. },

22. yAxis: {},

23. series: [{

24. name: '销量',

25. type: 'bar',

26. data: [5, 20, 36, 10, 10, 20]

27. }]

28. });

29. }

30. }

31. }

注意： 这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

按需引入

上面全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需引入。

• Hello.vue

1. // 引入基本模板

2. let echarts = require('echarts/lib/echarts')

3. // 引入柱状图组件

4. require('echarts/lib/chart/bar')

5. // 引入提示框和title组件

6. require('echarts/lib/component/tooltip')

7. require('echarts/lib/component/title')

8. export default {

9. name: 'hello',

10. data() {

11. return {

12. msg: 'Welcome to Your Vue.js App'

13. }

14. },

15. mounted() {

16. this.drawLine();

17. },

18. methods: {

19. drawLine() {

20. // 基于准备好的dom，初始化echarts实例

21. let myChart = echarts.init(document.getElementById('myChart'))

22. // 绘制图表

23. myChart.setOption({

24. title: { text: 'ECharts 入门示例' },

25. tooltip: {},

26. xAxis: {

27. data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

28. },

29. yAxis: {},

30. series: [{

31. name: '销量',

32. type: 'bar',

33. data: [5, 20, 36, 10, 10, 20]

34. }]

35. });

36. }

37. }

38. }

39. 这里之所以使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找，而 import 必须把路径写全。