vue中v-charts折线图使用总结

在使用 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/