echarts的使用——vue

• Z时代
• 2024-01-10
• 分类：综合

在vue的项目开发中，数据的可视化可以用echarts来实现，具体用法如下：

（1）安装echarts，进入项目目录，执行如下命令，安装echarts：

npm install echarts 

（2）引入echarts，并对相关的横坐标和纵坐标进行赋值，该实例直接写入了app.vue中，具体代码如下：

<template>
  <div>
    <h2><button ></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>

以上是 echarts的使用——vue 的全部内容， 来源链接： utcz.com/z/378571.html