1.vue中echarts的使用

引入echarts后

let myChart = echarts.init(document.getElementById('dsm'));//dsm为绑定的dom结构
   var option = {
    //backgroundColor:"#111c4e", 
     tooltip: {
      trigger: 'axis'
     },
     legend: {     //图表上方的图例显隐
      data:['光合有效辐射'],
       textStyle: {
        color: '#fff'
       }
     },
     color:['#E4FD0A'],
     grid: {     //图表里上下左右的空间 间隙
      left: '3%',
      right: '8%',
      bottom: '3%',
      containLabel: true
     },
     xAxis: {        //x轴属性
      type: 'category',
      name: '日期/时间',
      // boundaryGap: false,
      data: this.xZhou,
      axisLine:{
      lineStyle:{color:'#fff'} // x轴坐标轴颜色
      },
      axisLabel: {
       show: true,
       color: '#fff',
       fontSize:12,
       // rotate: 30
      }
     },
     yAxis: {      //y轴属性
      type: 'value',
      name: '光合有效辐射',
      axisLine:{
      lineStyle:{color:'#fff'} // x轴坐标轴颜色
      },
      axisLabel: {
       show: true,
       color: '#fff',
       fontSize:12,
       // rotate: 30
      }
     },
     series: [      //为鼠标在图表中划过时显示的数据
      {
       name:'光合有效辐射',
       type:'line',
       stack: '总量',
       data:this.yZhou,
       lineStyle:{
        normal:{
         color: '#E4FD0A'
        }
       }
      }
     ]
   };
   myChart.setOption(option)
   window.addEventListener("resize", function () { //设置图表因窗口大小的变化进行变化
    myChart.resize();
   }); 

上述图表的显示效果为：

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

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

<template>
 <div class="content">
 <div class="contentDetail" v-show="isXM">
 <div class="close" @click="close"></div>
 <div class="chartContent">
    <el-select
     v-model="defaultyAxis"  //利用v-model对默认数据defaultyAxis进行改变，实际绑定的数据是yAxisOption
     placeholder="请选择"
     class="chartSelect"
     popper-class="trsfChartSelect-popper"
     @change="renderChart()"
    >
     <el-option v-for="item in yAxisOption" :key="item" :label="item" :value="item"></el-option>
    </el-select>
 <div id="zsfChart"></div>
 </div>
 </div>
 </div>
</template>

<script>
import { zsfEntity} from '@/api/sfcl.js'

export default {
 name: 'Home',
 data() {
 return {
 isXM: true,
   yAxisOption: ['a', 'b'],
   defaultyAxis: '',
   dataOgj: {},
 }
 },
 mounted() {
  this.$comjs.addSimplePoint([100.62713539843939, 38.620863795306164]) //cesium挂载图标
  this.getChartDataAndRender()
 },
 methods: {
 close() {
   this.isXM = false
 this.$store.commit('getComponent1', '')
  },
  getChartDataAndRender(){ //axios获取异步数据
   var _this = this
   zsfEntity().then(res => {
    if(res.obj.length == 0){
     return
    }
    let keyArr = Object.keys(res.obj[0])
    for (let item of keyArr) {
  _this.dataOgj[item] = []
    }
    for (let item of res.obj) {
  for (let item1 of keyArr) {
  _this.dataOgj[item1].push(item[item1])
  }
    }
    _this.yAxisOption = keyArr.slice(1)//y轴实际数据 四项
    _this.defaultyAxis = _this.yAxisOption[0] //获取y轴默认数据
    _this.renderChart()
   })
  },
  //渲染图表
 renderChart() {
 let myChart = echarts.init(document.getElementById('zsfChart'))
 let option = {
 tooltip: {
  trigger: 'axis',
  axisPointer: {
  type: 'cross',
  label: {
  backgroundColor: '#6a7985'
  }
  }
    },
    legend: {
     data:[this.defaultyAxis],
     textStyle: {
      color: '#fff'
     }
    },
 grid: {
     right: '5%',
     left: '5%'
 },
 color: ['#E4FD0A'],
 xAxis: {
     name: "观测时间",
  type: 'category',
  boundaryGap: false,
     data: this.dataOgj.observeTime,
  axisLabel: {
  color: '#ffffff'
  // fontSize: 10,
  // rotate:30
  },
  axisLine: {
  lineStyle: {
  color: '#ffffff',
  type: 'dashed'
  }
  }
 },
 yAxis: {
     name: this.defaultyAxis,//挂载默认数据
  type: 'value',
  axisLabel: {
  color: '#ffffff',
  fontSize: 10
  // rotate:30
  },
  axisLine: {
  lineStyle: {
  color: '#ffffff',
  type: 'dashed'
  }
  }
 },
 series: [
  {
  data: this.dataOgj[this.defaultyAxis],
      type: 'line',
      name: this.defaultyAxis
  }
 ]
 }
   myChart.setOption(option)
 window.addEventListener('resize', function() {
 myChart.resize()
 })
 }
 },
 destroyed(){
  this.$comjs.removeSimplePoint()
 }
}
</script>

<style lang="stylus">
.trsfChartSelect-popper
 background: rgba(1,64,64,1)
 .el-select-dropdown__item.hover, .el-select-dropdown__item:hover
  background: rgba(0,0,0,0.5)
 .el-select-dropdown__item
  color: #fff
</style>
<style lang="stylus" scoped>
 @import '../../assets/styles/varibles.styl'
.content
 position: absolute
 right: vw(10)
 top:vh(71)
 z-index: 100
 color: #fff
 background: $bgColor
 .contentDetail
  width:vw(1500)
  height:vh(348)
  position: fixed
  right: 70px
  bottom: 27px
  margin:auto
  z-index: 100
  color: #fff
  background: $bgColor
  border: 1px solid rgba(3,240,240,1)
  .close
   position:absolute
   right:vw(15)
   top:vh(10)
   cursor: pointer
   background-image:url("/images/lanhu/close.png")
   width: 20px;
   height: 20px;
   z-index: 1 
  .baseInfo
   height: 75px;
   padding-top: 30px;
   .baseInfo-item
    width: 33%;
    display: inline-block;
    text-align: left;
    margin-bottom: 20px;
    padding-left: 80px;
    .baseInfo-item-icon
     vertical-align: middle
     margin-right: 14px
    .baseInfo-item-text
     vertical-align: middle
  .separator
   height: 1px
   background: #03F0F0
  .chartContent
   height: 100%
   .chartSelect
    position:absolute
    right: 63px
    margin-top: 20px
    width: 150px
    z-index: 1
    /deep/ .el-input__inner
     height: 28px;
     line-height: 28px;
     background:rgba(1,64,64,1);
     border-radius:2px;
     border:1px solid rgba(0,252,252,1);
     color: #fff
    /deep/ .el-input__icon
     line-height: 28px;
   #zsfChart
    height: 100%
    width:100%
</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.先看下父组件代码，样式类的请忽视

import linegraph from '@/components/linegraph.vue'
export default {
 data(){
 return{
 notAccess:false,
 ChartLineGraph2:null,
 option:{
   title: {
     text: '全年产量趋势图',
     left: 'center'
   },
   tooltip: {
     trigger: 'item',
     formatter: '{a} <br/>{b} : {c}'
   },
   legend: {
     left: 'center',
     data: ['本年', '上年'],
     bottom:0
   },
   xAxis: {
     type: 'category',
     name: 'x',
     splitLine: {show: false},
     data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
   },
   grid: {
     left: '1%',
     right: '2%',
     bottom: '8%',
     containLabel: true
   },
   yAxis: {
     type: 'category',
     name: 'y',
     splitLine: {show: true},
     data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%']   
   },
   series: [
     {
       name: '本年',
       type: 'line',
       data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
     },
     {
       name: '上年',
       type: 'line',
       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]
     },
   ]
 },
 option2:{
    title: {
     text: '全年设备产量对比图',
     left: 'center'
   },
   xAxis: {
     type: 'category',
     data: ['检品机1', '检品机2', '检品机3', '检品机4', '检品机5', '检品机6', '检品机7']
   },
   yAxis: {
     type: 'value'
   },
   legend: {
     left: 'center',
     data: ['本年', '上年'],
     bottom:0
   },
   grid: {
     left: '1%',
     right: '2%',
     bottom: '8%',
     containLabel: true
   },
   series: [
   {
   name: '本年',
     data: [120, 200, 150, 80, 70, 110, 130],
     type: 'bar',
     barWidth:30,
   },
   {
   name: '上年',
     data: [120, 200, 150, 80, 70, 110, 130],
     type: 'bar',
     barWidth:30,
   }]
 }
   
 }
 },
 mounted(){
 
 },
 components:{
 ErrorTip,
 linegraph,
 }

}

这是父组件代码，两个图表不管是折线图还是柱状图都是使用 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的对接操作，如果有问题，欢迎留言！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS创建多个对象有什么方法，具体是怎样的

  JavaScript怎么创建多个对象？javascript面向对象创建多个对象的方法，哪个最好用？字面量？工厂模式方法？构造函数方法？原型方法？原型加构造函数方法？进来一看便知。

• 跨域解决方法有多少，简单请求的判定是怎样

  这篇文章主要为大家介绍了前端面试必会的网络跨域问题解决方法讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• 多种类型jQuery网页验证码插件代码实例

  这篇文章主要介绍了多种类型jQuery网页验证码插件代码实例，有正好需要的同学可以测试研究下具体使用效果

• 在jQuery中怎样获取元素对象并修改

  jquery选定元素修改属性的方法：1、利用“$(指定元素)”语句获取指定元素对象；2、利用attr()方法来修改已获取到元素对象的属性 ，语法为“元素对象.attr(attribute,value)”。

• Map和Set的数据结构是什么样，两者啥区别

  首先了解一下 Map再来了解一下 Set总结Map和Set的区别结语：首先了解一下 MapMap 是一组键值对的结构，和 JSON 对象类似。(1) Map数据结构如下这里我们可以看到的是Map的数