欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue+Echarts繪制餅圖的示例詳解

 更新時(shí)間:2023年03月16日 14:05:13   作者:Saga?Two  
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制餅圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1 引入Echarts

1.1 安裝

使用如下命令通過 npm 安裝 ECharts

npm install echarts --save

注:本文安裝Echarts版本為:“echarts”: “5.2.1”

1.2 引入

安裝完成以后,可以將echarts全部引入,這樣一來,我們可以在該頁面使用echarts所有組件;引入代碼如下:

import * as echarts from "echarts";

1.3 基本使用

vue+Echarts基本使用請(qǐng)見:在Vue項(xiàng)目中引入 ECharts

2 基本餅狀圖

餅圖和折線圖、柱狀圖略有不同,不再需要配置坐標(biāo)軸,而是把數(shù)據(jù)名稱和值都寫在系列中。只需要一個(gè)series屬性即可畫出餅圖,以下是一個(gè)最簡單的餅圖的例子。

const option = {
        series: [
          {
            type: "pie", // type設(shè)置為餅圖
            data: [
              {
                value: 463,
                name: "江蘇"
              },
              {
                value: 395,
                name: "浙江"
              },
              {
                value: 157,
                name: "山東"
              },
              {
                value: 149,
                name: "廣東"
              },
              {
                value: 147,
                name: "湖南"
              }
            ]
          }
        ]
      };

需要注意的是,這里是 value 不需要是百分比數(shù)據(jù),ECharts 會(huì)根據(jù)所有數(shù)據(jù)的 value ,按比例分配它們?cè)陲瀳D中對(duì)應(yīng)的弧度。

圖示:

3 為餅圖添加標(biāo)題等屬性

3.1 標(biāo)題圖例

通常我們給餅圖設(shè)置標(biāo)題,可以通過title屬性設(shè)置,其中title.text代表圖表標(biāo)題的文本,可以通過left ,top ,right ,bottom 四個(gè)屬性調(diào)整標(biāo)題位置,title.textStyle設(shè)置標(biāo)題文本樣式。

此外我們也可給標(biāo)題設(shè)置圖例:

legend:data對(duì)應(yīng)折線名稱以及數(shù)量,位置屬性left ,top ,right ,bottom ;圖例方向orient:默認(rèn)橫向排列,vertical表示縱向排列。

例子如下:

const option = {
    legend: {
        // 圖例
        data: ["江蘇", "浙江", "山東", "廣東", "湖南"],
        right: "10%",
        top: "30%",
        orient: "vertical"
    },
    title: {
        // 設(shè)置餅圖標(biāo)題,位置設(shè)為頂部居中
        text: "國內(nèi)院士前五省份圖示",
        top: "0%",
        left: "center"
    },
    series: [
        {
            type: "pie",
            data: [
                {
                    value: 463,
                    name: "江蘇"
                },
                {
                    value: 395,
                    name: "浙江"
                },
                {
                    value: 157,
                    name: "山東"
                },
                {
                    value: 149,
                    name: "廣東"
                },
                {
                    value: 147,
                    name: "湖南"
                }
            ]
        }
    ]
};

如圖所示:

3.2 數(shù)據(jù)展示

餅圖的文本標(biāo)簽書信默認(rèn)值與柱狀圖和折線圖不同,柱狀圖和折線圖文本標(biāo)簽?zāi)J(rèn)不展示,也就是label.show默認(rèn)為false,但是餅圖文本標(biāo)簽?zāi)J(rèn)展示,也就是label.show默認(rèn)為true;餅圖數(shù)值默認(rèn)不會(huì)展示在圖上,需要借助label.formatter將數(shù)據(jù)展示在圖上,示例如下:

const option = {
    legend: {
        // 圖例
        data: ["江蘇", "浙江", "山東", "廣東", "湖南"],
        right: "10%",
        top: "30%",
        orient: "vertical"
    },
    title: {
        // 設(shè)置餅圖標(biāo)題,位置設(shè)為頂部居中
        text: "國內(nèi)院士前五省份圖示",
        top: "0%",
        left: "center"
    },
    series: [
        {
            type: "pie",
            label: {
                show: true,
                formatter: " : {c} (vvxyksv9kd%)" // b代表名稱,c代表對(duì)應(yīng)值,d代表百分比
            },
            data: [
                {
                    value: 463,
                    name: "江蘇"
                },
                {
                    value: 395,
                    name: "浙江"
                },
                {
                    value: 157,
                    name: "山東"
                },
                {
                    value: 149,
                    name: "廣東"
                },
                {
                    value: 147,
                    name: "湖南"
                }
            ]
        }
    ]
};

圖示如下:

3.3 樣式設(shè)置

樣式設(shè)置這塊只對(duì)餅圖的半徑進(jìn)行說明,可以通過 series.radius 設(shè)置,可以是諸如 '30%' 這樣相對(duì)的百分比字符串,或是 200 這樣的絕對(duì)像素?cái)?shù)值。當(dāng)它是百分比字符串時(shí),它是相對(duì)于容器寬高中較小的一條邊的。也就是說,如果寬度大于高度,則百分比是相對(duì)于高度的,反之則反;當(dāng)它是數(shù)值型時(shí),它表示絕對(duì)的像素大小。

示例如下:

const option = {
    legend: {
        // 圖例
        data: ["江蘇", "浙江", "山東", "廣東", "湖南"],
        right: "10%",
        top: "30%",
        orient: "vertical"
    },
    title: {
        // 設(shè)置餅圖標(biāo)題,位置設(shè)為頂部居中
        text: "國內(nèi)院士前五省份圖示",
        top: "0%",
        left: "center"
    },
    series: [
        {
            type: "pie",
            label: {
                show: true,
                formatter: " : {c} (vvxyksv9kd%)" // b代表名稱,c代表對(duì)應(yīng)值,d代表百分比
            },
            radius: "30%", //餅圖半徑
            data: [
                {
                    value: 463,
                    name: "江蘇"
                },
                {
                    value: 395,
                    name: "浙江"
                },
                {
                    value: 157,
                    name: "山東"
                },
                {
                    value: 149,
                    name: "廣東"
                },
                {
                    value: 147,
                    name: "湖南"
                }
            ]
        }
    ]
};

圖示如下:

以上示例vue代碼如下:

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: {},
      pieData: [
        {
          value: 463,
          name: "江蘇"
        },
        {
          value: 395,
          name: "浙江"
        },
        {
          value: 157,
          name: "山東"
        },
        {
          value: 149,
          name: "廣東"
        },
        {
          value: 147,
          name: "湖南"
        }
      ],
      pieName: [],
      myChartStyle: { float: "left", width: "100%", height: "400px" } //圖表樣式
    };
  },
  mounted() {
    this.initDate(); //數(shù)據(jù)初始化
    this.initEcharts();
  },
  methods: {
    initDate() {
      for (let i = 0; i < this.pieData.length; i++) {
        // this.xData[i] = i;
        // this.yData =this.xData[i]*this.xData[i];
        this.pieName[i] = this.pieData[i].name;
      }
    },
    initEcharts() {
      // 餅圖
      const option = {
        legend: {
          // 圖例
          data: this.pieName,
          right: "10%",
          top: "30%",
          orient: "vertical"
        },
        title: {
          // 設(shè)置餅圖標(biāo)題,位置設(shè)為頂部居中
          text: "國內(nèi)院士前五省份圖示",
          top: "0%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: " : {c} (vvxyksv9kd%)" // b代表名稱,c代表對(duì)應(yīng)值,d代表百分比
            },
            radius: "30%", //餅圖半徑
            data: this.pieData
          }
        ]
      };
      console.log(this.seriesData);
      const optionFree = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //隨著屏幕大小調(diào)節(jié)圖表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};
</script>

4 餅圖擴(kuò)展

在 ECharts 中,餅圖的半徑radius除了3.3節(jié)提到的,可以是一個(gè)數(shù)值或者字符串之外,還可以是一個(gè)包含兩個(gè)元素的數(shù)組,每個(gè)元素可以為數(shù)值或字符串。當(dāng)它是一個(gè)數(shù)組時(shí),它的前一項(xiàng)表示內(nèi)半徑,后一項(xiàng)表示外半徑,這樣就形成了一個(gè)圓環(huán)圖。

從這個(gè)角度上來說,可以認(rèn)為餅圖是一個(gè)內(nèi)半徑為 0 的圓環(huán)圖,也就是說,餅圖是圓環(huán)圖的特例。

例子:

const option = {
    legend: {
        // 圖例
        data: ["江蘇", "浙江", "山東", "廣東", "湖南"],
        right: "10%",
        top: "30%",
        orient: "vertical"
    },
    title: {
        // 設(shè)置餅圖標(biāo)題,位置設(shè)為頂部居中
        text: "國內(nèi)院士前五省份圖示",
        top: "0%",
        left: "center"
    },
    series: [
        {
            type: "pie",
            label: {
                show: true,
                formatter: " : {c} (vvxyksv9kd%)" // b代表名稱,c代表對(duì)應(yīng)值,d代表百分比
            },
            radius: ["40%", "70%"], //圓環(huán)內(nèi)半徑40%,外半徑70%
            data: [
                {
                    value: 463,
                    name: "江蘇"
                },
                {
                    value: 395,
                    name: "浙江"
                },
                {
                    value: 157,
                    name: "山東"
                },
                {
                    value: 149,
                    name: "廣東"
                },
                {
                    value: 147,
                    name: "湖南"
                }
            ]
        }
    ]
};

如圖所示:

5 總結(jié)

餅圖在我們業(yè)務(wù)場景中引用價(jià)位哦廣泛,以上介紹的屬性基本能解決大多數(shù)業(yè)務(wù)場景的餅圖展示,本篇介紹到此位置,若要展示一些更為復(fù)雜的餅圖,歡迎留言探討。

以上就是Vue+Echarts繪制餅圖的示例詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue Echarts餅圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue多頁面項(xiàng)目實(shí)現(xiàn)版本快照功能示例詳解

    vue多頁面項(xiàng)目實(shí)現(xiàn)版本快照功能示例詳解

    這篇文章主要為大家介紹了vue多頁面項(xiàng)目實(shí)現(xiàn)版本快照功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證功能

    vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-09-09
  • Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁面

    Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁面

    這篇文章主要介紹了Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁面方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • Vue集成百度地圖實(shí)現(xiàn)位置選擇功能

    Vue集成百度地圖實(shí)現(xiàn)位置選擇功能

    由于添加門店時(shí),需要選擇門店的省、市、區(qū)、詳細(xì)地址、以及門店的經(jīng)緯度信息,本文給大家分享Vue集成百度地圖實(shí)現(xiàn)位置選擇功能,感興趣的朋友一起看看吧
    2022-06-06
  • vue-drawer-layout實(shí)現(xiàn)手勢滑出菜單欄

    vue-drawer-layout實(shí)現(xiàn)手勢滑出菜單欄

    這篇文章主要為大家詳細(xì)介紹了vue-drawer-layout實(shí)現(xiàn)手勢滑出菜單欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • vue中axios的post請(qǐng)求,415錯(cuò)誤的問題

    vue中axios的post請(qǐng)求,415錯(cuò)誤的問題

    這篇文章主要介紹了vue中axios的post請(qǐng)求,415錯(cuò)誤的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • 在Vue項(xiàng)目中,防止頁面被縮放和放大示例

    在Vue項(xiàng)目中,防止頁面被縮放和放大示例

    今天小編就為大家分享一篇在Vue項(xiàng)目中,防止頁面被縮放和放大示例,具有很好的參考 價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • 一篇文章看懂Vue組合式API

    一篇文章看懂Vue組合式API

    眾所周知組合式API是一系列API的集合,使我們可以使用函數(shù)而不是聲明選項(xiàng)的方式書寫Vue組件,這篇文章主要給大家介紹了關(guān)于Vue組合式API的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-04-04
  • Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例

    Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例

    這篇文章主要為大家詳細(xì)介紹了Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • Vue路由的懶加載深入詳解

    Vue路由的懶加載深入詳解

    這篇文章主要介紹了vue-router路由懶加載及實(shí)現(xiàn)方式,路由懶加載的主要作用是將?路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊,只有在這個(gè)路由被訪問到的時(shí)候,才會(huì)加載對(duì)應(yīng)組件的代碼塊,需要的朋友可以參考下
    2022-12-12

最新評(píng)論