charts引入icon图片_v-charts 踩坑之路

最近要做一个大屏没有使用echarts 使用了更适合vue封装的v-charts组件库，第一次使用期间踩了不少坑，记录下来和大家分享一下。

废话不多说开始搞起来！

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

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

二、

2.1 echarts 支持按需引入每种图表组件，都已经单独打包到lib文件夹下了大家可以根据需要单独在项目中引入

import Vue from "vue";
import VeLine from "v-charts/lib/line.common";
// 柱状图
import VeHistogram from "v-charts/lib/histogram.common";
// 圆环
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);//项目中使用<ve-line :data="chartData"></ve-line>

2.2 组件库引入之后参数设置完成第一次进来图不会显示当页面宽高发生改变的时候图才能显示出来这边有两种解决方式。

2.2.1.应用v-charts官网的一句话就是 “在一个初始宽度未知的容器内绘制图表时，因为无法获取宽度，所以图表会绘制失败，解决的办法是在容器宽度已知后，调用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 中的数字对应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 },]}}},
//监听尺寸的变化watch: {activeName (v) {this.$nextTick(_ => {this.$refs[`chart${v}`].echarts.resize()})}}}
</script>

2.2.2 第二种方式就是在标签上设置固定的宽度比较简单实用宽度的话我一般设置为父级宽度的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 图例太多宽度有限的情况下我采用了左右滚动的方式来点击图例图例的设置都是在legend对象中配置的

效果图

 legend: {type: "scroll",  //设置为滚动类型pageIconColor: '#6495ed', //翻页下一页的三角按钮颜色 pageIconInactiveColor: '#aaa', //翻页（即翻页到头时）pageIconSize: 10, //翻页按钮大小pageFormatter: '', //隐藏翻页的数字pageButtonItemGap: -8, // 翻页按钮的两个之间的间距tooltip: {show: false}, //隐藏legend文字的不显示，开启true itemWidth: 8,itemHeight: 8,show: true,textStyle: {color: "#FFFFFF",},itemGap: 3,fontSize: 8,x: "center", //可设定图例在左、右、居中y: "bottom", //可设定图例在上、下、居中padding: [0, 5, 15, 25], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]},

三、

3.1 折线图

修改折线图的图例为自定义图片折线图上面的拐点样式

//引入自定义图片
import entryLegend from "../../../../public/static/images/22.png"  //图例样式
import entry from "../../../../public/static/images/19.png"  //拐点样式//在legend属性中修改样式
legend: {show: true,//是否显示图例textStyle: {color: "#FFFFFF",},itemGap: 8,//每个图例的间隔itemWidth: 10,itemHeight: 10,icon: "rect",x: "center", //可设定图例在左、右、居中y: "bottom", //可设定图例在上、下、居中padding: [0, 0, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]//data用来设置图例中的样式  name的值必须和chartData中的值相同data: [{name: "进出人次",icon: "react"},{name: "进入人数",icon: `image://${entryLegend}`  //自定义图例},{name: "离开人数",icon: `image://${outLegend}`  //自定义图例}],},

3.2 柱状图

柱状图的渐变效果分为单个柱状图渐变和多个柱状图多个颜色渐变主要通过series来控制每个柱状图 series：{} 代表着所有的柱状图如果要单个控制就需要 "series.0.itemStyle":{},用 0、1、2、3 来代表要控制的哪一个柱状图 0,1，2,3，就是chartData中所对应的数据的下标

下面代码两种写法都可以

 "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 环形图

好像没什么好说的文档上面都要写的听清楚的使用的时候看着文档来的忘记的再进去复习一下

v-chartsv-charts.js.org

3.4 胶囊图暂且这样命名吧

先看效果

百度了之后发现只有在阿里的组件库上看到了没有打算再引一个组件库所以就用v-charts的条形图做基础做了一个胶囊图

let sex = {extend: {color: ["#FCAE00", "#2D7EFD"],//胶囊图的颜色legend: {itemWidth: 8,itemHeight: 8,show: true,textStyle: {color: "#FFFFFF",},fontSize: 8,x: "center", //可设定图例在左、右、居中y: "bottom", //可设定图例在上、下、居中padding: [0, 0, 15, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]},"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,//隐藏掉横坐标axisLine: {show: false,lineStyle: {color: "#fff",},},axisLabel: {color: "#fff",},boundaryGap: [0, 0.01]},yAxis: {axisLine: {show: false,  //隐藏掉纵坐标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>

欢乐的时光总是短暂的我要学（da）习(you)了(xi) 总结就暂时先这样菜鸟第一次用第一次写瑕疵很多希望大家留言指出一定虚心学习。

拜拜了您！！！