服务器之家

服务器之家 > 正文

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

时间:2021-11-23 16:40     来源/作者:我是主角我不能死

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. });

上述图表的显示效果为:

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

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的用法及与elementui-select的协同绑定操作

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

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

vue-Echarts

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

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

先截个图吧!

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

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

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

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

1. vue 项目中 引用echarts

cnpm install echarts -S

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

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

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

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

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

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

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

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

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

  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子组件,我先截图一下,然后解释:

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

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

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

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

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

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

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

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

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

3.第三个问题

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

window.onresize =this.ChartLineGraph.resize;

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

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

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

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

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

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部