VUE - v-charts 图表高级设置

2020-12

Max.Bai

记录VUE 使用v-charts 图表设置

先看下效果：

修改的内容包括：
1. 修改线的粗细
2. 修改标题的样式
3. 修改坐标轴字体颜色
4. 修改线条区域的颜色
5. 添加x坐标的标记
6. 默认不显示线条

模板代码：

<ve-line:title="chartTitle[index-1]":loading="loading[index-1]":legend="chartLegend":data="chartData[index-1]":extend="extend":settings="chartSettings":width-change-delay="500":resize-delay="500":change-delay="500":colors="corlors"height="310px"/>

JS 代码：

// 要显示的数据
const columsList = ['time', 'new_count', 'ma7', 'last10', 'p70', 'last_week']
const chartTitleDefault = {'textStyle.color': '#eee',show: true,left: 'center'
}// 默认图表title
const normalChartTitle = [{ ...chartTitleDefault, text: '全站' },{ ...chartTitleDefault, text: 'ZF站' },{ ...chartTitleDefault, text: 'GB站' },{ ...chartTitleDefault, text: 'RG站' },{ ...chartTitleDefault, text: 'CB站' },{ ...chartTitleDefault, text: 'DL站' }
]
data() {this.chartSettings = {// 线条修改名字labelMap: {new_count: '实时数据',ma7: '最近7日平均',last10: '最近10次平均',p70: '最近7日70%线',p80: '最近7日80%线',p90: '最近7日90%线',last_week: '上周同期'}}// 扩展修改this.extend = {'grid.bottom': 0,   // 图下边距'xAxis.0.axisLabel.color': '#eee',  // 坐标轴文本 颜色'yAxis.0.axisLabel.color': '#eee',  // 坐标轴文本 颜色'legend.textStyle.color': '#eee',  // 样例文本 颜色'title.textStyle.color': '#eee',   // 标题文本 颜色'series.0.areaStyle.color': '#19d4ae3b',    // 第一条线区域颜色'series.0.z': 99,  // 第一条线显示的层级，越大越上层，不然会被其他线覆盖'series.0.markLine': {    // 第一条线添加标记，当前时间标记silent: true,symbol: ['none', 'pin'],     // 标记样式label: { formatter: '当前时间', distance: [0, 18] },    //标记显示文本，位置data: []    // 标记数据   {xAxis: 42, other: xxx}   xAxis x轴坐标的位置第42个数据},'series.0.showSymbol': false,    // 是否显示文本在图上'series.1.lineStyle.width': 1,   // 线的宽度'series.1.showSymbol': false,'series.2.lineStyle.width': 1,'series.2.showSymbol': false,'series.3.lineStyle.width': 1,'series.3.showSymbol': false,'series.4.lineStyle.width': 1,'series.4.showSymbol': false,'legend.selected': { '最近7日70%线': false, 上周同期: false }   // 是否显示线，默认全显示，false不显示}this.chartLegend = {top: 25}// 指定颜色顺序this.corlors = ['#19d4ae','#fa6e86','#ffb980','#5ab1ef','#0067a6','#c4b4e4','#d87a80','#9cbbff','#d9d0c7','#87a997','#d49ea2','#5b4947','#7ba3a8']loading: [false, false, false, false, false, false],chartData: [{columns: columsList,rows: []},{columns: columsList,rows: []},{columns: columsList,rows: []},{columns: columsList,rows: []},{columns: columsList,rows: []},{columns: columsList,rows: []}],chartTitle:localUtils.getItem(PAYSUCCESS_CHART_TITLE, 'json') ||JSON.parse(JSON.stringify(normalChartTitle)),chartParms:localUtils.getItem(PAYSUCCESS_CHART_PARAMS, 'json') ||JSON.parse(JSON.stringify(normalChartParms)),

数据格式：

{last10: 4last_week: 3ma7: 3.71new_count: 4p70: 5time: 1608655200
}

VUE - v-charts 图表高级设置相关推荐

Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理目录 Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理一.简单介绍二. ...
详解Vue中watch的高级用法
转载自详解Vue中watch的高级用法我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...
WPF中嵌套charts图表查询数据
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:WPF .Charts 撰写日期:2020年09月16 ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
pyecharts+Vue在显示图表
pyechart pyecharts是与python对接的,一个用于生成 Echarts 图表的类库. 为什么用pycharts 说到vue中加图表,大部门肯定是用echarts.我用pyechart ...
谷歌搜索技巧：搜索语法隐藏彩蛋高级设置
谷歌搜索技巧:搜索语法隐藏彩蛋高级设置 Google是一个非常精密成熟的搜索引擎,其搜索结果的丰富性和准确度较其他搜索引擎都要好,但大多数用户都还只是停留在搜索框中输入一两个关键字,然后点击&qu ...
matplotlib绘制图表，设置刻度标签、最大最小刻度、字体大小，label位置、刻度轴箭头等
matplotlib绘制图表,设置刻度标签.最大最小刻度.字体大小,label位置.刻度轴箭头等 1. 效果图 2. 源码 2.1 仅使用普通轴ax + fontdict 源码 2.2 使用mpl设置 ...
一个完整的Installshield安装程序实例—艾泽拉斯之海洋女神出品（三） --高级设置一...
一个完整的Installshield安装程序实例-艾泽拉斯之海洋女神出品(三) --高级设置一原文:一个完整的Installshield安装程序实例-艾泽拉斯之海洋女神出品(三) --高级设置一上 ...
echarts热力背景图_Echarts 图表中设置背景图片
在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. image 在Echarts的实例中,找到一个实 ...

VUE - v-charts 图表高级设置

VUE - v-charts 图表高级设置

VUE - v-charts 图表高级设置相关推荐

最新文章

热门文章