数据可视化

本文介绍了Echarts的下载渠道,包括官方英文网站和推荐的中文网站。重点讲解了Echarts的基础配置,如series、xAxis、yAxis、grid、title、tooltip、legend和color等属性,并阐述了数据堆叠的概念。接着,详细阐述了使用Echarts的五个步骤,包括下载文件、引入jQuery、准备DOM容器、初始化实例和设置配置项。文章提醒在使用多个图形时注意避免变量冲突。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、下载

官方网址: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(){})();立即执行函数包裹,防止变量名重复,导致文件不能执行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值