当前位置: 代码迷 >> 综合 >> Echart 和 Ucharts 的区别
  详细解决方案

Echart 和 Ucharts 的区别

热度:78   发布时间:2023-12-03 05:22:44.0

一.Ucharts

1.改造后的插件可以跨端使用,支持H5,小程序(微信/支付宝/百度/头条),APP,调用简单方便性能及体验极佳。

2.虽然没有Echarts图表功能强大,但可以实现一套业务逻辑各端通用,并解决了支付宝小程序图表显示模糊问题。

3.支持单页面多图表,demo中单页10个图表,响应速度超快。

4.支持入场动画及ToolTip动画效果

5.独特支持横屏模式。

二.为何不用Echarts

1.相比Eachrts及复杂的配置,Ucharts几乎等于傻瓜式的配置

2.Eachrts在跨端使用更复杂,Ucharts只需要简单的两个<canvas>标签轻松区别搞定,代码整洁易维护。

3.Echarts在IOS端图表显示错位,只能引用网页解决

4.Ucharts打包后的体积相比Echarts小很多很多,所以性能更好

5.图表样式均可自定义,懂js的都可以读懂插件源码,直接修改wxcharts.js源码即可。

三.Ucharts的使用

在上一篇文章已经讲过了Echarts的用法,今天来浅谈一下Ucharts的用法及一些简单的配置。

使用第三放插件肯定要进行下载:uCharts高性能跨全端图表

 

 

如,我想把这张图修改成饼状图。

 

然后将更新的代码复制粘贴到配置项里面就可以了。诸如这类的配置还有很多例如

修改图例:

 

修改提示窗:

可以进行任意的配置

{"categories": ["2016","2017","2018","2019","2020","2021"],"series": [{"name": "目标值","data": [35,36,31,33,13,34]},{"name": "完成量","data": [18,27,21,24,6,28]}]
}

X轴的配置区域

如果不写就会根据你页面的数据来自动生成。

 data里面的每一个数据,都代表横着的每一个数据。下一个data又代表里面的每一项数据。

关于Y轴的配置问题:

Y轴的数据,关于这个问题,我在配置表格的时候,本想配置Y轴,观察完之后

并没有发现相关的配置于是我打开全局文件搜索,里面对应坐标的数组,任然是没有任何的响应。

这个时候我就很奇怪,那上边的数值是哪里来的,突然我发现,最高点和我对应的数值的最高点是一样的,最低点是不一样的。这里面所谓的最高点和最低点指的40,5。观察data里面的两组数据你可以发现,最大的是36,最小的是5。

现在我门进行修改里面的值将最大值36------------>56 ,最小的6------------>11。 

 

与之对应的是:

 关于配置还有很多建议参考官方网站进行配置。