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路由快照实现思路及其问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
vue eslint报错:Component name “xxxxx“ should always be
新手在使用脚手架时总会报各种错,下面这篇文章主要给大家介绍了关于vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue的4种解决方案,需要的朋友可以参考下2022-07-07
在前后端分离开发中，需要前端调用后端api并进行内容显示，所以本文就介绍了Vue+SpringBoot前后端分离跨域问题，感兴趣的可以了解一下2021-08-08
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享,数据缓存等等,下面这篇文章主要给大家介绍了关于Vuex(多组件数据共享的Vue插件)搭建与使用的相关资料,需要的朋友可以参考下2022-10-10
最近做项目遇到这样的需求,需要上传的文件格式必须是pdf格式,方便我们查看,本文给大家分享element上传文件对格式限制的处理方案,感兴趣的朋友一起看看吧2024-02-02
所谓祖孙组件,也就是3层嵌套的组件,下面这篇文章主要给大家介绍了关于VUE中如何优雅实现爷孙组件的数据通信的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了Vue与.net Core 接收List＜T＞泛型参数，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-04-04
今天小编就为大家分享一篇vue-cli脚手架搭建的项目去除eslint验证的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue项目keepAlive配合vuex动态设置路由缓存方式
vue项目keepAlive配合vuex动态设置路由缓存方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要介绍了Vue3使用element-plus实现弹窗效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论