在vue中使用 Echarts组件化 父子组件--> UI 的调整

原样式：

 

一、主题的使用

　　1.在目录下新建 文件夹them 用来存放 不同的主题

　　2.引入js

　　3.找到图表的组件  在 初始化echarts  => 实例化对象当中的 init() 接收第二个参数 ，第二个参数就需要指明 主题的名称

　　变化：

 

二、图表的圆角

　　1.通过 开发者工具可以看到整个图表在一个名字叫 canvas的标签中

 

　　 那么 我们直接从 css 文件中 更改 canvas标签的样式：

　　变化：

 

三、图表的标题

 　　图表的标题涉及 配置项 ，需要找到 组件所在的位置 ，设置组件的 option 来对标题进行配置

变化：

 

四、坐标轴的位置

　　如果感觉 上面标题的位置 和图表有一些近，或者 标题太大把图表挡住了。可以通过 改变坐标轴 从而改变图表的位置。

  效果：   

　　可以看到我们给 左边和底部 设置了 3% 的距离 ，可是为什么 坐标轴的文字看起来还是很近呢？  原因就是 这个 3%只是控制的图表的位置，并不包括坐标轴文字的位置

　　那么我们需要在 增加 一个属性 ，来让他这个距离 包括坐标轴上的文字。

  效果：

 

五、柱状图条目

　　宽度、文字、右边圆角、颜色渐变、背景

样式展示：

 

 找到组件的配置项进行配置：

 

 渐变方向图解： 0,0,1,0 是从左向右渐变

 

背景配置：