v-chars初始与设置调整

一， v-charts简介

官方文档：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)

})

settings  配置项

配置项  简介 

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 }]