介绍
简单讲讲，echars和v-charts都是图形展示用的，
echars功能强大，功能丰富，
v-charts基于 Vue2.0 和 echarts 封装的 V-Charts 图表组件。
总的来说就是就是
Echarts功能强大且丰富，但数据转换很麻烦。
V-Charts功能较少，但是基本够用，数据简单。
本篇重点讲解V-Charts！！！！！！！！！！
Echarts官网：
https://www.echartsjs.com/zh/index.html
v-charts官网：
https://v-charts.js.org/#/
下面讲解各个的运用和知识点。
Echarts
下载
你可以通过以下几种方式获取 ECharts。
1，从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
2，在 ECharts 的 GitHub 获取。
3，通过 npm 获取 echarts，npm install echarts --save，
4，通过 jsDelivr 等 CDN 引入
出现如下图则成功。
引入
（下载完的前提）
1，通过标签方式直接引入构建好的 echarts 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
2，全局引用
在vue的main.js中
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3，直接在组件内引入echarts,
(如果你想在其他组件内用echarts，则必须重新引入)
import echarts from “echarts”;
运用
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
以下：
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
}
}
注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中
动态运用
首先看一下json格式：
[
{
"doneNum": 130,
"date": "2019-01"
}, {
"doneNum": 80,
"date": "2019-02"
}, {
"doneNum": 90,
"date": "2019-03"
}, {
"doneNum": 110,
"date": "2019-04"
}, {
"doneNum": 60,
"date": "2019-05"
}, {
"doneNum": 70,
"date": "2019-06"
}, {
"doneNum": 120,
"date": "2019-07"
}, {
"doneNum": 80,
"date": "2019-08"
}, {
"doneNum": 83,
"date": "2019-09"
}, {
"doneNum": 84,
"date": "2019-10"
}, {
"doneNum": 105,
"date": "2019-11"
}, {
"doneNum": 52,
"date": "2019-12"
}
]
对于后端传过来的这种类型的json数据，前端需要做一些处理。
1：为x轴和y轴分别定义一个数组：类别数组（实际用来盛放X轴，y轴坐标值）
var names = []; //类别数组（实际用来盛放X轴坐标值）
var series = [];
2：在ajax请求成功之后，在success的方法里面对请求的json数据进行处理，首先要遍历一下data数据（请求成功时执行该函数内容，data即为服务器返回的json对象），对数据进行遍历并且挨个取出类别并填入上一步已经定义好的类别数组里面。
$.each(data, function (index, item) {
names.push(item.date); //挨个取出类别并填入类别数组
series.push(item.doneNum);
});
3：进入到echarts的代码，找到x轴和y轴所在的位置，将第一步的类别数组替换：
xAxis: [{
type: 'category',
data: names
}],
series: [{
name: '心率',
type: 'line',
data: series
}]
下面是完整的demo代码：
这是采用从.json文件中获取的，如果是从ajax中获取你把获取的方式改一下就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" class="col-md-12 col-sm-12 col-xs-12" style="height: 400px;"></div>
<script>
// 折线图
var names = []; //类别数组（实际用来盛放X轴坐标值）
var series = [];
$.ajax({
url: "test.json",
data: {},
type: 'GET',
success: function(data) {
//请求成功时执行该函数内容，data即为服务器返回的json对象
$.each(data, function (index, item) {
names.push(item.date); //挨个取出类别并填入类别数组
series.push(item.doneNum);
});
console.log(JSON.stringify(data))
hrFun(data);
},
});
// 心率
var hrChart = echarts.init(document.getElementById("main"));
function hrFun(data) {
hrChart.setOption({
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['心率值']
},
grid: {
left: '3%',
right: '20%',
bottom: '20%',
containLabel: true
},
xAxis: [{
type: 'category',
data: names
}],
yAxis: [{ // 纵轴标尺固定
type: 'value',
scale: true,
name: '心率值',
max: 140,
min: 0,
splitNumber: 20,
boundaryGap: [0.2, 0.2]
}],
series: [{
name: '心率',
type: 'line',
data: series
}]
}, true);
}
</script>
</body>
</html>
如代码所见，Echars还是需要转换数据格式的，我觉得比较麻烦，那有没有不需要转换格式的呢？
答案当然是有的，下面为大家介绍V-charts
v-charts
在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。
下载
npm安装：
npm i v-charts echarts -S
引入
// 在main中引入 v - charts
import VCharts from 'v-charts'
Vue.use(VCharts)
运用
首先是导入模块：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
使用百度地图或高德地图时需要额外引入相应的模块
<script src="https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
实例：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<template>
<ve-pie width="500px" :data="chartData2" ></ve-pie>
</template>
<script>
// 导出模块
export default {
data() {
return {
chartData2:{
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]},
}
}
};
</script>
效果：
我使用的是饼形图，你也可以使用其他的图形：
|- lib/
|- line.common.js -------------- 折线图
|- bar.common.js --------------- 条形图
|- histogram.common.js --------- 柱状图
|- pie.common.js --------------- 饼图
|- ring.common.js -------------- 环图
|- funnel.common.js ------------ 漏斗图
|- waterfall.common.js --------- 瀑布图
|- radar.common.js ------------- 雷达图
|- map.common.js --------------- 地图
|- sankey.common.js ------------ 桑基图
|- heatmap.common.js ----------- 热力图
|- scatter.common.js ----------- 散点图
|- candle.common.js ------------ k线图
|- gauge.common.js ------------- 仪表盘
|- tree.common.js -------------- 树图
|- bmap.common.js -------------- 百度地图
|- amap.common.js -------------- 高德地图
切换<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>这一句也可以单独导入一个图形，
动态使用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<!--平台资金记录-->
<template>
<ve-pie width="500px" :data="chartData2" ></ve-pie>
</template>
<script>
// 导出模块
export default {
data() {
return {
chartData2:{}
}
},
created(){
//图形展示
url = this.axios.urls.SYSTEM_ASSET_DETAIL_ZCSRSUM;
this.axios.post(url, {}).then((response) => {
console.log(response.data.data);
this.chartData2= {
columns: [ '状态','金额'],
rows: response.data.data
}
}).catch((response) => {
//carch则是异常
console.log(response);
});
}
};
</script>
<style scoped>
</style>
可以看到，我基本不需要转换数据格式等，基本效果都是显示的，
而且v-charts还有一个功能我觉得挺好的，就是图表切换，
也就是一种数据可以用多种图形展示，详情见官网，我这里简单描述：
<template>
<div>
<button @click="changeType">切换图表类型</button>
<ve-chart :data="chartData" :settings="chartSettings"></ve-chart>
</div>
</template>
<script>
export default {
data () {
this.typeArr = ['line', 'histogram', 'pie']
this.index = 0
return {
chartData: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1月1日', '访问用户': 1523 },
{ '日期': '1月2日', '访问用户': 1223 },
{ '日期': '1月3日', '访问用户': 2123 },
{ '日期': '1月4日', '访问用户': 4123 },
{ '日期': '1月5日', '访问用户': 3123 },
{ '日期': '1月6日', '访问用户': 7123 }
]
},
chartSettings: { type: this.typeArr[this.index] }
}
},
methods: {
changeType: function () {
this.index++
if (this.index >= this.typeArr.length) { this.index = 0 }
this.chartSettings = { type: this.typeArr[this.index] }
}
}
}
</script>
点击切换：
相比Echars做简单展示还是挺好的。。。
若有问题，可私聊博主，
2135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
