餐饮门户网站源码,外国扁平化网站,自学电商运营教程,辽宁省城乡和住房建设厅网站最近要做一个大屏 没有使用echarts 使用了更适合vue封装的v-charts组件库#xff0c;第一次使用 期间踩了不少坑#xff0c;记录下来和大家分享一下。废话不多说 开始搞起来#xff01;一、安装 引入什么的大家自行百度 百度一下#xff0c;你就知道www.baidu.com二、2.1…最近要做一个大屏 没有使用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 :datachartData/ve-line
2.2 组件库引入之后参数设置完成 第一次进来 图不会显示 当页面宽高发生改变的时候 图才能显示出来 这边有两种解决方式 。 2.2.1.应用v-charts官网的一句话 就是 “在一个初始宽度未知的容器内绘制图表时因为无法获取宽度所以图表会绘制失败解决的办法是在容器宽度已知后 调用echarts的resize方法。”template !-- [_ https://cdn.jsdelivr.net/npm/element-ui1.4.0/lib/index.js,https://cdn.jsdelivr.net/npm/element-ui1.4.0/lib/theme-default/index.css _] --el-tabs typeborder-card v-modelactiveNameel-tab-pane label用户管理 name1 !-- name 中的数字对应chart的ref --ve-line :datachartData refchart1/ve-line/el-tab-paneel-tab-pane label配置管理 name2ve-line :datachartData refchart2/ve-line/el-tab-pane /el-tabs
/templatescriptexport 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()})}}}
/script2.2.2 第二种方式就是在标签上设置固定的宽度 比较简单实用 宽度的话我一般设置为父级宽度的100%ve-linestylewidth: 100%;:height11vh:settingsinandoutcount.chartSettings:colorsinandoutcount.chartData.colors:judge-heighttrue:datainandoutcount.chartData:extendinandoutcount.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,12,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:height9.5vh:extendsex.extend:settingssex.chartSettings:judge-heighttrue:datasex.chartData/ve-bar欢乐的时光总是短暂的 我要学da习(you)了(xi) 总结就暂时先这样 菜鸟第一次用 第一次写 瑕疵很多 希望大家留言指出 一定虚心学习。拜拜了您
