【ECharts】

<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));


    // 指定图表的配置项和数据

    var option = {

        title: {

            text: 'ECharts 入门示例'

        },

        tooltip: {},

        legend: {

            data:['销量']

        },

        xAxis: {

            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

        },

        yAxis: {},

        series: [{

            name: '销量',
            type: 'bar',

            data: [5, 20, 36, 10, 10, 20]

        }]

    };


    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);

</script>

<script>

    var myChart = echarts.init(document.getElementById('main'));

    var option = {

        //x轴是类目轴（离散数据）,必须通过data设置类目数据

        xAxis: {

            type: 'category',

            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

        },

        //y轴是数据轴（连续数据）

        yAxis: {

            type: 'value'

        },

        //系列列表。每个系列通过 type 决定自己的图表类型

        series: [{

            //系列中的数据内容数组

            data: [820, 932, 901, 934, 1290, 1330, 1320],

            //折线图

            type: 'line'

        }]

    };

    myChart.setOption(option);

</script>

npm install --save echarts@4.1.0

<template>

  <div class="app-container">

    <!--表单-->

    <el-form :inline="true" class="demo-form-inline">


      <el-form-item>

        <el-select v-model="searchObj.type" clearable placeholder="请选择">

          <el-option label="学员登录数统计" value="login_num"/>

          <el-option label="学员注册数统计" value="register_num"/>

          <el-option label="课程播放数统计" value="video_view_num"/>

          <el-option label="每日课程数统计" value="course_num"/>

        </el-select>

      </el-form-item>


      <el-form-item>

        <el-date-picker

          v-model="searchObj.begin"

          type="date"

          placeholder="选择开始日期"

          value-format="yyyy-MM-dd" />

      </el-form-item>

      <el-form-item>

        <el-date-picker

          v-model="searchObj.end"

          type="date"

          placeholder="选择截止日期"

          value-format="yyyy-MM-dd" />

      </el-form-item>

      <el-button

        :disabled="btnDisabled"

        type="primary"

        icon="el-icon-search"

        @click="showChart()">查询</el-button>

    </el-form>


    <div class="chart-container">

      <div id="chart" class="chart" style="height:500px;width:100%" />

    </div>

  </div>

</template>

<script>

import echarts from 'echarts'


export default {

  data() {

    return {

      searchObj: {

        type: '',

        begin: '',

        end: ''

      },

      btnDisabled: false,

      chart: null,

      title: '',

      xData: [],

      yData: []

    }

  },

  methods: {

    showChart() {

      this.initChartData()


      this.setChart()

    },

    // 准备图表数据

    initChartData() {

    },


    // 设置图标参数

    setChart() {

      // 基于准备好的dom，初始化echarts实例

      this.chart = echarts.init(document.getElementById('chart'))

      // console.log(this.chart)


      // 指定图表的配置项和数据

      var option = {

        // x轴是类目轴（离散数据）,必须通过data设置类目数据

        xAxis: {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

        },

        // y轴是数据轴（连续数据）

        yAxis: {

          type: 'value'

        },

        // 系列列表。每个系列通过 type 决定自己的图表类型

        series: [{

          // 系列中的数据内容数组

          data: [820, 932, 901, 934, 1290, 1330, 1320],

          // 折线图

          type: 'line'

        }]

      }


      this.chart.setOption(option)

    }

  }

}

</script>