vue项目使用v-charts的柱形图的各种样式和数据配置
时间:2020-01-09
本文章向大家介绍vue项目使用v-charts的柱形图的各种样式和数据配置,主要包括vue项目使用v-charts的柱形图的各种样式和数据配置使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
找了很多网上关于v-charts的柱形图使用,我发现我一模一样的配置就是没有效果,原来是因为我是按需引入的,
import VeHistogram from 'v-charts/lib/histogram';
Vue.component(VeHistogram.name, VeHistogram);
搞了半天,就grid的背景起了作用,后来改成了全部引入,才改得了e-charts官方配置文档的那些参数,因为没时间了,按需引入后面再搞回来,
import vCharts from 'v-charts';
Vue.use(vCharts);
v-charts文档:https://v-charts.js.org/#/histogram ,
e-charts官网文档地址:https://www.echartsjs.com/zh/option.html#dataZoom-inside.startValue ,
先来个配置完的效果图:
下面是我的页面的具体代码及配置:
//html部分 <ve-histogram class="myve" :data="chartData" :settings="vchartsConfig.setting" :extend="vchartsConfig.extend" ></ve-histogram> //js部分 data() { return { // v-charts配置参数 vchartsConfig: { setting:{ // 别称 labelMap: { 'area': '地区', 'count': '拓展数', }, }, extend: { title:{ show:false, text:'实时数据', subtext:'各城市对应的拓展', // textAlign:'center', }, // 图标顶部的标题及按钮 legend:{ show:false, }, // backgroundColor:'red',//整个组件的背景颜色 //X轴线 xAxis: { // name: "地区", type:'category', show:true, // 坐标轴轴线 axisLine:{ show:false, }, // 坐标轴刻度 axisTick:{ show:false, }, // 坐标轴每项的文字 axisLabel:{ showMaxLabel:true, showMinLabel:true, color:'#3a3a3a', rotate:0, //刻度文字旋转,防止文字过多不显示 margin:8,//文字离x轴的距离 boundaryGap:true, // backgroundColor:'#0f0', formatter:(v)=>{ // console.log('x--v',v) if(v.length>3){ return v.substring(0,3)+'...' } return v }, }, // X轴下面的刻度小竖线 axisTick:{ show:false, alignWithLabel:true,//axisLabel.boundaryGap=true时有效 interval:0, length:4,//长度 }, // x轴对应的竖线 splitLine: { show: false, interval: 0, lineStyle:{ color:'red', backgroundColor:'red', } } }, yAxis: { show:true, offset:0, // 坐标轴轴线 axisLine:{ show:false, }, // x轴对应的竖线 splitLine: { show: false, }, // 坐标轴刻度 axisTick:{ show:false, }, boundaryGap:false, axisLabel:{ color:'#3a3a3a', }, }, // 滚动组件参数 dataZoom:[ { type: 'inside', show: true, xAxisIndex: [0], startValue: 0, endValue: 4, zoomLock:true, } ], // 柱形区域 grid: { show: true, backgroundColor: "#FFF6F3", borderColor: "#FFF6F3", // containLabel:false, }, // 每个柱子 series(v) { // console.log("v", v); // 设置柱子的样式 v.forEach(i => { console.log("series", i); i.barWidth = 20; i.itemStyle={ barBorderRadius:[10,10,10,10], color:'#FF6633', borderWidth:0, }; i.label={ color:'#666', fontSize:'0.24rem', show:true, position:'top', // backgroundColor:'yellow', }; }); return v; }, } }, // v-chats列表数据 chartData: { columns: ["area", "count"], rows: [ { "area": "广州市", "count": 20 }, { "area": "战狼3", "count": 30 }, { "area": "2222", "count": 12 }, { "area": "3333", "count": 42 }, ], }, }; },
原文地址:https://www.cnblogs.com/itpyy/p/12171905.html
- 深入剖析ASP.NET的编译原理之一:动态编译(Dynamical Compilation)
- 域名quco.com近10万元被交易
- Silverlight本地化
- Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs
- Silverlight本地化
- Silverlight 3 创建一个简单的Behavior
- Nodejs学习笔记(六)--- Node.js + Express 构建网站预备知识
- Silverlight 3.0 中的 Local Connection
- 学习Spark——那些让你精疲力尽的坑
- 学习Spark——那些让你精疲力尽的坑
- Silverlight 3.0 中的 WriteableBitmap
- WCF后续之旅(10): 通过WCF Extension实现以对象池的方式创建Service Instance
- Silverlight菜单控件 — CurveMenu
- 实力终端撑腰 两枚域名均五位数被秒
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法