vue+echarts图表使用的问题记录
更新时间：2021年09月30日 10:42:01 作者：青烟小生
由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件,所以这篇文章主要给大家介绍了关于vue+echarts图表使用的相关资料,需要的朋友可以参考下
前言
echarts是我最常用的一直图表工具，而且也是一个很完整的生态和内容，足够我们平常的使用了。最近在做一个大数据平台的页面，需要用到比较多的图表，就使用了echarts。使用过程中也碰到了一些比较难搞的问题或者是配置手册里面隐藏比较深的一些属性，今天就来记录下。
使用方法
1、取消图表的网格，网格的颜色修改
// 控制网格线是否显示
splitLine: {
show: false, // 网格线是否显示
// 改变样式
lineStyle: {
color: '#ccc' // 修改网格线颜色
}
},
2、坐标轴的样式修改
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
axisLine:{
lineStyle:{color:"#ccc"}
},
axisTick: {
show: false // 去掉刻度
},
axisLabel:{//字体样式的修改
show: true,//显示隐藏
textStyle:{color:"#ccc"}
},
// 控制网格线是否显示
splitLine: {
show: false, // 网格线是否显示
// 改变样式
lineStyle: {
color: '#ccc' // 修改网格线颜色
}
},
}
],
yAxis: [
{
type: 'value',
name: '(次)',
axisLine:{
lineStyle:{color:"#ccc",fontSize:'16'}
},
axisTick: {
show: false // 去掉刻度
},
}
],
3、圆环图的一些样式修改或者配置使用
//圆环中心的文字的样式修改
title: {
text: value.value+'次',
subtext: value.name,
x: 'center',
y: 'center',
itemGap: 0,
textStyle: {
fontSize: 26,
fontWeight: 'bold',
color: 'rgb(0,237,255)'
},
subtextStyle: {
fontSize: 16,
fontWeight: 'bold',
color: '#fff'
},
},
//圆环的鼠标移入的浮动效果清除
series: [
{
hoverAnimation:false,//添加这个属性
}
]
4、多图表切换，清除上一次加载的数据
在setOption里面加 true option && myChart.setOption(option,true);
5、图表的渐变颜色使用
echarts.graphic.LinearGradient
series: [
{
type: 'pie',
center: ['50%', '49%'],
radius: ['45%', '73%'],
// minAngle: 0,
startAngle: 0, // 渐变角度
avoidLabelOverlap: true, //是否启用防止标签重叠
emphasis: {
label: {
show: true,
position: 'center'
}
},
data: seriesData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
label: {
show: true,
}
},
normal: {
color: function (params) { //颜色的渐变
var colorList = [
{
c1: '#3288FC',
c2: '#36B4FD'
},
{
c1: '#CBA0FF',
c2: '#598EFE'
},
]
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
offset: 0,
color: colorList[params.dataIndex].c1
}, {
offset: 1,
color: colorList[params.dataIndex].c2
}])
}
}
}
}
]
总结
到此这篇关于vue+echarts图表使用的文章就介绍到这了,更多相关vue+echarts图表使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了封装一个Vue文件上传组件案例详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
本篇文章主要介绍了详解Vue 事件驱动和依赖追踪 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
同时Vue也支持让开发者,自己注册一些指令,这些指令被称为自定义指令,每个指令都有自己各自独立的功能,这篇文章主要介绍了Vue自定义指令简介和基本使用,需要的朋友可以参考2024-03-03
这篇文章主要介绍了Vue.js系列之项目结构说明(2)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-01-01
很多时候我们会在全局调用一些方法,本文主要介绍了vue全局方法plugins/utils的实现示例,具有一定的参考价值,感兴趣的可以了解一下2024-07-07
这篇文章主要介绍了vue.js 输入框输入值自动过滤特殊字符替换中问标点操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要给大家介绍了关于Vite版本更新检查实现页面自动刷新的解决思路,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue和iview结合动态生成表单实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在项目中,实现不同用户的权限控制是常见的需求也是常见的功能模块,本文将以 vue 为主要的代码框架介绍几种常见的权限控制方式,有需要的可以了解下2025-03-03
在前端开发中我们通常会遇到这样的需求,用户离开、刷新页面前,修改数据未进行保存操作,需要提示框提醒用户,这篇文章主要给大家介绍了关于vue监听浏览器网页关闭和网页刷新事件的相关资料,需要的朋友可以参考下2023-08-08
最新评论