echarts的使用——vue

在vue的項目開發中，數據的可視化能夠用echarts來實現，具體用法以下：

（1）安裝echarts，進入項目目錄，執行以下命令，安裝echarts：

npm install echarts 

（2）引入echarts，並對相關的橫座標和縱座標進行賦值，該實例直接寫入了app.vue中，具體代碼以下：

<template>
  <div>
    <h2><button id="btn" @click="subBtn" v-text="btnText"></button></h2>
    <ECharts class="chart-instance" :options="options" autoResize></ECharts>
  </div>
</template>
<script>
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'

export default {
  name: 'Readme',
  components: {
    ECharts
  },
  data () {
    return {
      // 切換標識
      btnText: '隱藏',
      options: {
        title: {
          show: false,
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          selected: {},
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true,
              title: {
                dataZoom: '區域縮放',
                dataZoomReset: '區域縮放後退'
              }
            },
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            axisLabel: {
              interval: 11
            },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: []
      }
    }
  },
  methods: {
    init: function () {
      let _t = this
      _t.drawLine()
    },
    drawLine () {
      let _t = this
      const item = {
        0: {
          '上週所有點擊率': 'all',
          '上週默認流點擊率': 'default',
          '上週推薦流點擊率': 'recommend'
        },
        1: {
          '今日所有點擊率': 'all',
          '今日默認流點擊率': 'default',
          '今日推薦流點擊率': 'recommend'
        }
      }
      let url = 'http://10.23.87.10/realtimedata?_appid=recommend&data_type=week_click_rate_flow'
      this.$http.jsonp(url, { //看後臺獲取的是什麼數據類型決定是用get仍是用jsonp
        jsonp: '_callback'
      }).then(function (response) {
        let res = response.body
        Object.keys(item).forEach((obj) => { // 圖列
          _t.options.legend.data.push.apply(_t.options.legend.data, Object.keys(item[obj]))
        })
        _t.options.legend.data.forEach((item) => {
          _t.options.series.push({
            name: item,
            type: 'line',
            data: []
          })
        })
        res.result.forEach((obj, index) => { // 昨日今日展現數
          obj.data.forEach((objData, objDataIndex) => {
            if (!index) { // 昨天
              _t.options.xAxis[0].data.push(objData.time) // 獲取(橫軸)xAxis.data數據
            }
            Object.keys(item[index]).forEach((key) => {
              const selectedIndex = _t.options.legend.data.indexOf(key)
              _t.options.series[selectedIndex].data.push(objData[item[index][key]])
            })
          })
        })
      }, function (res) {
        alert('圖表請求數據失敗!')
      })
    },
    subBtn: function () {
      let _t = this
      let selectd = {}
      if (_t.btnText === '隱藏') { // 判斷是否顯示或隱藏
        for (let i = 0; i < _t.options.legend.data.length; i++) {
          let key = _t.options.legend.data[i]
          selectd[key] = false
        }
        _t.btnText = '顯示'
      } else {
        for (let i = 0; i < _t.options.legend.data.length; i++) {
          let key = _t.options.legend.data[i]
          selectd[key] = true
        }
        _t.btnText = '隱藏'
      }
      _t.options.legend.selected = selectd
    }
  },
  created: function () {
    let _t = this
    _t.init()
  }
}
</script>
<style scoped>
  h2{
    text-align: center;
    color:#333;
    padding:0;
    margin:30px 0 0 0;
  }
  #btn{
    display: inline-block;
    margin-left: 10px;
    color: #fff;
    font-size: 15px;
    background: rgba(169,51,76,.9);
    border: none;
    width: 65px;
    height: 25px;
    outline: none;
    border-radius: 5px;
  }
  .chart-instance {
    width: 100%;
    height:700px;
    padding-top: 10px;
    text-align: left;

  }
</style>