vue+echarts圖表的基本使用步驟總結

更新時間：2023年11月22日 08:25:25 作者：獨歡、

這篇文章主要給大家介紹了關于vue+echarts圖表的基本使用步驟,Echarts是一款基于JavaScript的開源可視化圖表庫,而Vue是一種流行的JavaScript框架,用于構建用戶界,需要的朋友可以參考下

前言

在實際開發(fā)當中，我們經常需要用到一些圖表來實現(xiàn)數(shù)據可視化，這時候 echarts 可以幫助我們實現(xiàn)數(shù)據的展示。這里將介紹如何使用前端框架vue+echarts來實現(xiàn)數(shù)據可視化。

一、echarts是什么？

長話短說，echarts就是一個幫助數(shù)據可視化的庫。

二、Vue+echarts使用步驟

1.安裝 echart

npm install echarts --save

2.在main.js 引入 echarts

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts //將echarts作為全局變量加入Vue

3.一個vue組件顯示一個圖表

代碼：直接復制代碼創(chuàng)建一個vue組件，到App中引入組件即可

<template>
    <div id="myChart" :style="{width: '100%', height: '1000px'}" />
</template>
<script>
  export default {
    mounted() {
      this.drawLine()
    },
    methods: {
      drawLine() {
        // 基于準備好的dom，初始化echarts實例
        const myChart = this.$echarts.init(document.getElementById('myChart'))
        myChart.setOption({
          title: [
            {
              text: '雷達圖',
              left:'center'
            }
          ],
          polar: {
            radius: [30, '70%']
          },
          radiusAxis: {
            max: 4
          },
          angleAxis: {
            type: 'category',
            data: ['a', 'b', 'c', 'd'],
            startAngle: 75
          },
          tooltip: {},
          series: {
            type: 'bar',
            data: [2, 1.2, 2.4, 3.6],
            coordinateSystem: 'polar',
            label: {
              show: true,
              position: 'middle',
              formatter: ': {c}'
            }
          },
          backgroundColor: '#fff',
          animation: false
        })
      }
    }
  }
</script>

引入

<template>
  <div id="app">
    <Pie/>
  </div>
</template>
<script>
import Pie from './components/Pie'
export default {
  name: 'App',
  components: {
    Pie 
  }
 }

效果

4. 一個組件顯示多個echarts圖表

以下是將兩個圖表放在一個組件中展示的方式使用了 props 屬性 watch 深度監(jiān)視
props用于父組件向子組件傳遞數(shù)據

創(chuàng)建組件1 ：柱狀圖

<template>
  <!-- 創(chuàng)建承載圖標的容器 -->
  <div :id=id :data=data></div>
</template>
  <script>
  export default {
    mounted() {
      this.drawLine(this.id,this.data)
    },
    data(){
      return {
        chartGrapgh:null
      }
    },
    props:["id","data"],
    watch:{
      data:{
        handler(newVal,oldVal){
          this.drawLine(this.id,newVal)
        },
        deep:true
      }
    },
    methods: {
      drawLine(id,data) {
        // 基于準備好的dom，初始化echarts實例
        let _this = this
        let myChart = document.getElementById(id)
        this.chartGrapgh = this.$echarts.init(myChart)
        this.chartGrapgh.setOption(data)
        this.$echarts.init(document.getElementById(id)).setOption(data);

        window.addEventListener("resize",function () {
            _this.chartGrapgh.resize();  //監(jiān)聽瀏覽器縮放,自適應瀏覽器大小
          })
      }
    },
    beforeDestroy(){
      if(this.chartGrapgh){
        this.chartGrapgh.clear() //組件銷毀之前清空圖表
      }
    }
  }
</script>

創(chuàng)建組件2：折線圖

<template>
    <!-- 創(chuàng)建承載圖標的容器 -->
	<div :id=id :data=data></div>
</template>
  <script>
  
  export default {
    data(){
        return{
            newPatagrapgh:null //讓每個組件都有一塊自己的區(qū)域顯示圖表，不再是一整塊
        }
    },
    props:["id","data"],
    //  深度監(jiān)聽 父組件剛開始沒有值，只有圖標的配置項
    //  父組件ajax請求后改變數(shù)據的值，傳遞過來，圖標已生成，監(jiān)聽傳過來的值的改變
    // deep:true.深度監(jiān)聽，確保data中子項修改也能監(jiān)聽到。寫法參考：https://cn.vuejs.org/v2/api/#watch
    watch:{
        data:{
            handler(newVal,oldVal){
                this.drawLine(this.id,newVal)
            },
            deep:true
        }
    },
    mounted() {
      this.drawLine(this.id,this.data)
    },
    methods: {
      drawLine(id,data) {
        // 創(chuàng)建屬于組件本身的圖形區(qū)域，不是全局 $echarts
        let _this = this
        let mychart = document.getElementById(id)
        this.newPatagrapgh = this.$echarts.init(mychart)
        this.newPatagrapgh.setOption(data)

        window.addEventListener("resize",function () { //可選,瀏覽器縮放監(jiān)聽
            _this.newPatagrapgh.resize();
          })
      }
    },
  }
  </script>

父組件App.vue

<template>
  <div id="app">
    <!-- <Zhe :id="'myChart'" :data="optionZhe" style="width:75%;height:350px;"/> -->
    <hr/>
    <!-- <Zhu :id="'myChart2'" :data="optionZhu" style="width:75%;height:350px;"/> -->
    <Pie/>
  </div>
</template>

<script>
import Zhe from './components/Zhe'
import Zhu from './components/Zhu'
export default {
  name: 'App',
  components: {
    Zhe,
    Zhu
  },
  data(){ //在App中傳入子組件要渲染的數(shù)據：
    return {
      optionZhe:{ //折線圖的配置
         title:{
            text:"折線圖",
            left:'center'
         },
         xAxis:{
          type: 'category',
          data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
         },
         yAxis:{
          type: 'value'
         },
         series: [
          {
            data:[5, 20, 36, 10, 10, 20],
            type:'line'
          }
         ]
        },
       optionZhu:{  //柱狀圖的配置
          title: {
            text: '柱狀圖',
            subtext: '2',
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['Rainfall', 'Evaporation']
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              // prettier-ignore
              data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Rainfall',
              type: 'bar',
              data: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
              ],
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              markLine: {
                data: [{ type: 'average', name: 'Avg' }]
              }
            },
            {
              name: 'Evaporation',
              type: 'bar',
              data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
              ],
              markPoint: {
                data: [
                  { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                  { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                ]
              },
              markLine: {
                data: [{ type: 'average', name: 'Avg' }]
              }
            }
          ]
        }
    }
  }
}
</script>

效果：