前端之js-echarts组件介绍

时间:2025-01-29 14:36:15

Echarts.init:

全局 echarts 对象,在 script 标签引入 echarts.js 文件后获得,或者在 AMD 环境中通过 require('echarts') 获得。

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
 或者

<script
type="text/javascript">
        // 路径配置
        require.config({
            paths: {
               
echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require(
            [
               
'echarts',
               
'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载
               
'echarts/chart/line'
            ],

前端之js-echarts组件介绍

Legend:

组件长相:

前端之js-echarts组件介绍

相关代码:

前端之js-echarts组件介绍

Toolbox:

前端之js-echarts组件介绍

前端之js-echarts组件介绍

toolTip

前端之js-echarts组件介绍

前端之js-echarts组件介绍

xAxis/yAxiis:

前端之js-echarts组件介绍

前端之js-echarts组件介绍

Series

前端之js-echarts组件介绍

前端之js-echarts组件介绍

Brush

显示刷子选中区域的数据详情

前端之js-echarts组件介绍

Datazoom

dataZoom 组件 用于区域缩放

前端之js-echarts组件介绍

Visualmap

连续性

前端之js-echarts组件介绍

分段性:

前端之js-echarts组件介绍

Parallel

前端之js-echarts组件介绍

parallelIndex

前端之js-echarts组件介绍

Json:javascript object notation

JS中的变量声明:

前端之js-echarts组件介绍

Json中的对象:属性名必须加双引号

{

   “name”:“abc”,

“age”:20,

“school”:{//可嵌套

“  ”:”  ”,//有逗号

“  ”:”  ”//无逗号

}

}

JS对象(-->JSON.stringify(var)  JSON.parse(json) <--)      json字符串

自适应布局:

使用百分比宽度来自适应屏幕大小。现在的移动设备大小都是960*640,40*‘800

如何解决html字体大小自适应?

<style>

@media screen and (max-width:980px)

 {

 body{

 font-size:20px;

 }

 }

 @media screen and (max-width:580px)

 {

 body{

 font-size:14px;

 }

 }

 @media screen and (max-width:380px)

 {

 body{

 font-size:8px;

 }

 }

 </style>

或者

把字体大小用百分比%做单位,例如:font-size:20%;

或者

最简单的方法给父元素(一般是body)设置一个px单位的字体,其他字体用em.