echarts 图例加上数据_vue实战开发019:Echarts修改各种标签的字体大小

Vue中设计图表有个很强大的插件，那就是Echarts，这是一款强大的可视化图表制作工具，用纯 Javascript 打造的图表库,提供了丰富多彩的图表样式，使用Echarts我们可以快速的实现数据可视化操作，而且这些图标逼格都很高，特别的专业。

为了找到合适的模板，通常我们会在Echarts实例中找到一些合适的图标然后在线修改下参数看看是否能满足项目需求，如果合适的话我们就可以把这个实例下载下来再自行修改模板以符合自己的需求，我在设计原型的时候需要用到些图表来展示，所以这里我只需要修改下图表样式即可，接下来需要修改下图标中的字体大小。

标题字体大小修改：

在option中的title下添加textStyle对象，在样式中写入 fontSize即可，x:'left', //靠左显示 ，如果你想居中显示，把left改成center即可

textStyle:{ fontSize:32, //字体大小},

坐标字体大小修改 ：

在option中找到xAxis和yAxis对象，在对象中分别添加axisLabel对象，并在对象中添加textStyle对象，在样式中写入 fontSize即可

axisLabel:{ textStyle:{ fontSize:25 }}

标签字体大小修改 ：

修改series中的label字体大小，在label添加normal对象，接着在添加textStyle对象，在样式中写入 fontSize即可。

图例字体大小修改：

在option中找到legend对象，在对象中添加textStyle对象，在样式中写入 fontSize即可。orient: 'vertical',调整图例为垂直样式，通过top、left、right、bottom等属性控制图例位置即可。

legend: { bottom: 10, left: 'center', data: ['西凉', '益州','兖州','荆州','幽州'], textStyle:{ fontSize:28, }},

饼状图数据标签字体大小修改：

在option中的series中，数据一般存放在data中，一般以键值对的形式展示， 如{value:535, name: 'LH-B3-1F'},现在我们要修改的是数据中显示的name，在itemStyle新增normal对象，在label中添加textStyle对象，在样式中写入 fontSize即可。