Echarts的基本用法和步骤（echartson）

在vue中如何使用echarts

第一步当然还是进入你所在项目的文件夹。第二步使用npm安装你所需要用到的组件，》使用以下命令安装echarts组件 npm install echarts 》安装好echarts后，还需要安装echarts3d图形所需的组件，echarts-gl。使用以下命令安装即可。假设你不需要制作3D的图表，则不需要安装。

意思就是可以直接把echarts实例当中vue中的组件来使用，不用每次都获取dom、挂在dom，轻松使用echarts的所用功能。。v-charts 是基于vue2二次封装的图表组件库，功能没有echarts多 但也够用了，官网很详细，这里用一个官网例子说明问题。

在 Vue3 项目中使用 ECharts 图表，数据改变后并且赋值成功视图却不更新的原因可能是因为 ECharts 的实例没有被正确地销毁和重新创建。你可以尝试在数据变化时销毁旧的 ECharts 实例，然后重新创建一个新的实例。具体实现可以参考这篇文章。

在vue项目中使用echarts制作3d柱状图

第一步当然还是进入你所在项目的文件夹。第二步使用npm安装你所需要用到的组件，》使用以下命令安装echarts组件 npm install echarts 》安装好echarts后，还需要安装echarts3d图形所需的组件，echarts-gl。使用以下命令安装即可。假设你不需要制作3D的图表，则不需要安装。

配置项如图，调整grid3D.viewControl.alpha和grid3D.viewControl.beta的值即可 官方这个例子，设置 option.grid3D.viewControl.beta = 0 即可。

在上面的示例中，我们将柱状图的 `selectedMode` 属性设置为 `single`，这样就可以实现单选模式了。在单选模式下，单击某个柱子将会选中该柱子并取消选中其他柱子。请注意，如果您需要在单选模式下获取用户选择的柱子，可以使用 echarts 的事件监听器来实现。

使用css的display属性控制图表的显隐时，如果父容器没有给出宽高图表的宽度会变成0，父容器的宽度设置为100%时，图表的宽度会变成100px；这个时候切换显隐图表会变小，想要图表自适应可以使用vue-echarts的autoresize属性。

(4)、React中使用ECharts——饼图

如果要设置单独一项的样式，也可以把该项写成配置项对象。

例如下图的饼图，实现右图鼠标悬停部分不被高亮放大。先将radius设置比例改小，防止设置完成依然看起来比较大。然后设置hoverAnimation为false。任何访问来源都禁止悬停高亮显示效果。然后回到第一步刷新一下，鼠标悬浮到饼图模块时不会被高亮显示。

主要是通过设置label标签的字体，内容通过rich来重置字体大小，解决换行重叠问题。

找到需要进行编辑的饼图，然后点击数据，使之呈现下图中的选定状态.，在选定的数据上右击鼠标，然后在展开的菜单中点击选择最下面的“设置数据标签格式”.，在标签选项对话框内点击箭头所指的类别名称即可完成类别名称的添加。类别显示为饼图中的单个扇区。每个类别都会显示在图表图例中。系列组可选。

饼图中的series有个avoidLabelOverlap属性，avoidLabelOverlap：是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。