最近要做一个大屏 没有使用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.org3.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) 总结就暂时先这样 菜鸟第一次用 第一次写 瑕疵很多 希望大家留言指出 一定虚心学习。
拜拜了您！！！
