vue+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里面加 trueoption && myChart.setOption(option,true);

【vue+echarts图表使用的问题记录】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图表使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！