vue使用 v-charts 常用方法总结
vue使用 v-charts 常用方法总结
-
-
-
- 折线图：
- 柱形图：
- 水球图：
- 环形图：
- 散点图：
- 日常开发图表中，v-chatrs中的方法，有很多基本都是通用
-
-
v-charts传送门入口
e-charts传送门入口
折线图：
html代码如下：
<template>
<div>
<ve-line height="139px" width="370px" :extend="chartExtend" :data="chartData" :settings="chartSettings" :legend-visible="false" :visual-map="visualMap" :grid="grid" :data-zoom="dataZoom"> :title="{ text: '东南风 10m/s', left: 'center', textStyle: { color: '#ffffff', fontSize: 12, fontWeight: 100 } }" :toolbox="toolbox"></ve-line>
</div>
</template>
js代码如下：
// 引入渐变模块
// import 'echarts/lib/component/visualMap'
// 设置区域缩放
// import 'echarts/lib/component/dataZoom'
// 设置Y轴每条线序不同颜色
// import echarts from 'echarts/lib/echarts';
// 设置title标题，在引用图标地方调用 :title
// import "echarts/lib/component/title";
// 下载按钮
// import 'echarts/lib/component/toolbox';
export default{
data(){
// 配置项
this.chartSettings = {
},
this.dataZoom = [
{
type: 'slider',
start: 0,
end: 10,
backgroundColor: 'rgba(0, 0, 0, 0)', // 区域滚条背景颜色
fillerColor: 'rgba(0, 0, 0, 0.05)' // 区域滚条蒙层颜色
}
]
// 配置图标按钮
this.toolbox = {
right: 50,
feature: {
saveAsImage: {
}
}
}
// 图表渐变（需要引入模块才能操作）
this.visualMap = [
{
show: false, // 是否显示对应渐变信息
type: 'piecewise', //
splitNumber: 5,
min: 0,
max: 60,
right: 0,
top: '50%'
}
],
// 图表剪切方法
this.grid = {
right: 100
}
// 设置区域缩放（需要引入模块才能操作）
this.dataZoom = [
{
type: 'slider',
start: 0,
end: 10
}
]
return {
// 图表数据接收
chartData: {
columns: [], // 索引
rows: [] // 数据
},
// 图表属性
chartExtend: {
// 设置显示图渐变颜色 需要引入import echarts from 'echarts/lib/echarts'
color: [ new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#087A97'}, {
offset: 1, color: '#011D46'}]) ],
// 设置Y轴每条线序不同颜色 需要引入import echarts from 'echarts/lib/echarts'
'yAxis.0.splitArea': {
show: true,
areaStyle: {
color: [
// 现在设置的是第一个为渐变，之后的都是指定颜色
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#8ec6ad'}, {
offset: 1, color: '#ffe'}]),'#F39AFF','#FBBBFF','#F1FF9D','#94FFAB'
]
}
},
backgroundColor: 'transparent', // 图表背景颜色
"yAxis.0.minInterval": 1, // Y轴0和1
'yAxis.0.inverse': true, // Y轴翻转
'series.1.yAxisIndex': 1, // 设定Y轴需要翻转的索引
'yAxis.1.splitLine.show': false, // 去掉Y轴线
color: ['red'], // 线轴颜色
// 设置Y轴类目名
"yAxis.0.type": "category",
"yAxis.0.data": [],
"yAxis.1.type": "category",
"yAxis.1.data": ["预警", "告警"],
// 设置折线图的折线
series: {
// 是否显示折线提示点
showSymbol: true,
// 折线颜色
color: "#009EFF",
// 折线提示点显示点实心
symbol: "circle",
// 折线是否圆滑
smooth: false,
// 线形变正方形
step: "start",
// 折线提示点大小
symbolSize: 7,
itemStyle: {
normal: {
// 折线隐藏方式
lineStyle: {
width: 0
}
}
},
// 告警线
markLine: {
// 是否显示起始圆点
symbol: "none",
// 去掉右边提示标题
label: {
formatter: ""
},
// 设置线条位置
data: [
{
name: "预警线",
type: "average", // 平均线
yAxis: 1, // 设定标线位置
lineStyle: {
color: "skyblue" // 设置线条颜色
}
},
{
name: "告警线",
type: "average", // 平均线
yAxis: 2, // 设定标线位置
lineStyle: {
color: "skyblue"
}
}
]
},
},
// 设置图表位置,可以为top(上)、bottonm(下)、left(左)、right(右)
grid: {
y: 10, // 上
y2: 10, // 下
x: 0, // 左
x2: 10, // 右
containLabel: false // 去掉视图引导索引值
},
// x轴设置项
xAxis: {
// 去掉负数出现小标下标线错位问题
onZero: false
axisTick: {
inside: true // 刻度消除
},
boundaryGap: false, // 是否去掉两边距离
// 设置轴线文本样式
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 14
}
},
// 轴线样式
axisLine: {
show: true,
lineStyle: {
width: 0, // 隐藏线条
color: '#fff'
}
},
// 图表数据渲染线样式
splitLine: {
lineStyle: {
type: 'dashed', // 轴线变成虚线
color: '#ccc'
}
},
// 鼠标移动显示
tooltip:{
// 提示位置
position: ["20%", 5],
formatter: (res)=>{
this.$console.log(res)
return res;
}
}
},
yAxis: {
// 基本和xAxis中的配置一样
splitNumber: 2, // Y轴索引间隔
position:'left', // 定位之后，轴线即可选在一边
max: '500', // Y轴最大值
min: '0', // Y轴最小值
// 线轴是否显示
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
// 控制轴线文字启用样式
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 14
},
// x轴索引值修改
formatter: (res)=>{
let name = ''
switch(res){
case 0:
name = '优'
break;
case 100:
name = '良'
break;
case 200:
name = '轻度'
break;
case 300:
name = '中度'
break;
case 400:
name = '重度'
break;
case 500:
name = '严重'
break;
}
return name;
}
}
},
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
// 去掉标题圆圈
icon: 'none', // ‘rect’为正方形, ‘circle’为圆形（circle，rect ，roundRect，triangle，diamond，pin，arrow，none）
// 改掉圆圈的大小
itemHeight: 5,
borderColor :'yellow',
// icon 样式
itemStyle: {
color: "#fff"
},
// 文字样式
textStyle: {
color: '#fff'
}
},
}
}
}
}
柱形图：
<ve-histogram :height="height" :width="width" :data="chartData" :extend="chartExtend" :settings="chartSettings" :loading="loading" :data-empty="chartData.rows.length <= 0" :mark-line="markLine"
:mark-point="markPoint"></ve-histogram>
<script>
// 标线引入
import 'echarts/lib/component/markLine'
// 标点引入
import 'echarts/lib/component/markPoint'
export default {
data(){
// 标线配置（需要引入模块才能操作）
this.markLine = {
symbol: 'none', // 标线起始点去除
lineStyle: {
normal: {
type: 'dashed', // 标线样式
color: '#FF0000', // 标线颜色
symbol: 'none' // 标线结尾取消箭头
}
},
// 标线结尾去掉文本
label:{
formatter: ''
},
// 警戒线
data: [
{
name: '平均线',
type: 'average', 平均线
yAxis: 50， // 设定标线位置
}
],
}
this.markPoint = {
data: [
{
name: '最大值',
type: 'max'
}
]
}
return{
chartExtend： {
series：{
// 启动背景阴影
showBackground: true,
// 背景阴影颜色
backgroundStyle: {
color: "#172047"
},
// 柱子大小
barWidth: '50%',
// 折线图样式
smooth: false,
// 去掉旁边0值
boundaryGap: false,
// 去掉Y轴下面的刻度
axisTick: {
inside: true
},
// 背景颜色
backgroundColor:'red',
// 设置柱形边角样式
itemStyle: {
barBorderRadius:[10,10,10,10]
}
},
// 图表渲染模型是否启用提示具体数据
label: {
show: true,
position: 'insideLeft'
}
},
label: {
normal: {
show: true,
position: 'insideLeft'
},
color: 'red',
formatter: (res)=>{
let data= res.name
return data;
}
},
}
}
}
}
</script>
水球图：
<ve-liquidfill height="76px" :data="chartData" :settings="chartSettings"></ve-liquidfill>
<script>
import VeLiquidfill from 'v-charts/lib/liquidfill.common'
export default {
data(){
this.chartSettings = {
outline: {
show: true
},
seriesMap: [
{
label: {
fontSize: 12,
formatter (options) {
const {
seriesName,
data: {
value
}
} = options
return `${
seriesName}\n${
value}`
},
},
center: ['20%', '50%'],
radius: '90%',
outline: {
show: false
}
},
{
label: {
fontSize: 12
},
center: ['50%', '50%'],
radius: '90%',
outline: {
show: false
}
},
{
label: {
fontSize: 12
},
center: ['80%', '50%'],
radius: '90%',
// 去掉外环
outline: {
show: false
}
}
]
}
return {
chartData: {
columns: ['city', 'percent'],
rows: [
{
city: '上海',
percent: 0.4
}, {
city: '广州',
percent: 0.4
}, {
city: '成都',
percent: 0.4
}
]
}
}
}
}
</script?
环形图：
<ve-ring :data="chartData" :height="height" :legend-visible="false" :extend="chartExtend" :settings="chartSettings" ></ve-ring>
import VeRing from "v-charts/lib/ring.common";
data() {
return {
// 图表原生设置
chartExtend: {
series: {
// 线的样式
labelLine: {
length: 50,
// 第二条线
length2: 5,
lineStyle: {
// 线的大小
width: 1
}
},
label: {
normal: {
// 是否显示扇叶
show: true,
position: 'insideLeft',
// 文字大小
fontSize: 14
}
},
// 位置
center: ['50%', '55%'],
// 大小
radius : ['10%', '45%'],
}
},
chartSettings: {
roseType: 'radius'
}
};
},
散点图：
<div>
<ve-scatter :height="height" :extend="extend" :data="chartData_speed" :axisVisible="true" :settings="settings" :data-empty="traffic" :loading="is_nowSpeed"></ve-scatter>
</div>
data() {
this.settings= {
xAxisType: "time",
labelMap: {
time: this.$t("lightings.trafficFlow.time"),
speed: this.$t("lightings.trafficFlow.speed")
},
// 散点大小
symbolSize: 4,
legendName: {
'speed': this.$t("lightings.trafficFlow.speed")
}
}
}