脚本宝典收集整理的这篇文章主要介绍了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+echarts图表使用的问题记录全部内容，希望文章能够帮你解决vue+echarts图表使用的问题记录所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。