vue項(xiàng)目中vue-echarts講解及常用圖表實(shí)現(xiàn)方案(推薦)

更新時(shí)間：2022年09月17日 08:34:05 作者：小圣賢君

這篇文章主要介紹了vue項(xiàng)目中vue-echarts講解及常用圖表方案實(shí)現(xiàn),主要針對(duì)代碼示例中的內(nèi)容進(jìn)行問(wèn)題講解，詳細(xì)代碼在文章中給大家提到，需要的朋友可以參考下

圖表類(lèi)的項(xiàng)目操作一般常見(jiàn)于管理平臺(tái)系統(tǒng)，移動(dòng)端項(xiàng)目中并不是特別常見(jiàn)，不常見(jiàn)不代表沒(méi)有，在一些商城類(lèi)應(yīng)用中，商家需要看到商品的銷(xiāo)量分析，盈利分析等，就需要用到圖標(biāo)，比較常用的圖標(biāo)庫(kù)，像百度的ECHARTS，螞蟻金服的AntV都是不錯(cuò)的圖標(biāo)庫(kù)，感興趣的讀者可以直接到他們的官網(wǎng)閱讀相關(guān)的資料，筆者這里不做優(yōu)劣說(shuō)明，主要針對(duì)vue-echarts的一些圖表方案進(jìn)行講解。
vue-echarts是基于echarts封裝實(shí)現(xiàn)的一個(gè)組件庫(kù)，直接按照正常的組件引用方式，安裝引用即可，具體的安裝和引用讀者可以直接閱讀vue-echarts技術(shù)文檔。
在使用過(guò)程中，有開(kāi)發(fā)人員可能會(huì)碰到這種問(wèn)題，命名將bar或者line引入進(jìn)來(lái)了，但是圖標(biāo)上還是有有部分內(nèi)容沒(méi)有顯示出來(lái)，造成這種現(xiàn)象的原因，是因?yàn)槟銢](méi)有將對(duì)應(yīng)的組件引入，詳情可參考vue-echarts demo內(nèi)容，下面給出簡(jiǎn)單引用示例：

import ECharts from "vue-echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import "echarts/lib/component/markPoint";
import "echarts/lib/component/markLine";
import "echarts/lib/component/graphic";

這篇文章主要針對(duì)以下示例中的內(nèi)容進(jìn)行問(wèn)題講解，如果你碰到的問(wèn)題不在以下圖表內(nèi)，沒(méi)興趣就不要浪費(fèi)時(shí)間往下看了：

1.圖表主題顏色的修改

echarts中有三種常見(jiàn)主題類(lèi)型: default, light, dark，讀者沒(méi)有太大的顏色要求的話，可以直接修改theme。
示例如下：

<v-chart :options="barOptions" autoresize theme="light"></v-chart>

柱狀圖顏色的修改可以在options參數(shù)中直接添加color數(shù)組，如下示例：

options:{
	...
	color: ["#64CDF0", "#F5686F"],
	...
}

另外可參考官方示例，直接添加theme.json文件。

2.XY軸體顏色和文本顏色修改

x軸的樣式修改可以在xAxis配置參數(shù)中進(jìn)行設(shè)置，y軸在yAxis中進(jìn)行配置，可以修改軸線的顏色，文本的顏色大小，圖標(biāo)內(nèi)分割線的顏色等，詳細(xì)的參數(shù)設(shè)置可以參考配置文檔，下面給出示例：

options: {
	...
	xAxis: [
          {
            type: "category",
            data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            // 修改文本的顏色
            axisLabel: {
              color: "#BB3137",
              fontSize: 10
            },
            // 修改軸線的顏色
            axisLine: {
              lineStyle: {
                color: "#BB3137"
              }
            }
          }
        ],
 	yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#BB3137",
              fontSize: 10
            },
            // 修改y軸橫向分割線的顏色
            splitLine: {
              lineStyle: {
                color: ["#FFC9CB"]
              }
            },
            axisLine: {
              lineStyle: {
                color: "#BB3137"
              }
            }
          }
        ], 
   ...
}

3.橫向柱狀圖的顯示

在配置xAxis和yAxis的時(shí)候，第一個(gè)參數(shù)就是type，這個(gè)參數(shù)用于說(shuō)明該軸的類(lèi)型，當(dāng)x的type為value，y的type為category的時(shí)候，柱狀圖就會(huì)顯示成橫向柱狀圖。

4.過(guò)濾xy軸文本內(nèi)容

上圖二中，如果沒(méi)有做任何處理，x軸會(huì)顯示20000,40000…這種類(lèi)型，這樣顯示內(nèi)容較長(zhǎng)，不太友好，那么怎么改成上述那種顯示呢？
xy軸文本的配置項(xiàng)中，都有formatter這一配置項(xiàng)，直接在這里進(jìn)行修改就可以，示例如下：

xAxis: [
          {
            type: "value",
            axisLabel: {
              fontSize: 10,
              formatter: function(value, index) {
                return parseInt(value / 10000) + "萬(wàn)";
              }
            }
          }
        ],

5.Y軸文本顯示在軸線內(nèi)

刻度標(biāo)簽?zāi)J(rèn)是顯示在刻度線左側(cè)，如果想要顯示在右側(cè)，需要將inside設(shè)置為true即可，當(dāng)進(jìn)行此設(shè)置后，刻度標(biāo)簽可能會(huì)被柱狀圖覆蓋掉，這時(shí)候，還需要設(shè)置zlevel，示例如下：

            inverse: true,
            axisLabel: {
              fontSize: 10,
              inside: true,
              interval: 0
            },
            zlevel: 1

inverse是用來(lái)顯示是否翻轉(zhuǎn)刻度線上的內(nèi)容，即默認(rèn)從上往下是321顯示，如果你不想這樣顯示，將inverse設(shè)為true，就會(huì)按照123方式顯示。

6.在柱狀條頭部添加標(biāo)簽內(nèi)容

在series中添加label標(biāo)簽即可，可以在此標(biāo)簽內(nèi)進(jìn)行文本內(nèi)容的顏色，位置，內(nèi)容等的設(shè)置，如下示例：

series: [
          {
            name: "直接訪問(wèn)",
            type: "bar",
            barWidth: "40%",
            label: {
              show: true,
              position: "right",
              color: "#3D383A",
              formatter: "￥{c}"
            },
            data: [28540, 33534, 9390, 80330, 37220]
          }
        ]

7.自定義圖例修改

如上圖所示，我想要自定義設(shè)置圖例中的文本內(nèi)容，讓圖例文本可以換行顯示，并且大小顏色可以任意設(shè)置，這該如何設(shè)置呢？
雖然樣式顯示并不復(fù)雜，但是想在echarts中實(shí)現(xiàn)，卻是有些麻煩，formatter支持函數(shù)自定義修改，我們可以通過(guò)此方法來(lái)進(jìn)行設(shè)置，將想要顯示的內(nèi)容數(shù)據(jù)設(shè)置成全局變量，然后在此方法中進(jìn)行操作修改，所有的設(shè)置均在legend參數(shù)中進(jìn)行配置。
默認(rèn)的圖例是個(gè)方形，如果想要改成圓形，可以將icon設(shè)置成circle，即可將圖例設(shè)置成原型，大小可以通過(guò)itemWidth和itemHeight來(lái)設(shè)置。
示例如下：

legend: {
          icon: "circle", // 將圖例設(shè)置成原型
          bottom: 0,
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          // itemGap: 10,
          formatter: name => {
            let data = pieData; // 全局變量
            let value = "";
            let price = "";
            for (let i = 0; i < data.length; i++) {
              if (data[i].name == name) {
                value = data[i].value;
                price = data[i].price;
              }
            }
            let arr = [
              "{a|" + name + " " + value + "%}",
              "{b|￥" + price + "}"
            ];
            return arr.join("\n");
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                width: 100,
                align: "left"
              },
              b: {
                width: 100,
                fontSize: 14,
                align: "left",
                lineHeight: 20,
                padding: [0, 0, 5, 0]
              }
            }
          },
          data: ["一季度", "二季度", "三季度", "四季度"]
        },

var pieData = [
  { value: 28, name: "一季度", price: 108626.0 },
  { value: 24, name: "二季度", price: 93108.0 },
  { value: 19, name: "三季度", price: 73710.0 },
  { value: 29, name: "四季度", price: 112506.0 }
];

8.環(huán)比圖中間顯示內(nèi)容

官方示例中并沒(méi)有給出環(huán)比圖中間顯示自定義圖文的內(nèi)示例，有個(gè)示例是，點(diǎn)擊圓環(huán)內(nèi)容，中間顯示點(diǎn)擊區(qū)域?qū)?yīng)的內(nèi)容名稱(chēng)，這個(gè)太過(guò)簡(jiǎn)單，并不能滿(mǎn)足自定義中間區(qū)域圖文的要求，想要實(shí)現(xiàn)這種要求，就需要用到graphic，在使用時(shí)需要單獨(dú)引用出來(lái)，否則會(huì)報(bào)錯(cuò)，這是一個(gè)原生圖形元素組件支持image，text，circle等元素。
使用示例如下：

options: {
	...
	graphic: {
          type: "group",
          top: "middle",
          left: "center",
          height: 80,
          children: [
            {
              type: "text",
              left: "center",
              top: "30%",
              style: {
                text: "全年總業(yè)績(jī)",
                textAlign: "center",
                textVerticaAlign: "middle",
                fill: "#999",
                font: "15px 'Helvetica',sans-serif"
              }
            },
            {
              type: "text",
              top: "60%",
              left: "center",
              position: [0, 10],
              style: {
                text: "9912322.00",
                textAlign: "center",
                textVerticaAlign: "middle",
                fill: "#3d383a",
                font: "22px 'Helvetica',sans-serif"
              }
            }
          ]
        },
   ...
}

vue-echarts的圖標(biāo)的使用和echarts并沒(méi)有太大的區(qū)別，官方文檔中的說(shuō)明配置項(xiàng)比較多，重點(diǎn)是能夠理解那些配置項(xiàng)，基本就可以滿(mǎn)足大部分要求。

到此這篇關(guān)于vue項(xiàng)目中vue-echarts講解及常用圖表方案實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue常用圖表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: