最近要做一個大屏 沒有使用echarts 使用了更適合vue封裝的v-charts組件庫，第一次使用 期間踩了不少坑，記錄下來和大家分享一下。

廢話不多說 開始搞起來！

一、安裝 引入什么的大家自行百度

百度一下，你就知道?www.baidu.com

二、

2.1 echarts 支持按需引入 每種圖表組件，都已經(jīng)單獨(dú)打包到lib文件夾下了 大家可以根據(jù)需要單獨(dú)在項(xiàng)目中引入

import Vue from "vue"; import VeLine from "v-charts/lib/line.common"; // 柱狀圖 import VeHistogram from "v-charts/lib/histogram.common"; // 圓環(huán) import VeRing from "v-charts/lib/ring.common"; import VeBar from "v-charts/lib/bar.common"; // import VeBmap from "v-charts/lib/bmap.common"; //餅狀圖 import VePie from "v-charts/lib/pie.common"; //注冊全局組件 Vue.component(VeLine.name, VeLine); Vue.component(VeHistogram.name, VeHistogram); Vue.component(VeRing.name, VeRing); Vue.component(VeBar.name, VeBar);//項(xiàng)目中使用<ve-line :data="chartData"></ve-line>

2.2 組件庫引入之后參數(shù)設(shè)置完成 第一次進(jìn)來 圖不會顯示 當(dāng)頁面寬高發(fā)生改變的時候 圖才能顯示出來 這邊有兩種解決方式 。

2.2.1.應(yīng)用v-charts官網(wǎng)的一句話 就是 “在一個初始寬度未知的容器內(nèi)繪制圖表時，因?yàn)闊o法獲取寬度，所以圖表會繪制失敗，解決的辦法是在容器寬度已知后， 調(diào)用echarts的resize方法。”

<template> <!-- [_ https://cdn.jsdelivr.net/npm/element-ui@1.4.0/lib/index.js,https://cdn.jsdelivr.net/npm/element-ui@1.4.0/lib/theme-default/index.css _] --><el-tabs type="border-card" v-model="activeName"><el-tab-pane label="用戶管理" name="1"> <!-- name 中的數(shù)字對應(yīng)chart的ref --><ve-line :data="chartData" ref="chart1"></ve-line></el-tab-pane><el-tab-pane label="配置管理" name="2"><ve-line :data="chartData" ref="chart2"></ve-line></el-tab-pane> </el-tabs> </template><script>export default {data () {return {activeName: '1',chartData: {columns: ['日期', '銷售額-1季度'],rows: [{ '日期': '1月1日', '銷售額-1季度': 1523 },{ '日期': '1月2日', '銷售額-1季度': 1223 },{ '日期': '1月3日', '銷售額-1季度': 2123 },]}}}, //監(jiān)聽尺寸的變化watch: {activeName (v) {this.$nextTick(_ => {this.$refs[`chart${v}`].echarts.resize()})}}} </script>

2.2.2 第二種方式就是在標(biāo)簽上設(shè)置固定的寬度 比較簡單實(shí)用 寬度的話我一般設(shè)置為父級寬度的100%

<ve-linestyle="width: 100%;":height="'11vh'":settings="inandoutcount.chartSettings":colors="inandoutcount.chartData.colors":judge-height="true":data="inandoutcount.chartData":extend="inandoutcount.extend"></ve-line>

2.2.3 圖例太多 寬度有限的情況下 我采用了左右滾動的方式來點(diǎn)擊圖例 圖例的設(shè)置都是在legend對象中配置的

效果圖

legend: {type: "scroll", //設(shè)置為滾動類型pageIconColor: '#6495ed', //翻頁下一頁的三角按鈕顏色 pageIconInactiveColor: '#aaa', //翻頁（即翻頁到頭時）pageIconSize: 10, //翻頁按鈕大小pageFormatter: '', //隱藏翻頁的數(shù)字pageButtonItemGap: -8, // 翻頁按鈕的兩個之間的間距tooltip: {show: false}, //隱藏legend文字的不顯示，開啟true itemWidth: 8,itemHeight: 8,show: true,textStyle: {color: "#FFFFFF",},itemGap: 3,fontSize: 8,x: "center", //可設(shè)定圖例在左、右、居中y: "bottom", //可設(shè)定圖例在上、下、居中padding: [0, 5, 15, 25], //可設(shè)定圖例[距上方距離，距右方距離，距下方距離，距左方距離]},

三、

3.1 折線圖

修改折線圖的圖例為自定義圖片 折線圖上面的拐點(diǎn)樣式

//引入自定義圖片 import entryLegend from "../../../../public/static/images/22.png" //圖例樣式 import entry from "../../../../public/static/images/19.png" //拐點(diǎn)樣式//在legend屬性中修改樣式 legend: {show: true,//是否顯示圖例textStyle: {color: "#FFFFFF",},itemGap: 8,//每個圖例的間隔itemWidth: 10,itemHeight: 10,icon: "rect",x: "center", //可設(shè)定圖例在左、右、居中y: "bottom", //可設(shè)定圖例在上、下、居中padding: [0, 0, 0, 0], //可設(shè)定圖例[距上方距離，距右方距離，距下方距離，距左方距離]//data用來設(shè)置圖例中的樣式 name的值必須和chartData中的值相同data: [{name: "進(jìn)出人次",icon: "react"},{name: "進(jìn)入人數(shù)",icon: `image://${entryLegend}` //自定義圖例},{name: "離開人數(shù)",icon: `image://${outLegend}` //自定義圖例}],},

3.2 柱狀圖

柱狀圖的漸變效果 分為單個柱狀圖漸變 和多個柱狀圖 多個顏色漸變 主要通過series來控制每個柱狀圖 series：{} 代表著所有的柱狀圖 如果要單個控制 就需要 "series.0.itemStyle":{},用 0、1、2、3 來代表要控制的哪一個柱狀圖 0,1，2,3，就是chartData中所對應(yīng)的數(shù)據(jù)的下標(biāo)

下面代碼兩種寫法都可以

"series.0.itemStyle": {normal: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(98,249,208,1)", // 100% 處的顏色},{offset: 1,color: "rgba(98,249,208,0.1)", // 0% 處的顏色},],global: false, // 缺省為 false},},},"series.1.color": {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(255,97,89,1)", // 100% 處的顏色},{offset: 1,color: "rgba(255,97,89,0.1)", // 0% 處的顏色},],global: false, // 缺省為 false},

3.3 環(huán)形圖

好像沒什么好說的 文檔上面都要寫的聽清楚的 使用的時候看著文檔來的 忘記的再進(jìn)去復(fù)習(xí)一下

v-charts?v-charts.js.org

3.4 膠囊圖 暫且這樣命名吧

先看效果

百度了之后發(fā)現(xiàn)只有在阿里的組件庫上看到了 沒有打算再引一個組件庫 所以就用v-charts的條形圖做基礎(chǔ) 做了一個膠囊圖

let sex = {extend: {color: ["#FCAE00", "#2D7EFD"],//膠囊圖的顏色legend: {itemWidth: 8,itemHeight: 8,show: true,textStyle: {color: "#FFFFFF",},fontSize: 8,x: "center", //可設(shè)定圖例在左、右、居中y: "bottom", //可設(shè)定圖例在上、下、居中padding: [0, 0, 15, 0], //可設(shè)定圖例[距上方距離，距右方距離，距下方距離，距左方距離]},"series.0.itemStyle": {normal: {barBorderRadius: [10, 0, 0, 10, ]//兩頭扁圓形狀}},"series.1.itemStyle": {normal: {barBorderRadius: [0, 10, 10, 0, ] //兩頭扁圓形狀}},series: {barGap: 0,symbol: "none",smooth: false,barWidth: 16, },grid: {top: "5%",bootom: "5%",left: "15%",right: "5%",height: "80%",}, xAxis: {show: false,//隱藏掉橫坐標(biāo)axisLine: {show: false,lineStyle: {color: "#fff",},},axisLabel: {color: "#fff",},boundaryGap: [0, 0.01]},yAxis: {axisLine: {show: false, //隱藏掉縱坐標(biāo)lineStyle: {color: "#fff",},},axisLabel: {color: "rgba(45, 126, 253, 1)",fontSize: 10,show: false},splitLine: {lineStyle: {color: "#FFFFFF",opacity: 0.2,},},}, },chartSettings: {stack: {'得得得': ['男性', '女性', ]},},chartData: {columns: ['類型', '男性', '女性', ],rows: [{'類型': '常住居民','男性': 393,'女性': 93, }, ]} };

在組件中使用 就ok了

<ve-bar:height="'9.5vh'":extend="sex.extend":settings="sex.chartSettings":judge-height="true":data="sex.chartData"></ve-bar>

歡樂的時光總是短暫的 我要學(xué)（da）習(xí)(you)了(xi) 總結(jié)就暫時先這樣 菜鳥第一次用 第一次寫 瑕疵很多 希望大家留言指出 一定虛心學(xué)習(xí)。

拜拜了您！！！

總結(jié)

以上是生活随笔為你收集整理的charts引入icon图片_v-charts 踩坑之路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。