找到需要进行编辑的饼图,然后点击数据,使之呈现下图中的选定状态.,在选定的数据上右击鼠标,然后在展开的菜单中点击选择最下面的“设置数据标签格式”.,在标签选项对话框内点击箭头所指的类别名称即可完成类别名称的添加。
类别显示为饼图中的单个扇区。每个类别都会显示在图表图例中。系列组可选。系列作为饼图中的单个扇区显示。每个系列也都显示在图表图例中。
水球图(Liquid Fill Chart)是Echarts的一个插件(在官方文档中没有),可以用来优雅的展示百分比数据。
HTML中引入水球图:
其中这两个文件都可以在官方github项目中dist目录下获取到, echarts 、 echarts-liquidfill 。
通过npm引入:
注意: echarts-liquidfill@3 版本匹配 echarts@5 版本,echarts-liquidfill@2 版本匹配 echarts@4 版本
像其他echarts图配置一样,都需要配置type属性
通过传入多个数据值来展示多个数值或制造多个波浪的效果
通过设置 waveAnimation 属性为 false,可以实现静止的波浪效果,另外,通过设置 animationDuration 和 animationDurationUpdate 属性的值,可以调整波浪的动画,同样可以实现静止的效果。
通过设置 amplitude(振幅) 属性可以实现水面的效果
水球图不仅能被设定为圆形,也可以被设置为其他形状,如矩形、钻石菱形、箭头型等,也可以设置为包含其容器的形状,甚至可以通过SVG来设定
默认水球图的配置
部分属性:
1、下载好开发包后就可以开始了,第一步引入开发包,和需要的主题文件(可定义自己的主体文件),并定义好页面布局。2.0以后上的版本,需要把开发包放到body下,否则ie低版本会出现属性未找到的错误,导致图标初始化失败。2、第二步,普通初始化图表,通过调用开发包方法,有两种初始化方式,
1.var myChart = echarts.init(document.getElementById("echart"))
2.var myChart=require('echarts').init(document.getElementById("echart"))
一般建议使用第一种方法进行初始化 *** 作。
3、第三步,设置option属性,来给图表设置数据,option是数组元素,tooltip:提示框,legend图例,calculable可设置是否拖拽,series设置数据(data类型也为数组类型),开始先随机初始化几条模拟数据,
4、到这一步,就完成了,图表初始化的步骤,效果如下图所示。然后大家可以改变下图标的样式,2.0版本留了设置主题的方法,可设置setThem()对图表样式进行修改。
5、看看主题怎么配置,设置色版,设置主题颜色,不一一介绍了,请大家请看下面代码:
6、通过上面主题的添加完成了对样式的修改,当然最后大家记嘚设置myChart.setTheme(theme)
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)