vue+echarts图表怎么用

这篇文章主要为大家展示了“vue+echarts图表怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue+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图表怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！