在vue中使用Echarts画曲线图的示例

npm install vue-resource --save

// main.js

import VueResource from 'vue-resource' 
Vue.use(VueResource)

export const option = {
  title: { text: '曲线图' },
  backgroundColor: '#FBFBFB',
  tooltip: {
    trigger:'axis'
  },
  xAxis: {
    data: [],
    name: 'id'
  },
  yAxis: {},
  series: [{
    name: 'data',
    type: 'line',
    data: [],
    smooth : true,
    itemStyle: {
      normal: {
        color: 'hotpink'
      }
    }
  }]
}

<script>
  import {option} from '../echarts/aysnc-lineChart-option.js' //从aysnc-lineChart-option.js中引入option

  export default {
    name: 'Curve',

    mounted() {
      //调用drawLineChart()
      this.drawLineChart();
    },
    data () {
      return {

      }
    },
    methods:{　　　　　　drawLineChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('myChart'));
        // 绘制基本图表
        myChart.setOption(option);

        //显示加载动画
        myChart.showLoading();

        //获取数据
        this.$axios.get('/getdate').then(res => {

          //将json对象的所有id数据组成一个数组
          var id = [];
          for(let i = 0;i < res.data.length;i++){
            id.push(res.data[i].id);
          }

          //将json对象中的所有data数据组成一个数组
          var data = [];
          for(let i = 0;i < res.data.length;i++){
            data.push(res.data[i].data);
          }

          setTimeout(()=>{ //为了让加载动画效果明显,这里加入了setTimeout,实现300ms延时
            myChart.hideLoading(); //隐藏加载动画
            myChart.setOption({
              xAxis: {
                data: id
              },
              series: [{
                 data: data
              }]
            })
          }, 300 )
        })
      },
    },

  };


</script>