echarts
文章平均质量分 51
生一先生
这个作者很懒,什么都没留下…
展开
-
Echarts---直角坐标系下的坐标轴
直角坐标系下有3种类型的坐标轴(axis):类目型(category)、数值型(value)和时间型(time)。 (1)类目型:必须指定类目列表,坐标轴内有且仅有这些指定类目坐标。 (2)数值型:需要指定数值区间,如果没有指定,将由系统自动计算从而确定计算数值范围,坐标轴内包含数值区间内的全部坐标。 (3)时间型:时间型坐标轴用法与数值型的非常相似,只是目标处理和格式化显示时会自动转变为时间,并且随着时间跨度的不同而自动切换需要显示的时间粒度,例如:时间跨度为一年,系统将自动显示以月为单位的时间粒度;时间原创 2021-06-16 10:54:54 · 1037 阅读 · 0 评论 -
Echarts直角坐标系下的网格及坐标轴
使用ECharts绘制图表时,可能会发现图表真正的绘图区域和图表容器之间有一些间隔,有时看上去不太协调。查看相关API可以得知,可以通过调整几个属性值控制绘图区域与容器之间的间距。 因此,需要了解直角坐标系下如何绘制网格(grid)及其作用、如何绘制直角坐标系下的x轴(xAxis)和y轴(yAxis) 。 在ECharts的直角坐标系下,有两个重要的组件:网格(grid)和坐标轴(axis)。 ECharts中的网格是直角坐标系下定义网格布局和大小及其颜色的组件,用于定义直角坐标系整体布局。ECharts中原创 2021-06-16 10:52:04 · 1538 阅读 · 0 评论 -
Echarts简介----基础架构和常用术语
对于ECharts官方文档,不要期望一天就能够看完整个文档,并理解文档的所有内容,而应该将文档看成一部参考手册,在使用ECharts绘制图表时,应该知道如何随时快速地查询。 对于ECharts这么庞大的文档,没有必要记忆,也不太可能记忆全部配置项的内容,因此,只需记住几个常用配置项的英文单词,如title、legend、toolbox、tooltip等。在ECharts 4.x的官网中,最为重要的文档为实例、教程、API和配置项手册。查询ECharts 4.x“文档”菜单中“API”子菜单的步骤如下。原创 2021-06-16 10:44:14 · 562 阅读 · 0 评论 -
用echarts绘制饼图---绘制南丁格尔玫瑰图
南丁格尔玫瑰图又名鸡冠花图、极坐标区域图,它将柱图转化为更美观的饼图形式,是极坐标化的柱图,放大了数据之间差异的视觉效果,适用于对比数据原本差异小的数据。 在ECharts中绘制南丁格尔玫瑰图时,参数与标准饼图类似,但是南丁格尔玫瑰图有一个特殊的参数是roseType,称为南丁格尔玫瑰图模式,可以使用的值有两种:“radius”(半径)和“area”(面积)。 当使用半径模式时,以各个item的值作为扇形的半径,一般情况下,半径模式可能造成较大的失真;当使用面积模式时,以各个item的值作为扇形的面积,一般原创 2021-06-16 10:42:08 · 3342 阅读 · 0 评论 -
用echarts绘制饼图---绘制嵌套饼图
嵌套饼图用于在每个类别中再嵌套多个类别,反映各类数据之间的比例关系。嵌套饼图即两种饼图的嵌套,外层是一个环形图,内层是一个标准饼图或环形图。 某大学有3个学院,各学院的总学生人数如表所示。利用某大学3个学院的学生总人数的数据绘制嵌套饼图,如图所示。源代码如下:<html><head> <meta charset="utf-8"> <!--引入ECharts脚本--> <script src="js/ech原创 2021-06-16 10:39:32 · 3500 阅读 · 0 评论 -
用Echarts绘制折线图-----阶梯图
阶梯图为折线图的一种类型。与折线图不同的是,阶梯图是使用间歇型跳跃的方式显示一种无规律数据的变化,用于显示某变量随时间的变化模式是上升还是下降。在现实生活中,无规律的数据有很多,例如:公共汽车票价一般会保持几个月到几年不变,然后某天突然加价或降价;名胜风景区的门票价格也会在一段时间内维持在同一价格。诸如此类的还有不少,如油价、税率、邮票价、某些商品价格等。 利用某风景名胜区门票价格数据绘制阶梯图,如图所示。由图可知,图形显示的是景区A、景区B和景区C三种不同旅游景区门票在一段时期内的价格波动。不过门原创 2021-06-16 10:36:43 · 3840 阅读 · 0 评论 -
用Echarts绘制折线图-----堆积面积图和堆积折线图
堆积折线图的作用是用于显示每一数据所占大小随时间或有序类别而变化的趋势,展示的是部分与整体的关系。 堆积面积图是在折线图中添加面积图,属于组合图形中的一种。堆积面积图又被称为堆积区域图,它强调数量随时间而变化的趋势,用于引起人们对总值趋势的注意。与堆积折线图不同,堆积面积图可以更好地显示有很多类别或数值近似的数据。 在ECharts中,实现堆积的重要参数为stack。只要将stack的值设置为相同,两组就会堆积;相反,若将stack的值设置为不相同,则不会堆积。利用某商城一周内电子产品的销量数据绘制堆积原创 2021-06-16 10:35:16 · 3946 阅读 · 0 评论 -
用Echarts绘制折线图-----标准折线图
折线图(Line)也是最为常用的图表之一,核心思想是趋势变化。 折线图是点、线连在一起的图表,可反映事物的发展趋势和分布情况,适合在单个数据点不那么重要的情况下表现变化趋势、增长幅度。 为了更直观地查看商品销售数据和名胜风景区的门票价格数据,需要在ECharts中绘制不同的折线图进行展示,如标准折线图、堆积面积图、堆积折线图和堆积面积折线图。标准折线图是指由x轴与y轴组成区域内的一些点、线,以及这些点、线或坐标轴的文字描述,常用于显示数据随时间或有序类别而变化的趋势,可以很好地表现出数据是递增还是递减、原创 2021-06-16 10:31:51 · 2515 阅读 · 0 评论 -
用echarts绘制瀑布图
瀑布图其实是柱状图的一种特例。瀑布图的核心是按照维度/指标分解,如公司收入按用途分解、公司年利润按分公司分解、业绩按销售团队分解。相对于饼图,瀑布图的优势在于:拆解项较多时,瀑布图通过数字的标记仍可清晰辨识,而饼图在分解项大于5时会不易辨别。 利用深圳月最低生活费组成数据绘制瀑布图,如图所示绘制瀑布图与一般柱状图的代码差别不大,最为关键的代码是itemStyle代码块。itemStyle代码块设置了柱子堆叠部分或堆叠部分边框的颜色,将每根柱子堆叠部分的颜色设置为透明色。 如果需要将颜色设置成不透明,原创 2021-06-16 10:28:51 · 4773 阅读 · 0 评论