echarts ucharts 和_使用chart和echarts制作图表

最新推荐文章于 2024-05-26 12:10:26 发布

weixin_39636696

最新推荐文章于 2024-05-26 12:10:26 发布

阅读量1k

点赞数

文章标签： echarts ucharts 和

本文链接：https://blog.csdn.net/weixin_39636696/article/details/111520384

版权

前言

chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。它可以帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。Chart.js基于HTML5 canvas技术，支持所有现代浏览器，并且针对IE7/8提供了降级替代方案。并且它不依赖任何外部工具库，轻量级(压缩之后仅有4.5k)，并且提供了加载外部参数的方法。

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

1.使用chart制作的六种图表类型

①曲线图(Line charts)

②柱状图(Bar charts)

③雷达图或蛛网图(Radar charts)

④饼图(Pie charts)

⑤极地区域图(Polar area charts)

⑥环形图(Doughnut charts)

2. 起步

引入Chart.js文件

首先我们需要在页面中引入Chart.js文件。此工具库在全局命名空间中定义了Chart变量。

创建图表

为了创建图表，我们要实例化一个Chart对象。为了完成前面的步骤，首先需要需要传入一个绘制图表的2d context。