vue中v-charts折线图使用总结
在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。使用:npm下载npm iv-chartsecharts-S引用:完整引用// ma...
在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。
使用:
npm下载
npm i v-charts echarts -S
引用:
完整引用
// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'
Vue.use(VCharts)
按需引用
import Vue from 'vue'
import VeLine from 'v-charts/lib/line.common'
import App from './App.vue'
Vue.component(VeLine.name, VeLine)//引用的是折线图
在组件中使用
<template>
<ve-line :data="chartData" :settings="chartSettings" :grid="grid"
:colors="colors" :extend="chartExtend"
:mark-line="markLine" :mark-point="markPoint">
</ve-line>
</template>
如果需要用到标线和标志则需要引入对应的组件:
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/markPoint'
在data中配置属性及参数
export default {
data() {
this.markPoint = {//标点
data: [
// {
// name: '最大值',
// type: 'max',
// symbolSize: 40,//标记大小
// symbol: 'pin',//标记形状
// symbolOffset: [0, 0]//标记位置坐标
//
// }
] }//标点
this.chartExtend =//:extend 最终所有的配置都可以用这个值重新设置
{
series:{
symbol: "none",//取消折线图上的小圆点
itemStyle:{//设置折线线条
normal:{//设置折线折点
// color:'red'
}
}
},
// 'xAxis.0.axisLabel.show': false,//x轴标签不显示
// 'yAxis.0.axisLabel.show': false,//y轴标签不显示
// 'xAxis.0.splitLine.show': false,//x轴表格线不显示
// 'yAxis.0.splitLine.show': false,//y轴表格线不显示
// 'yAxis.0.min':49, // yAxis.0:y轴左侧 //设置纵坐标的最小值
// 'yAxis.0.max':60, // 设置纵坐标的最大值
// //'yAxis.1.splitLine.show': false,// yAxis.1: y轴右侧 //不显示值标线
// 'yAxis.1.minInterval':2,// minInterval设置间隔值,1为整数
'yAxis.0.minInterval': 0.2, // minInterval设置间隔值,1为整数
'yAxis.0.min': 49.75, // yAxis.0:y轴左侧 //设置纵坐标的最小值
'yAxis.1.min': 8, // yAxis.0:y轴左侧 //设置纵坐标的最小值
'yAxis.0.max':50.25, // 设置纵坐标的最大值
yAxis: {
nameTextStyle:{//y坐标轴别名的文字
color:'#FFFC07'
},
nameLocation: 'end',//y轴坐标轴名称的显示位置
//nameGap:30,//坐标轴名称与轴线之间的距离
//nameRotate:0,//坐标轴名字旋转
splitLine: {//y轴的表格线
lineStyle: {
color: '#DADEE3',
width: 0.5,//线宽
}
},
axisLabel: {//纵坐标的字体样式
textStyle: {
color: '#DADEE3',
}
},
}, // 纵坐标网格线及字体样式
xAxis: {
// interval: 1,//无效
// 横坐标网格线设置
splitLine: {
// show: false//隐藏横坐标表格线
lineStyle: {
color: '#DADEE3',
width:0.5,
}
},
axisLine: {
// show: true,//x轴轴线显示
lineStyle: {
color: '#09C9D1',
fontStyle: 'italic'
}
},
axisLabel: {//横坐标的字体样式
// interval:0,//解决横坐标数据过多显示不全问题
showMinLabel: true,
showMaxLabel: true,
margin:20,//横坐标数据一行显示20个
// formatter: function (params) {//设置x轴横坐标名称显示的个数
// var newParamsName = "";
// var paramsNameNumber = params.length;
// var provideNumber = 25; //一行显示几个字
// var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
// if (paramsNameNumber > provideNumber) {
// for (var p = 0; p < rowNumber; p++) {
// var tempStr = "";
// var start = p * provideNumber;
// var end = start + provideNumber;
// if (p == rowNumber - 1) {
// tempStr = params.substring(start, paramsNameNumber);
// } else {
// tempStr = params.substring(start, end) + "\n";
// }
// newParamsName += tempStr;
// }
//
// } else {
// newParamsName = params;
// }
// return newParamsName
// },
textStyle: {
color: '#FFFC07',
fontStyle: 'italic',
align: 'center',
// width:30,
// height:40,
}
},// 横坐标表格线及字体样式
axisTick: {
show: true,
inside: true,//刻度线朝内
alignWithLabel: true,//刻度线和标签对齐
// length: 10,//坐标轴刻度的长度
lineStyle: {//坐标线样式
}
},//刻度线
/* data: [{//配置类目,必须使x轴类型为category类目轴为离散的数据才有效。
value: '2018-01-01',
// 突出周一
textStyle: {
fontSize: 20,
color: 'blue',
backgroundColor: 'red'
}
}, '2018-01-02', '2018-01-03', '2018-01-05', '2018-01-10', {//配置类目,必须使x轴类型为category类目轴为离散的数据。
value: '2018-01-20',
// 突出周一
textStyle: {
fontSize: 20,
color: 'blue',
backgroundColor: 'red'
}
}],*/
},
legend: {
// left: 40,//图例组件离容器左侧的距离默认居中
textStyle: {
// fontStyle: 'oblique',字体样式
color: '##eeeeee',
fontSize:15,
// backgroundColor:'#F2F296',
opacity: 0.5
}
} //图例的公用文本样式(维度那行文字)
}
this.chartSettings = {//设置双y轴
axisSite: {right: ['理论出力(MW)', '实际出力(MW)']},
// yAxisType: ['KMB', 'percent'],
yAxisName: ['频率(Hz)','实际出力(MW)'],//左右坐标轴标题
// area: true,//堆叠面积图
xAxisType: 'time',//设置横轴为连续的时间轴
yAxisType:'category',
lineStyle: {//折线加粗
width: 3 //default value:2
},
digit:3,//设置数据类型为percent时保留的位数 默认2位
}
this.grid = {//整个绘制区域
show: true,
top: 70,
// left: 10,
// backgroundColor: 'rgba(64,64,64,0.5)',
width: 925,
height: 230,
}
this.colors = ['#FF3164','#FFFC07','#03EFFC']//自定义折线线条颜色不定义则使用默认
考虑到我们的折线图数据chartData和标线markLine.data的位置都是动态从后台获取的所以把它们放在return里面
return {
chartData: {
columns: ['时间', '频率(Hz)', '实际出力(MW)', '理论出力(MW)'],
rows: []
},
markLine : {
itemStyle: {
normal: {
lineStyle:
{
width: 1.5//加粗标线
} ,
label:
{ fontSize:14,
formatter:'{b}: {c}',//标线上显示名称和值
}
}//设置基线名称和样式
},
label: {//基线名称显示位置
show:true,
position:'end'
},
data: [
// { name: '开始时间', xAxis:0},// 这里xAxis的值是X轴坐标
// { name: '结束时间', xAxis:0},// 这里xAxis的值是X轴坐标
// { name: '频率时间', yAxis:50},// 这里xAxis的值是X轴坐标
]
},
利用ajax异步请求数据:动态更新图表数据及标线的值
mounted() {
this.$axios.get("/api/data.json")
.then(response => {
if (response.data.status == 200) {
const info_data = response.data.ret//整个表格数据
this.chartData.rows = info_data .map(function (a) {
return {
'时间': a['datetime'],
'调幅': a['fre'],
'实际功率': a['real'],
'理论功率': a['theory']
};
})
//遍历info_data中每一个数组,看该数组中是否有msg,如果有则取出该msg的datetime
var starTime = []
for (var i in info_data ) {
if (info_data [i].hasOwnProperty('msg')) {
starTime.push(info_data [i].datetime)
}
}
this.markLine.data = [
{
name:'起点',
label:{
show:true,
position:'end',
formatter: '{b}: {c}'//标签内容格式器
},
xAxis: starTime[0]
},
{
name:'终点',
label:{
show:true,
position:'start',
formatter: '{b}: {c}'
},
xAxis: starTime[1]
},
{
name:'实际功率',
label:{
show:true,
position:'end',
formatter: '{b}: {c}'
},
yAxis:22
}
]
}}}
需要注意的是xAxis配置 x坐标轴的类型
‘value’ 数值轴,适用于连续数据。
‘category’ 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
‘time’ 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
‘log’ 对数轴。适用于对数数据。
不同的类型X轴的时间间隔及折线的起点不一样。
附上几张自己做的过程中的截图
xAxisType: 'category',//设置横轴为类目轴,类目轴可以突出x轴某个名称
xAxisType: 'value',//设置横轴为数值轴,
下图密密麻麻的是因为数值轴默认的刻度太大,而我的每个数据值时间间隔很短。这种情况下我们可以使用:symbol: “none”,//取消折线图上的小圆点
xAxisType: 'time',//设置横轴为连续的时间轴,
折线的起点跟终点都y轴上
图省略。。
上面总结的不是很全面,可能还有些属性配置参数没用到,可以参考echarts官方文档,毕竟v-charts是基于echarts的,还有的情况下配置某个参数无效这可能跟设置轴的类型有关。
v-charts官网:https://v-charts.js.org/#/
echarts官网:https://www.echartsjs.com/zh/index.html
W3Cshool:https://www.w3cschool.cn/echarts_tutorial/
更多推荐
所有评论(0)