v-chars初始与设置调整

官方文档：https://v-charts.js.org/#/

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 V-Charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

v-charts 已经处理了关于echarts依赖引入的问题，保证所使用的图表，都是最小的文件。

npm安装

npm i v-charts -S

引入v-charts

完整引入

//main.js

import Vue from 'vue'

import VCharts from 'v-charts'

import App from './App.vue'

Vue.use(VCharts)

new Vue({

el:'#app',

render:h=>h(App)

})

按需引入

V-Charts的每种图表组件，都单独打包到lib文件夹下，以下为案例

|- lib/

|- line.js  -------------- 折线图

|- bar.js  --------------- 条形图

|- histogram.js  --------- 柱状图

|- pie.js  --------------- 饼图

|- ring.js  -------------- 环图

|- funnel.js  ------------ 漏斗图

|- waterfall.js  --------- 瀑布图

|- radar.js  ------------- 雷达图

|- map.js  --------------- 地图

|- bmap.js  -------------- 百度地图

使用时，可以直接将单个图表引入到项目中,对应上面图表看自己的项目需求

//main.js

import Vue from 'vue'

import VeLine from 'v-charts/lib/line'

import App from './App.vue'

Vue.component(VeLine.name,VeLine)

new Vue({

el: '#app',

render:h=>h(App)

})

配置项  简介

xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [ { type : 'category', // type:坐标轴类型。 // [ default: 'category' ] /*可选： 1.'value' 数值轴，适用于连续数据； 2.'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据； 3.'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度； 4.'log' 对数轴。适用于对数数据。*/ data : ['上海','北京'], //x轴下面的数据 axisTick: { show: false, //是否显示网状线 默认为true alignWithLabel: true }, //用于设置x下面的字体 axisLabel:{ show:true, //这里的show用于设置是否显示x轴下的字体 默认为true 　　　　　　　interval:0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。 　　 　　　　　　　textStyle:{ //textStyle里面写x轴下的字体的样式 color:'#333', fontSize:13 } }, axisLine:{ show:true, //这里的show用于设置是否显示x轴那一条线 默认为true lineStyle:{ //lineStyle里面写x轴那一条线的样式 color:'#6FC6F3', width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏 } } }, ] yAxis属性代表echarts图表的y轴，样式设置方式与x轴的方式是一样，就是设置的属性会有所差异 yAxis:[{ 2 min:0, //y轴的最小值 3 max:100, //y轴最大值 4 interval:20, //值之间的间隔 5 //上面的三个值可以根据自己需求随意设置 不设置时会根据图中的值自动生成相应的值 6 7 type:'value', 8 /* type坐标轴类型:[ default: 'value' ] 　　　　可选：1.'value' 数值轴，适用于连续数据。 　　　　2.'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 3.'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 4.'log' 对数轴。适用于对数数据。*/ 9 splitLine:{show:false}, //去除网状线 默认为true 10 //用于设置y轴的字体 11 axisLabel:{ 12 show:true, //这里的show用于设置是否显示y轴下的字体 默认为true 13 textStyle:{ //textStyle里面写y轴下的字体的样式 14 color:'#333', 15 fontSize:13 16 } 17 }, 18 //用于设置y轴的那一条线 19 axisLine:{ 20 show:true, //这里的show用于设置是否显示y轴那一条线 默认为true 21 lineStyle:{ //lineStyle里面写y轴那一条线的样式 22 color:'#6FC6F3', 23 width:2, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏 24 } 25 } 26 }]

GitHub 容器

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。