echarts元件官網地址:https://echarts.apache.org/examples/zh/index.html

1.找到腳手架專案所在地址，執行cnpm install echarts，安裝echarts元件（腳手架的地址就是你專案的地址）

（E:\demo\vuepro）這是我的專案地址，vuepro為專案名

2.按需匯入，以加快開啟速度

//引入echarts元件
    import echarts from "echarts"
    // 引入基本模板
    let echart = require('echarts/lib/echarts')
  IHAySLwr  // 引入柱狀圖元件
    require('echarts/lib/chart/bar')
    // 引入提示框和title元件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')

3.準備div標籤 容納報表圖形

div的 id用於繫結echarts外掛

 <div id="chart" style="width: 50%; height: 400px;">
 </div>

4.script標籤的內容

//引入echarts元件
    import echarts from "echarts"
    // 引入基本模板
    let echart = require('echarts/lib/echarts')
    // 引入柱狀圖元件
    require('echarts/lib/chart/bar')
    // 引入提示框和title元件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
            export default{
                name: 'App',www.cppcns.com
 
               data(){
                  return{
                     chartColumn:null
                  }
                },methods:{
                  initData(){
                    let dt=document.querySelector("#boss")

                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption(
                       //Examples中的模板
                    )

                  }
                },mounted(){
                    this.initData()
                }
             }

為了方便大家的使用，我在這裡放一個在Vue中引入echarts視覺化元件的完整模板，大家直接複製使用即可

<template>
    <div id="boss" style="width: 500px;height: 500px;">
        
    </div>
</template>

<script>
    //引入echarts元件
    import echarts from "echarts"
    // 引入基本模板
    let echart = require('echarts/lib/echarts')
    // 引入柱狀圖元件
    require('echarts/lib/chart/bar')
    // 引入提示框和title元件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
            export default{
                name: 'App',data(){
                  return{
                     chartColumn:null
                  }
                },methods:{
                  initData(){
                    let dt=document.querySelector("#boss")
            
                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption(
                       //Examples中模板
                    )
            
                  }
                },mounted(){
                    this.initData()
                }
             }
</script>

<style>
</style>

案例：

<;template>
    <div id="boss" style="width: 500px;height: 500px;">

    </div>
</template>

<script>
    import echarts from "echarts"
    // 引入基本模板
    let echart = require('echarts/lib/echarts')
    // 引入柱狀圖元件
    require('echarts/lib/chart/bar')
    // 引入提示框和title元件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
            export default{
                name: 'App',data(){
                  return{
                     chartColumn:null
                  }
                },methods:{
                  initData(){
                    let dt=document.querySelector("#boss")

                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption(
                    //以下為echarts視覺化元件
                      {
                          tooltip: {
                              trigger: 'axis',axisPointer: {            // Use axis to trigger tooltip
                                  type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                              }
                          },legend: {
                              data: ['Direct','Mail Ad','Affiliate Ad','Video Ad','Search Engine']
                          },grid: {
                              left: '3%',right: '4%',bottom: '3%',containLabel: true
                          },xAxis: {
                              type: 'value'
                          },yAxis: {
                              type: 'category',data: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
                          },series: [
                              {
                                  name: 'Direct',type: 'bar',stack: 'total',label: {
                                      show: true
                                  },emphasis: {
                                      focus: 'series'
                                  },data: [320,302,301,334,390,330,320]
                              },{
                                  name: 'Mail Ad',emphasis: {
                                      focus: 'series'
                客棧                  },data: [120,132,101,134,90,230,210]
                              },{
                                  name: 'Affiliate Ad',data: [220,182,191,234,290,310]
                              },{
                                  name: 'Video Ad',data: [150,212,201,154,190,410]
                              },{
                                  name: 'Search Engine',data: [820,832,901,934,1290,1330,1320]
                              }
                          ]
                      }
                      //元件到此結束
                    )

                  }
                },mounted(){
                    this.initData()
                }
             }
</script>

<style>
</style>

顯示效果：

到此這篇關於Vue使用echarts視覺化元件的方法的文章就介紹到這了,更多相關Vue echarts視覺化元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！