一、下载
官方网址:https://www.echartsjs.com/(但是该网址内容为英文且内容较不齐全)
中文网址:https://echarts.apache.org/zh/index.html(推荐)
二、Echarts-基础配置
series:图标数据,指定什么类型的图标,可以多个图表重叠
xAxis:直角坐标系 grid 中的 x 轴
boundaryGap:
坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
yAxis:直角坐标系 grid 中的 y 轴
grid:直角坐标系内绘图网格
title:标题组件
tooltip:提示框组件
legend:图例组件
color:调色盘颜色列表
数据堆叠,同个类目轴上系列配置相同的`stack`值后 后一个系列的值会在前一个系列的值上相加。
注:以上列举的都是一部分大属性,其内还有多个小属性,遇到想实现的或者不知道的都可以在中文网址中的手册中查找,或者直接百度
三、使用步骤:
1、下载并引入echarts文件
2、引入jQuery文件(因为有图形需要依靠jQuery)
3、准备一个具备大小的盒子(DOM容器)
4、初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
在网站中选择直接想要的图形,并进行适当的删减,达到自己心中的要求则引入到js中
5、将配置项设置给echarts实例对象(渲染)
myChart.setOption(option);
注:使用多个图形时,如果不在同一模块,建议没给模块使用一个(function(){})();立即执行函数包裹,防止变量名重复,导致文件不能执行
本文介绍了Echarts的下载渠道,包括官方英文网站和推荐的中文网站。重点讲解了Echarts的基础配置,如series、xAxis、yAxis、grid、title、tooltip、legend和color等属性,并阐述了数据堆叠的概念。接着,详细阐述了使用Echarts的五个步骤,包括下载文件、引入jQuery、准备DOM容器、初始化实例和设置配置项。文章提醒在使用多个图形时注意避免变量冲突。
7708

被折叠的 条评论
为什么被折叠?



