vue的探索---echarts初步使用

给老师做一个项目，接触到了vue,根本不知道怎么用，虽然有些地方跟js和css很像，但是之前学的web前端也不怎么样啊（苦笑.jpg），通过这次机会提高能力！！！

从前台传日期到后台，从后台返回数据，然后再echarts里面显示数据（这里只用了折线图）

记得 npm install --save echarts 首先要安装这个包
并在main.js里面调用

import echarts from 'echarts'
Vue.config.productionTip = false
Vue.prototype.echarts = echarts;

大体示意图如下：

好吧 ，这里只有前端代码（因为我只写前台啊~~~）
先贴代码

template代码

    <div class="type-main" style="height: 465.6px;">
      <div align="center" class="type-main-banner">
        注意：请务必认真填写!
      </div>
      <br/>
      起始日期:
      <input type="date" v-model="beginTime" id="time1" name="time" required="required" style="height: 22px;width: 145px;"/>
      <br/>
      截至日期:
      <input  type="date" v-model="endTime" id="time2" name="time" required="required" style="height: 22px;width: 145px;"/>

      <button @click="gettest" class="Button">查询</button>
      <div align="center">

        <div class="content">
          <h2 class="prompt_p"> {{this.name}}变化趋势图</h2>
          <div class="seven_echarts"  id="seven">
          </div>
        </div>
      </div>
    </div>

script代码

这一段是把折线图的数据给写死，是固定值

export default {

    name: 'HelloWorld',
    data(){
      return{
        seven_chart:null,
        month_chart:null,
        seven_option : {
          title : {
            x: 'left',
            align: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:['最高值',]
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              magicType: {type: ['line', 'bar']},//柱状图和西和折线图切换
              restore: {},//刷新
              saveAsImage: {},//将图表以折线图的形式展现
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            name:"含量",
            nameLocation: 'end',
            type: 'value',
            axisLabel: {
              formatter: '{value} '
            }
          },
          series: [
            {
              name:'最高值',
              type:'line',
              data:[],
              lineStyle:{//设置折线色颜色
                color:'black'
              },
              itemStyle:{//设置折线折点的颜色
                normal : {
                  color:'black'
                }
              }
            },
            /*{
              name:'平行于y轴的趋势线',
              type:'line',
              markLine: {
                name:'aa',
                data: [
                  {
                    name: '0标准线',
                    yAxis: 0,
                    lineStyle:{//设置折线色颜色
                      color:'red'
                    },
                  },
                ],
                symbol: ['arrow', 'none'],//将箭头向左  默认值是向右的
                label:{
                  show:true,
                  position:'middle',//markline描述位于中间   right，left，middle
                  formatter: '{b}: {c}',//显示name中的描述
                }*/

              //}
           // }

          ],
        },

      }
    },
    mounted:function (){
      this.get_echarts();
    },
    getTypeMain(item) {
      for (var i = 0; i < this.typeList1.length; i++) {
        this.typeList[i].active = false;
      }
      item.active = !item.active;
      //console.log(item.name.substring(0, 1));
      this.hwdata.hwindex = item.name.substring(0, 1);

    },

    methods:{
      get_echarts:function(){
        this.seven_chart = this.echarts.init(document.getElementById("seven"));
        //把配置和数据放这里
        this.seven_option.series[0].data = [3,6,8,4,2,1,0,3]
        this.seven_option.xAxis.data=[1,2,3,4,5,6,7,8]
        this.seven_chart.setOption(this.seven_option)
      },
      fn (event) {
        alert(event.currentTarget.id); // event.currentTarget获取当前点击元素DOM
      }
    },

  beforeDestroy() {
      if (!this.seven_chart) { return }
      this.seven_chart.dispose();
      this.seven_chart = null;
    },

    props: {
      msg: String
    }
  }

这一段代码是从后台获取数据

  var echarts = require('echarts');
  export default {

    name: 'Shopcar',
    data() {
      return {
	  
	    name:'',
        id11:'',
        seven_chart: null,
        month_chart: null,
        seven_option: {
          title: {
            x: 'left',
            align: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['最高值',]
          },
          grid: {
            left: '20%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              //magicType: {type: ['line', 'bar']},//柱状图和西和折线图切换
              restore: {},//刷新
              //saveAsImage: {},//将图表以折线图的形式展现
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            name: "含量",
            nameLocation: 'end',
            type: 'value',
            axisLabel: {
              formatter: '{value} '
            }
          },
          series: [
            {
              name: '最高值',
              type: 'line',
              data: [],
              lineStyle: {//设置折线色颜色
                color: 'green'
              },
              itemStyle: {//设置折线折点的颜色
                normal: {
                  color: 'green'
                }
              }
            },

          ],
        },

      }
    },
    mounted: function () {
      this.get_echarts();
    },
    getTypeMain(item) {
      for (var i = 0; i < this.typeList1.length; i++) {
        this.typeList[i].active = false;
      }
      item.active = !item.active;
      //console.log(item.name.substring(0, 1));
      this.hwdata.hwindex = item.name.substring(0, 1);

    },

    methods: {
      get_echarts: function () {
        
		this.seven_chart = this.echarts.init(document.getElementById("seven"));

        //把配置和数据放这里
        this.seven_option.series[0].data =[]
        this.seven_option.xAxis.data = []
        this.seven_chart.setOption(this.seven_option)
		

      },
      gettest() {
        var b = this.beginTime.toString().replace(/-/g,"/")
        var e = this.endTime.toString().replace(/-/g,"/")
        if (this.id11==='' ) {
          alert('请将选项补全')
        } else if(b>=e){
          alert("请输入正确的日期")
        }else if(parseInt((new Date(e).getTime() - new Date(b).getTime()) / 1000 / 60 / 60 /24)>90){
          alert("查询日期范围为三个月！")
        }else {
          const path = 'xxxxxxxx##这里是自己后台的地址'
		//这里的dat是存储的往后台传输的数据，开始日期和结束日期
          var dat = { 'beginTime': this.beginTime, 'endTime': this.endTime}
		  this.$axios.post(path, dat).then(res => {
			this.name=this.name11;
			var flag=0;
              for (var i=0;i<res.data.data.length;i++)
              {
                this.seven_option.series[0].data[i] = res.data.data[i].num;
				if(res.data.data[i].num=='null'){
					flag=1;
				}
                this.seven_option.xAxis.data[i] = res.data.data[i].time;
              }
              this.seven_chart.setOption(this.seven_option)
			  if(flag==1){
				alert("您查询的时间段内无历史记录~")
			  }
            })
            .catch(error => {
              alert(error)
            })
        }
      }
    },

    beforeDestroy() {
      if (!this.seven_chart) { return }
      this.seven_chart.dispose();
      this.seven_chart = null;
    },

    props: {
      msg: String
    }
  }

css的代码：

 .type-main .type-main-banner {
    width: 80%;
    height: 40px;
    margin-top: 13px;
    border-radius: 6px;
    overflow: hidden;
    color: #fff;
    background: green;
  }
  .seven_echarts{
    height: 11rem;
    width: 80%;
  }
   .content{
    width: 60%;
  }
  .content p{
    margin-top: 1rem;
    font-size: 0.4rem;
    color: #666666;
  }
 .type-main {
    width: 80%;
    float: left;
    box-sizing: border-box;
    padding: 0 20px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

当时在调用echars的时候。犯的一个最大的错误就是调用对象的调用混了，this.seven_option和 this.seven_chart 就是这两兄弟

（太久之前写的echarts，都快忘的差不多了。。。）