vue中echarts的用法及与elementui-select的协同绑定操作

1.vue中echarts的使用

引入echarts后

1. let myChart = echarts.init(document.getElementById('dsm'));//dsm为绑定的dom结构
2. var option = {
3. //backgroundColor:"#111c4e",
4. tooltip: {
5. trigger: 'axis'
6. },
7. legend: { //图表上方的图例显隐
8. data:['光合有效辐射'],
9. textStyle: {
10. color: '#fff'
11. }
12. },
13. color:['#E4FD0A'],
14. grid: { //图表里上下左右的空间 间隙
15. left: '3%',
16. right: '8%',
17. bottom: '3%',
18. containLabel: true
19. },
20. xAxis: { //x轴属性
21. type: 'category',
22. name: '日期/时间',
23. // boundaryGap: false,
24. data: this.xZhou,
25. axisLine:{
26. lineStyle:{color:'#fff'} // x轴坐标轴颜色
27. },
28. axisLabel: {
29. show: true,
30. color: '#fff',
31. fontSize:12,
32. // rotate: 30
33. }
34. },
35. yAxis: { //y轴属性
36. type: 'value',
37. name: '光合有效辐射',
38. axisLine:{
39. lineStyle:{color:'#fff'} // x轴坐标轴颜色
40. },
41. axisLabel: {
42. show: true,
43. color: '#fff',
44. fontSize:12,
45. // rotate: 30
46. }
47. },
48. series: [ //为鼠标在图表中划过时显示的数据
49. {
50. name:'光合有效辐射',
51. type:'line',
52. stack: '总量',
53. data:this.yZhou,
54. lineStyle:{
55. normal:{
56. color: '#E4FD0A'
57. }
58. }
59. }
60. ]
61. };
62. myChart.setOption(option)
63. window.addEventListener("resize", function () { //设置图表因窗口大小的变化进行变化
64. myChart.resize();
65. });

上述图表的显示效果为：

2.echarts与elementui-select的协同绑定

实现依据elementui-select的变化而变化图表。

1. <template>
2. <div class="content">
3. <div class="contentDetail" v-show="isXM">
4. <div class="close" @click="close"></div>
5. <div class="chartContent">
6. <el-select
7. v-model="defaultyAxis" //利用v-model对默认数据defaultyAxis进行改变，实际绑定的数据是yAxisOption
8. placeholder="请选择"
9. class="chartSelect"
10. popper-class="trsfChartSelect-popper"
11. @change="renderChart()"
12. >
13. <el-option v-for="item in yAxisOption" :key="item" :label="item" :value="item"></el-option>
14. </el-select>
15. <div id="zsfChart"></div>
16. </div>
17. </div>
18. </div>
19. </template>

1. <script>
2. import { zsfEntity} from '@/api/sfcl.js'
3.  
4. export default {
5. name: 'Home',
6. data() {
7. return {
8. isXM: true,
9. yAxisOption: ['a', 'b'],
10. defaultyAxis: '',
11. dataOgj: {},
12. }
13. },
14. mounted() {
15. this.$comjs.addSimplePoint([100.62713539843939, 38.620863795306164]) //cesium挂载图标
16. this.getChartDataAndRender()
17. },
18. methods: {
19. close() {
20. this.isXM = false
21. this.$store.commit('getComponent1', '')
22. },
23. getChartDataAndRender(){ //axios获取异步数据
24. var _this = this
25. zsfEntity().then(res => {
26. if(res.obj.length == 0){
27. return
28. }
29. let keyArr = Object.keys(res.obj[0])
30. for (let item of keyArr) {
31. _this.dataOgj[item] = []
32. }
33. for (let item of res.obj) {
34. for (let item1 of keyArr) {
35. _this.dataOgj[item1].push(item[item1])
36. }
37. }
38. _this.yAxisOption = keyArr.slice(1)//y轴实际数据 四项
39. _this.defaultyAxis = _this.yAxisOption[0] //获取y轴默认数据
40. _this.renderChart()
41. })
42. },
43. //渲染图表
44. renderChart() {
45. let myChart = echarts.init(document.getElementById('zsfChart'))
46. let option = {
47. tooltip: {
48. trigger: 'axis',
49. axisPointer: {
50. type: 'cross',
51. label: {
52. backgroundColor: '#6a7985'
53. }
54. }
55. },
56. legend: {
57. data:[this.defaultyAxis],
58. textStyle: {
59. color: '#fff'
60. }
61. },
62. grid: {
63. right: '5%',
64. left: '5%'
65. },
66. color: ['#E4FD0A'],
67. xAxis: {
68. name: "观测时间",
69. type: 'category',
70. boundaryGap: false,
71. data: this.dataOgj.observeTime,
72. axisLabel: {
73. color: '#ffffff'
74. // fontSize: 10,
75. // rotate:30
76. },
77. axisLine: {
78. lineStyle: {
79. color: '#ffffff',
80. type: 'dashed'
81. }
82. }
83. },
84. yAxis: {
85. name: this.defaultyAxis,//挂载默认数据
86. type: 'value',
87. axisLabel: {
88. color: '#ffffff',
89. fontSize: 10
90. // rotate:30
91. },
92. axisLine: {
93. lineStyle: {
94. color: '#ffffff',
95. type: 'dashed'
96. }
97. }
98. },
99. series: [
100. {
101. data: this.dataOgj[this.defaultyAxis],
102. type: 'line',
103. name: this.defaultyAxis
104. }
105. ]
106. }
107. myChart.setOption(option)
108. window.addEventListener('resize', function() {
109. myChart.resize()
110. })
111. }
112. },
113. destroyed(){
114. this.$comjs.removeSimplePoint()
115. }
116. }
117. </script>

1. <style lang="stylus">
2. .trsfChartSelect-popper
3. background: rgba(1,64,64,1)
4. .el-select-dropdown__item.hover, .el-select-dropdown__item:hover
5. background: rgba(0,0,0,0.5)
6. .el-select-dropdown__item
7. color: #fff
8. </style>
9. <style lang="stylus" scoped>
10. @import '../../assets/styles/varibles.styl'
11. .content
12. position: absolute
13. right: vw(10)
14. top:vh(71)
15. z-index: 100
16. color: #fff
17. background: $bgColor
18. .contentDetail
19. width:vw(1500)
20. height:vh(348)
21. position: fixed
22. right: 70px
23. bottom: 27px
24. margin:auto
25. z-index: 100
26. color: #fff
27. background: $bgColor
28. border: 1px solid rgba(3,240,240,1)
29. .close
30. position:absolute
31. right:vw(15)
32. top:vh(10)
33. cursor: pointer
34. background-image:url("/images/lanhu/close.png")
35. width: 20px;
36. height: 20px;
37. z-index: 1
38. .baseInfo
39. height: 75px;
40. padding-top: 30px;
41. .baseInfo-item
42. width: 33%;
43. display: inline-block;
44. text-align: left;
45. margin-bottom: 20px;
46. padding-left: 80px;
47. .baseInfo-item-icon
48. vertical-align: middle
49. margin-right: 14px
50. .baseInfo-item-text
51. vertical-align: middle
52. .separator
53. height: 1px
54. background: #03F0F0
55. .chartContent
56. height: 100%
57. .chartSelect
58. position:absolute
59. right: 63px
60. margin-top: 20px
61. width: 150px
62. z-index: 1
63. /deep/ .el-input__inner
64. height: 28px;
65. line-height: 28px;
66. background:rgba(1,64,64,1);
67. border-radius:2px;
68. border:1px solid rgba(0,252,252,1);
69. color: #fff
70. /deep/ .el-input__icon
71. line-height: 28px;
72. #zsfChart
73. height: 100%
74. width:100%
75. </style>

效果实现

补充知识：vue项目在同一页面中引入多个echarts图表 ，并实现封装，自适应和动态数据改变

vue-Echarts

公司最近做项目需要用到图表，以前是使用echarts,现在也是用这个，没什么好纠结的！ 但是最近发现以前每次做图表之类的都没有封装，每次做图表都要从新去配置之类的，写了好多重复代码，感觉很累啊，所以自己把图表封装成子组件使用，代码工作量减轻了很多，而且子组件使用了数据进行监听和图表自适应屏幕大小，这样以后会方便很多了！

当然公司的项目肯定不能发出来了，我会做个简单的demo出来

先截个图吧！

其实我也未作什么太复杂的工作，以前工作中，页面中要2个图表，我在methods:{}中写两个方法配置之类的，类似这样子：

好了，首先第一步，使用echarts当然要引用了

1. vue 项目中 引用echarts

cnpm install echarts -S

执行完毕后再 main.js中引入

因为是pc端的项目，用了element ui （不重要）,引入之后就可以在全局使用了，之前对这个不是很懂，每个要图表页面都引入echarts，就像这个样子：

使代码写的乱七八糟的,现在在全局引用了，就不需要在每个用图表的页面中引入了

2. 父子组件中使用图表，现在我做的这个页面把他分成两个部分，这个页面整体为父，两个图表为子组件，这样子

1.先看下父组件代码，样式类的请忽视

1. import linegraph from '@/components/linegraph.vue'
2. export default {
3. data(){
4. return{
5. notAccess:false,
6. ChartLineGraph2:null,
7. option:{
8. title: {
9. text: '全年产量趋势图',
10. left: 'center'
11. },
12. tooltip: {
13. trigger: 'item',
14. formatter: '{a} <br/>{b} : {c}'
15. },
16. legend: {
17. left: 'center',
18. data: ['本年', '上年'],
19. bottom:0
20. },
21. xAxis: {
22. type: 'category',
23. name: 'x',
24. splitLine: {show: false},
25. data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
26. },
27. grid: {
28. left: '1%',
29. right: '2%',
30. bottom: '8%',
31. containLabel: true
32. },
33. yAxis: {
34. type: 'category',
35. name: 'y',
36. splitLine: {show: true},
37. data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%']
38. },
39. series: [
40. {
41. name: '本年',
42. type: 'line',
43. data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
44. },
45. {
46. name: '上年',
47. type: 'line',
48. data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
49. },
50. ]
51. },
52. option2:{
53. title: {
54. text: '全年设备产量对比图',
55. left: 'center'
56. },
57. xAxis: {
58. type: 'category',
59. data: ['检品机1', '检品机2', '检品机3', '检品机4', '检品机5', '检品机6', '检品机7']
60. },
61. yAxis: {
62. type: 'value'
63. },
64. legend: {
65. left: 'center',
66. data: ['本年', '上年'],
67. bottom:0
68. },
69. grid: {
70. left: '1%',
71. right: '2%',
72. bottom: '8%',
73. containLabel: true
74. },
75. series: [
76. {
77. name: '本年',
78. data: [120, 200, 150, 80, 70, 110, 130],
79. type: 'bar',
80. barWidth:30,
81. },
82. {
83. name: '上年',
84. data: [120, 200, 150, 80, 70, 110, 130],
85. type: 'bar',
86. barWidth:30,
87. }]
88. }
89.  
90. }
91. },
92. mounted(){
93.  
94. },
95. components:{
96. ErrorTip,
97. linegraph,
98. }
99.  
100. }

这是父组件代码，两个图表不管是折线图还是柱状图都是使用 linegraph.vue这个子组件来进行的，因为我把echarts图表生成的配置项都放在了父组件里面，然后通过父组件给子组件传值实现图表生成，

3.父组件我们看完了，现在我们看下是如何封装的图表类linegraph.vue子组件，我先截图一下，然后解释：

这里需要注意一下这几个问题，

第一个： 父子组件传值问题 ，父组件需要传id值和配置项的值给子组件生成图表，通过vue的prop传过来的id和data（配置项） ，具体怎么传值可看父子组件传值代码或百度；

第二点： 我们首先设想这样一个场景： 当父组件的传值 option或者option2 (图表配置项)，刚开始在data()里面是设置为option:null,或者是一个空的对象,或者配置项缺少数据这部分，在methods中通过ajax调用接口获取到数据然后赋值给option,例如：this.option = 一个对象，可以成图表之类的，当option值未改变时就把option=null的值传递给了子组件，这样图表生成不了，像这样

数据不能动态传值 ，数据不能动态传值！ 要解决这个问题，必须用到vue watch的对象深度监听，我之前写了一篇watch，正好用上了

对子组件接受到的data（配置项）进行深度监听，当父组件通过ajax改变了传过来的data的值，图表将会重新渲染。

3.第三个问题

图表自适应，当屏幕大小改变时，图表也需要进行自适应，本来挺简单的东西，被我头脑转不过来，搞了一个小时，总算搞好了啊，其实之前写的就是在 子组件的 drawLineGraph（）方法里面写入一个方法，这个方法

window.onresize =this.ChartLineGraph.resize;

还是出问题了，这个页面两个图表，结果只有后面的图表会自适应，前面的那个没反应???,我就蒙了，还以为自己方法写错了，真是蛋疼， 改成这样，那个this一定要注意，我就是搞错对象了，然后两个图表都可以自适应

好吧，这是我封装的echarts组件，没有进行ajax的对接操作，如果有问题，欢迎留言！

以上这篇vue中echarts的用法及与elementui-select的协同绑定操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/weixin_43163704/article/details/105140532