目录
安装
pnpm add v-charts [email protected] -S导入方式
1.全局导入
mian.js中全局导入，并注册使用
import Vue from 'vue'
// 全局导入V-Charts
import VCharts from 'v-charts'
import App from './App.vue'
Vue.use(VCharts)
new Vue({
el: '#app',
render: h => h(App)
})2.按需导入
<template>
<div>
<vue-line></vue-line>
</div>
</template><script>
import VueLine from "v-charts/lib/line.common.js";
export default {
components: {
VueLine
},
}
}
</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 ----------- 高德图基本使用
<template>
<div>
<vue-line></vue-line>
</div>
</template><script>
import VueLine from "v-charts/lib/line.common.js";
export default {
data() {
return {
chartData: {
columns: ['日期', '访问用户', '下单用户'],
rows: [
{ '日期': '2018-05-22', '访问用户': 32371, '下单用户': 19810 },
{ '日期': '2018-05-23', '访问用户': 12328, '下单用户': 4398 },
{ '日期': '2018-05-24', '访问用户': 92381, '下单用户': 52910 }
]
}
}
}，
components: {
VueLine
},
}
}
</script>出现浏览器控制台map报错
main.js中写入
//v-charts组件出现（undefined (reading ‘map‘）bug解决方案
Vue._watchers = Vue.prototype._watchers = []; 基本属性
| 配置项 | 简介 | 类型 | 默认值 |
|---|---|---|---|
| data | 数据，参考文档 | object | - |
| settings | 配置项 | object | - |
| width | 宽度 | string | auto |
| height | 高度 | string | 400px |
| events | 事件绑定，参考文档 | object | - |
| init-options | init 附加参数，参考文档 | object | - |
| tooltip-visible | 是否显示提示框 | boolean | true |
| legend-visible | 是否显示图例 | boolean | true |
| axis-visible | 是否显示坐标轴 | boolean | true |
| theme | 自定义主题 | object | - |
| theme-name | 自定义主题名称 | object | - |
| judge-width | 是否处理生成图表时的宽度问题 | boolean | false |
| width-change-delay | 容器宽度变化的延迟 | number | 300 |
| resizeable | 是否处理窗口 resize 事件 | boolean | true |
| resize-delay | 窗口 resize 事件回调的延迟 | number | 200 |
| change-delay | 属性修改触发图表重绘回调的延迟 | number | 0 |
| handler | 处理器 | object | - |
| use-data-converter | 是否使用数据转化函数 | boolean | false |
evnets属性
<vue-line
:data="chartData"
:events="chartEvents"
></vue-line> data() {
return {
........
chartEvents:{
//点击事件获取节点数据
click(e){
console.log(e);
},
//移动事件获取节点数据
mousemove(e){
console.log(e);
}
}
.........
}
}init-options
将图表格式转化为svg,默认事canvas格式
<vue-line
:init-options="{'renderer': 'svg'}"
></vue-line>tooltip-visible
图标节点上的提示框 ，默认显示提示框（true）
关闭提示框
<vue-line :tooltip-visible="false" ></vue-line>legend-visible
图例显示 ，默认显示（true）
关闭图例显示
<vue-line :legend-visible="false" ></vue-line>theme主题
自定义图表颜色主题
可以参考主题编辑器 - Apache ECharts自定义配置并导入
<vue-line :theme="theme" ></vue-line> theme:{
color: [
"#dcdfd9",
"#22ee88",
"#244de7",
"#2a3bbc",
"#74be74",
"#96dee8"
],
}width-change-delay
容器宽度变化的延迟
<vue-line :width-change-delay="3000" ></vue-line>resizeable
控制表图响应式宽度变化 默认为响应式 (true)
//关闭宽度响应式
<vue-line :resizeable="false" ></vue-line>log
打印表图数据
<vue-line log ></vue-line>Setting属性设置
| dimension | 维度 | string | columns[0] | - |
|---|---|---|---|---|
| metrics | 指标 | array | (columns exclude dimension) | - |
| extraMetrics | 只显示在提示框的指标 | array | - | - |
| axisSite | 指标所在的轴 | object | - | - |
| xAxisType | 横轴的数据类型 | string | category | category time value |
| xAxisName | 横坐标轴标题 | string | - | - |
| yAxisType | 左右坐标轴数据类型 | array | - | - |
| yAxisName | 左右坐标轴标题 | array | - | - |
| metricsType | 数据类型 | object | - | - |
| stack | 堆叠选项 | object | - | - |
| area | 是否展示为面积图 | boolean | false | - |
| scale | 是否是脱离 0 值比例 | array | [false, false] | - |
| min | 左右坐标轴最小值 | array | - | - |
| max | 左右坐标轴最大值 | array | - | - |
| labelAlias | 设置指标的别名，同时作用于提示框和图例 | object | - | - |
| legendAlias | 设置图表上方图例的别名 | object | - | - |
绑定配置属性
<vue-line :settings="chartSettings"></vue-line> data(){
//设置Setting配置
chartSettings:{}
}axisSite
设置y轴左侧右侧展示的数据
默认情况：只会展示左侧数据,右侧不会展示
data(){
//设置Setting配置
chartSettings:{
axisSite:{
right:['比率'],
left:['余额']
}
}
}area
默认事false，折现底部不填充
data(){
//设置Setting配置
chartSettings:{
//设置右轴
axisSite:{
right:['比率'],
left:['余额']
},
//设置面积显示
area:true
}
}min和max
都是Array类型，第一个参数都是左侧最小，第二个参数都是最大值
//设置Setting配置
chartSettings:{
axisSite:{
right:['比率']
},
area:true,
//设置y轴两侧最小值
min:[100,0],
//设置y轴两侧最大值
max:[10000,1]
}
}xAxisType
设置x轴的数据类型
'value':数值轴，适用于连续数据
category:默认类型，适用于离散的类目数据
time：时间轴，适用于连续的时序数据
log：对数轴。适用于对数数据
数值轴
<vue-line :data=' chartData' :settings="chartSettings"></vue-line> //定义数据
chartData: {
//默认第一个值为x轴，其他都为y轴值
columns: ['日期', '余额', '比率','利润'],
rows: [
{ '日期': 111, '余额': 3237, '比率': 0.2 ,'利润':2000},
{ '日期': 222, '余额': 1232, '比率': 0.6 ,'利润':6000},
{ '日期': 333, '余额': 9238, '比率': 0.5 ,'利润':5000}
]
}, //设置Setting配置
chartSettings:{
xAxisType:'value'
}
}时间轴
<vue-line :data=' chartData' :settings="chartSettings"></vue-line>//定义数据
chartData: {
//默认第一个值为x轴，其他都为y轴值
columns: ['日期', '余额', '比率','利润'],
rows: [
{ '日期': '2018-05-22', '余额': 3237, '比率': 0.2 ,'利润':2000},
{ '日期': '2018-05-23', '余额': 1232, '比率': 0.6 ,'利润':6000},
{ '日期': '2018-05-24', '余额': 9238, '比率': 0.5 ,'利润':5000}
]
}, //设置Setting配置
chartSettings:{
xAxisType:'time'
}
}yAxisType
可选值：KMB,normal，percent
默认值normal,就是rows中的正常展示的数据
KMB会把大于千的数据转换为k单位
percent会将数据转换为百分比
chartSettings:{
// 设置y轴两侧的数值类型
yAxisType:['KMB','percent']
}
}yAxiName
- 设置y轴两侧的名称
- 第一个参数是y轴左侧名称
- 第二个参数是y轴右侧名称
- percent会将数据转换为百分比
chartSettings:{
// 设置y轴两侧的名称
yAxisName:['余额','比例']
}
}Stack
不适于折线图
chartSettings:{
stack:{
'用户':['余额','比率']
}
}digit
保留小数后几位
//定义数据
chartData: {
//默认第一个值为x轴，其他都为y轴值
columns: ['日期', '余额', '比率','利润'],
rows: [
{ '日期': '2018-05-22', '余额': 3237, '比率': 0.22222 ,'利润':2000},
{ '日期': '2018-05-23', '余额': 1232, '比率': 0.6333 ,'利润':6000},
{ '日期': '2018-05-24', '余额': 9238, '比率': 0.5553 ,'利润':5000}
]
},
chartSettings:{
// 保留小数后几位
digit:2
}legendName
修改图例名称 ，不修改提示框的名称
chartSettings:{
//修改图例名称
legendName:{
'余额':'1111',
'比率':'2222',
'利润':'3333'
}
}labelMap
同时修改图例名称和提示名称
chartSettings:{
//修改图例和提示名称
labelMap:{
'余额':'1111',
'比率':'2222', '利润':'3333'
}
}柱状图(由上面折线图演变来的 )
<template>
<div>
<vue-line :data="chartData" :settings="chartSettings" ></vue-line>
</div>
</template>import VueLine from "v-charts/lib/histogram.common.js";
data() {
return {
//定义数据
chartData: {
//默认第一个值为x轴，其他都为y轴值
columns: ['日期', '余额', '比率', '利润'],
rows: [
{ '日期': '2018-05-22', '余额': 3237, '比率': 0.22222, '利润': 2000 },
{ '日期': '2018-05-23', '余额': 1232, '比率': 0.6333, '利润': 6000 },
{ '日期': '2018-05-24', '余额': 9238, '比率': 0.5553, '利润': 5000 }
]
},
}
}stack属性
堆叠面积
chartSettings: {
stack: {
'用户': ['余额', '利润']
}
}最基本的柱形图
1.基本使用
<template>
<div>
<vue-line :data="chartData"></vue-line>
</div>
</template>import VueLine from "v-charts/lib/histogram.common.js";
data() {
return {
//定义数据
chartData: {
//默认第一个值为x轴，其他都为y轴值
columns: ['日期', '余额'],
rows: [
{ '日期': '2018-05-22', '余额': 3237 },
{ '日期': '2018-05-23', '余额': 1232 },
{ '日期': '2018-05-24', '余额': 9238 }
]
},
}
}完整版的柱形图
设置了extend属性
设置了settings属性
<vue-line :data="chartData" :extend="extend" :settings="chartSet" ></vue-line> data() {
return {
//定义数据
chartData: {
//默认第一个值为x轴，其他都为y轴值
columns: ['日期', '余额'],
rows: [
{ '日期': '2018-05-22', '余额': 3237 },
{ '日期': '2018-05-23', '余额': 1232 },
{ '日期': '2018-05-24', '余额': 9238 }
]
},
//设置图标的状态
extend: {
// y轴只显示一条线，x轴文字倾斜
"xAxis.0.axisLabel.rotate": 45,
yAxis: {
//是否显示y轴线条
axisLine: {
show: true,
},
// 纵坐标网格线设置，同理横坐标
// splitLine: {
// show: false,
// },
// 线条位置
position: "left",
},
//文字竖直显示
xAxis: {
axisLabel: {
interval: 0,
formatter: function (value) {
return value.split("").join("\n");
},
},
},
//对于大量数据,设置滚动条显示
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 50,
},
{
type: "inside",
realtime: true,
start: 0,
end: 50,
},
],
// label图形上的文本标签
series: {
label: { show: true, position: "top" },
},
},
// 修改别名:同时修改图标与提示名称
chartSet: {
labelMap: {
余额: "金额",
},
},
}
}
extend属性
<vue-line :data="chartData" :extend="extend" ></vue-line>xAxis.0.axisLabel.rotate
x轴文字倾斜 范围[0-90]
extend: {
"xAxis.0.axisLabel.rotate": 45
}yAxis(y轴设置)
axisLine
是否显示y轴
extend: {
yAxis: {
//是否显示y轴线条
axisLine: {
show: true,
}
}
}splitLine
纵坐标网格线设置，同理横坐标
extend: {
yAxis: {
//是否显示网格
splitLine: {
show: false,
},
}position（需要先开启axisLine）
y轴线条位置显示
extend: {
yAxis: {
//是否显示y轴线条
axisLine: {
show: true,
},
// 线条位置
position: "left",
}
extend: {
yAxis: {
//是否显示y轴线条
axisLine: {
show: true,
},
// 线条位置
position: "right",
}xAxis
文字竖直显示
extend: {
xAxis: {
axisLabel: {
interval: 0,
formatter: function (value) {
return value.split("").join("\n");
},
},
},
}series
设置柱形图上的数据文本
series: {
label: { show: true, position: "top" },
},dataZoom
设置大量数据，设置滚动条
//对于大量数据,设置滚动条显示
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 50,
},
{
type: "inside",
realtime: true,
start: 0,
end: 50,
},
],settings
设置配置,可改图例名称
<vue-line:data="chartData" :extend="extend" :settings="chartSet"></vue-line>data(){
return {
extend:{},
chartSet: {
// // 修改别名:同时修改图标与提示名称
labelMap: {
余额: "金额",
},
},
}
}饼图
<template>
<div>
<vue-line :data="chartData" :settings="chartSettings" ></vue-line>
</div>
</template><script>
import VueLine from "v-charts/lib/pie.common.js";
export default {
components: {
VueLine
},
data() {
return {
//定义数据
chartData: {
//默认第一个值为x轴，其他都为y轴值
columns: ['品种', '余额'],
rows: [
{ '品种': '苹果', '余额': 3237 },
{ '品种': '莉子', '余额': 1232 },
{ '品种': '香蕉', '余额': 9238 }
]
},
}
}
}地图
<ve-map :data="chartData"></ve-map><script>
import Vemap from "v-charts/lib/map.common.js";
export default {
components: {
Vemap
},
data() {
return {
chartData: {
columns: ['位置', '税收', '人口', '面积'],
rows: [
{ '位置': '吉林', '税收': 123, '人口': 123, '面积': 92134 },
{ '位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234 },
{ '位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234 },
{ '位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234 }
]
}
};
}
};
</script>