一， v-charts简介

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

小七经常在，各种各样的管理系统的首页，都会看到各种图标，折线、曲线、饼图等。最最开始的时候小七还是自己画这样的HTML， 时间不眨眼，现在都有现成的，实在是太方便了。 

二， npm 安装

npm i v-charts echarts -S

按照版本安装: 

npm i v-charts echarts@4.9.0 -S

yarn add v-charts echarts@4.9.0

二， 引用

1、全局引用

// 在 main.js中全局引用
import VCharts from 'v-charts'
Vue.use(VCharts)

2、按需引用

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 VeLine from 'v-charts/lib/line'
Vue.component(VeLine.name,VeLine)

三、使用

1、折线图

<ve-line :data="countData" :legend-visible="false" :settings="chartSettings"></ve-line>

<script>
data: {
  return: {
    chartSettings: {
    xAxisType: "time",
    area: false, // 是否对折线下面进行颜色填充
    axisSite: {left: ["orderCount"]}, // left：为左边要显示的数据，right：为右边要显示的数据。数据要一致。
    labelMap: {orderCount: "订单数量"} // 订单数量前面的变量要和axisSite 里面的变量相对应，这样鼠标经过时才会显示 ‘订单数量’
    },
    countData: {
    // columns 里面放的是要展示的数据
    columns: ["dateTime","orderCount","totalAmount","totalShareAmount","netProfit"],
    // 写入数据的地方
    rows: [{ date: "2018-11-01", orderCount: 10, totalAmount: 1093, netProfit: 100, totalShareAmount: 50 }]
    },
   loading: false,
   dataEmpty: false
 }
}
</script>

折线图如下：

2、地图

<template>
<div class="page-line-chart">
<h4>地图</h4>
<ve-map :data="chartData"></ve-map>
</div>
</template>

<script>
export default {
data() {
return {
chartData: {
columns: ['位置', '税收', '人口', '面积'],
rows: [
{ '位置': '吉林', '税收': 123, '人口': 123, '面积': 92134 },
{ '位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234 },
{ '位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234 },
{ '位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234 }
]
}
};
}
};
</script>

3、柱状图

<ve-histogram :data="countData" :legend-visible="false" :settings="chartSettings"></ve-histogram>

4、饼状图

<ve-pie :data="countData" :legend-visible="false" :settings="chartSettings"></ve-pie>

更多的事例详细请看 ：在线 的展示

https://codesandbox.io/s/v-charts-demo-forked-hjlft?file=/src/pages/hook.vue

四、格式

还有参考的地址：

https://v-charts.js.org/

折线图举例 ：

settings 配置项

说明，各种参数的使用说明，详细查看 https://v-charts.js.org/ 参考地址。 

备注1. axisSite 可以设置 left 和 right，例如示例所示 axisSite: { right: ['占比'] } 即将占比的数据置于右轴上。

备注2. stack 用于将两数据堆叠起来，例如实例中所示stack: { '销售额': ['成本', '利润'] } 即将'成本', '利润'相应的数据堆叠在一起。

备注3. min和max的值可以直接设置为数字，例如：[100, 300]；也可以设置为['dataMin', 'dataMin'], ['dataMax', 'dataMax']，此时表示使用该坐标轴上的最小值或最大值为最小或最大刻度。

小七学习心得：

热爱且目标明确，坚持不懈，经常温习。 

好记性不如烂笔头，经常看，写代码总是没错的

我是小七

需要域名

记得找小七

喜欢的记得收藏

喜欢记得转发

谢谢关注小七

长按识别二维码更多精彩

代开微信公众号

代写文章

代开流量主

微信公众号运维

软件开发

软件制作

有需要找小七