vue檔案如何使用echarts.js？（兩種方法介紹）-js教程-PHP中文網

第一种在vue中使用echart的方式

首頁

web前端

js教程

vue檔案如何使用echarts.js？（兩種方法介紹）

不言

Oct 18, 2018 pm 05:09 PM

javascript

這篇文章帶給大家的內容是關於vue檔案如何使用echarts.js？（兩種方法介紹），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

最近工作需要用到echarts，由於專案是用的vue-cli開發的。在網路上搜到vue中合成了vue-echarts，但是不想使用vue中規定好的資料格式，於是就自己做了一個vue專案引用原生echarts的簡單demo，實作過程如下：用了兩種實作方式

準備工作

1、安裝echarts依賴

控制台輸入：npm install echarts --save

2、全域引入

main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

登入後複製

建立圖表

#第一種建立方式

在一個.vue檔案中引入多張圖表

建立WelcomePage.vue

<template>
  <div>
    <h1 id="第一种在vue中使用echart的方式">第一种在vue中使用echart的方式</h1>

    <div>
      <div></div>
    </div>

    <div>
      <div></div>
    </div>

  </div>
</template>

登入後複製

<script>
// 引入基本模板,按需加载
  let echarts = require(&#39;echarts/lib/echarts&#39;);
  // 引入柱状图
  require(&#39;echarts/lib/chart/bar&#39;);
  // 引入柱状图
  require(&#39;echarts/lib/chart/pie&#39;);
  require(&#39;echarts/lib/component/tooltip&#39;);
  require(&#39;echarts/lib/component/title&#39;);


export default {
  name: "WelcomePage",
  data () {
    return {  }
  },
  mounted(){
    this.drawBar();
    this.drawPie();
  },
  methods:{
    drawBar(){
      // 基于dom，初始化echarts实例
      let barGraph = echarts.init(document.getElementById(&#39;barGraph&#39;));
      // 绘制图表
      barGraph.setOption({
        title: {
          text: &#39;全年产量趋势图&#39;,
          left: &#39;center&#39;
        },
        tooltip: {
          trigger: &#39;item&#39;,
          formatter: &#39;{a} <br/>{b} : {c}&#39;
        },
        legend: {
          left: &#39;center&#39;,
          data: [&#39;本年&#39;, &#39;上年&#39;],
          bottom:0
        },
        xAxis: {
          type: &#39;category&#39;,
          name: &#39;x&#39;,
          splitLine: {show: false},
          data: [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;, &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;]
        },
        grid: {
          left: &#39;1%&#39;,
          right: &#39;2%&#39;,
          bottom: &#39;8%&#39;,
          containLabel: true
        },
        yAxis: {
          type: &#39;category&#39;,
          name: &#39;y&#39;,
          splitLine: {show: true},
          data:[&#39;10%&#39;,&#39;20%&#39;,&#39;30%&#39;,&#39;40%&#39;,&#39;50%&#39;,&#39;60%&#39;,&#39;70%&#39;,&#39;80%&#39;,&#39;90%&#39;,&#39;100%&#39;]
        },
        series: [
          {
            name: &#39;本年&#39;,
            type: &#39;line&#39;,
            data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
          },
          {
            name: &#39;上年&#39;,
            type: &#39;line&#39;,
            data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
          },
        ]
      })
    },
    drawPie(){
      let pieGraph = echarts.init(document.getElementById(&#39;pieGraph&#39;));
      pieGraph.setOption({
        title : {
          text: &#39;某站点用户访问来源&#39;,
          subtext: &#39;纯属虚构&#39;,
          x:&#39;center&#39;
        },
        tooltip : {
          trigger: &#39;item&#39;,
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: &#39;vertical&#39;,
          left: &#39;left&#39;,
          data: [&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;]
        },
        series : [
          {
            name: &#39;访问来源&#39;,
            type: &#39;pie&#39;,
            radius : &#39;55%&#39;,
            center: [&#39;50%&#39;, &#39;60%&#39;],
            data:[
              {value:335, name:&#39;直接访问&#39;},
              {value:310, name:&#39;邮件营销&#39;},
              {value:234, name:&#39;联盟广告&#39;},
              {value:135, name:&#39;视频广告&#39;},
              {value:1548, name:&#39;搜索引擎&#39;}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
              }
            }
          }
        ]
      })
    }
  }
}
</script>

登入後複製

實作效果如下圖：

vue檔案如何使用echarts.js？（兩種方法介紹）

第二種實作方式（以元件的形式）

#建立父元件father.vue

  <div>
    <h1 id="msg">{{ msg }}</h1>
    <p>第二种方式：通过组件的方式进行页面渲染</p>
    <div>
      <bar-graph></bar-graph>
    </div>

    <div>
      <pie-graph></pie-graph>
    </div>

  </div>

登入後複製

<script>
// 引入两个子组件
  import BarGraph from "./bargraph";
  import PieGraph from "./piegraph";
  export default {
    name: "father",
    components:{
      BarGraph,
      PieGraph,
    },
    data(){
      return{
        msg: &#39;我是爸爸，想看我的儿子，眼睛请往下移&#39;,
      }
    }
  }
</script>

登入後複製

建立子元件barGraph.vue

   <div>
    <p>{{ msg }}</p>
    <div>
      <div></div>
    </div>
  </div>

登入後複製

<script>
  let echarts = require(&#39;echarts/lib/echarts&#39;);
  // 引入柱状图
  require(&#39;echarts/lib/chart/bar&#39;);
  require(&#39;echarts/lib/component/tooltip&#39;);
  require(&#39;echarts/lib/component/title&#39;);

  // import echarts from &#39;echarts&#39;

    export default {
      name: "bargraph",
      // props:[&#39;id&#39;],  // 第一种接收父亲传过来的值的方式
      props: {
        id: {
          type: String,
          default: &#39;chart&#39;
        }
      },
      data(){
          return {
            msg: "我是第一个子组件--bar",
            chart: null,
          }
      },
      mounted(){
        this.drawBar();
      },
      methods:{
        drawBar(){
          this.chart = echarts.init(document.getElementById(this.id));
          let colors = [&#39;#5793f3&#39;, &#39;#d14a61&#39;, &#39;#675bba&#39;];
          this.chart.setOption(
            {
              color: colors,

              tooltip: {
                trigger: &#39;axis&#39;,
                axisPointer: {
                  type: &#39;cross&#39;
                }
              },
              grid: {
                right: &#39;20%&#39;
              },
              toolbox: {
                feature: {
                  dataView: {show: true, readOnly: false},
                  restore: {show: true},
                  saveAsImage: {show: true}
                }
              },
              legend: {
                data:[&#39;蒸发量&#39;,&#39;降水量&#39;,&#39;平均温度&#39;]
              },
              xAxis: [
                {
                  type: &#39;category&#39;,
                  axisTick: {
                    alignWithLabel: true
                  },
                  data: [&#39;1月&#39;,&#39;2月&#39;,&#39;3月&#39;,&#39;4月&#39;,&#39;5月&#39;,&#39;6月&#39;,&#39;7月&#39;,&#39;8月&#39;,&#39;9月&#39;,&#39;10月&#39;,&#39;11月&#39;,&#39;12月&#39;]
                }
              ],
              yAxis: [
                {
                  type: &#39;value&#39;,
                  name: &#39;蒸发量&#39;,
                  min: 0,
                  max: 250,
                  position: &#39;right&#39;,
                  axisLine: {
                    lineStyle: {
                      color: colors[0]
                    }
                  },
                  axisLabel: {
                    formatter: &#39;{value} ml&#39;
                  }
                },
                {
                  type: &#39;value&#39;,
                  name: &#39;降水量&#39;,
                  min: 0,
                  max: 250,
                  position: &#39;right&#39;,
                  offset: 80,
                  axisLine: {
                    lineStyle: {
                      color: colors[1]
                    }
                  },
                  axisLabel: {
                    formatter: &#39;{value} ml&#39;
                  }
                },
                {
                  type: &#39;value&#39;,
                  name: &#39;温度&#39;,
                  min: 0,
                  max: 25,
                  position: &#39;left&#39;,
                  axisLine: {
                    lineStyle: {
                      color: colors[2]
                    }
                  },
                  axisLabel: {
                    formatter: &#39;{value} °C&#39;
                  }
                }
              ],
              series: [
                {
                  name:&#39;蒸发量&#39;,
                  type:&#39;bar&#39;,
                  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]
                },
                {
                  name:&#39;降水量&#39;,
                  type:&#39;bar&#39;,
                  yAxisIndex: 1,
                  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]
                },
                {
                  name:&#39;平均温度&#39;,
                  type:&#39;line&#39;,
                  yAxisIndex: 2,
                  data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
              ]
            }
          )
        }
      }
    }
</script>

登入後複製

#建立pieGraph.vue

<template>
    <div>
      <p>{{ msg }}</p>

      <div>
        <div></div>
      </div>
    </div>
</template>

登入後複製

<script>
  import echarts from &#39;echarts&#39;

    export default {
      name: "piegraph",
      props:{
        id: {
          type: String,
          default: &#39;pieChart&#39;
        }
      },
      data(){
          return{
            msg: &#39;我是第二个子组件--pie&#39;,
            pieChart: null
          }
      },
      mounted(){
          this.drawPie();
      },
      methods: {
        drawPie () {
          this.pieChart = echarts.init(document.getElementById(this.id));
          this.pieChart.setOption(
            {
              title : {
                text: &#39;某站点用户访问来源&#39;,
                subtext: &#39;纯属虚构&#39;,
                x:&#39;center&#39;
              },
              tooltip : {
                trigger: &#39;item&#39;,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                orient: &#39;vertical&#39;,
                left: &#39;left&#39;,
                data: [&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;]
              },
              series : [
                {
                  name: &#39;访问来源&#39;,
                  type: &#39;pie&#39;,
                  radius : &#39;55%&#39;,
                  center: [&#39;50%&#39;, &#39;60%&#39;],
                  data:[
                    {value:335, name:&#39;直接访问&#39;},
                    {value:310, name:&#39;邮件营销&#39;},
                    {value:234, name:&#39;联盟广告&#39;},
                    {value:135, name:&#39;视频广告&#39;},
                    {value:1548, name:&#39;搜索引擎&#39;}
                  ],
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
                    }
                  }
                }
              ]
            }
          )
        }
      }
    }
</script>

登入後複製

效果實作如下：

vue檔案如何使用echarts.js？（兩種方法介紹）

路由檔案如下：

import WelcomePage from '@/components/WelcomePage'
import Father from '@/components/father'

import BarGraph from '@/components/bargraph'
import PieGraph from '@/components/piegraph'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'WelcomePage',
      component: WelcomePage
    },
    {
      path: '/father',
      name: 'father',
      component: Father,
      children:[
        {
          path: '/bargraph',
          name: 'bargraph',
          component: BarGraph
        },
        {
          path: '/piegraph',
          name: 'piegraph',
          component: PieGraph
        }
      ]
    },
  ]
})

登入後複製

以上是vue檔案如何使用echarts.js？（兩種方法介紹）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1325

PHP教程

1273

C# 教程

1252

Related knowledge

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。

JavaScript與WebSocket：打造高效率的即時影像處理系統 Dec 17, 2023 am 08:41 AM

JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數

See all articles

vue檔案如何使用echarts.js？ （兩種方法介紹）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

vue檔案如何使用echarts.js？（兩種方法介紹）