echart面试题

 前端全部面试题

https://blog.csdn.net/qq_40055200/article/details/104637574

 echart面试题

echart：可视化数据图形

1.创建一个具备echart大小的DOM（id为main的div）

<div id="main" style="width:200px;height:200px"></div>

2.初始化视图

var myChart = echarts.init(document.getElementById('main'))

3.样式配置和数据

 var option = {
            title: {  // 标题
                text: 'ECharts 入门示例'
            },
            tooltip: {},  // 鼠标悬停气泡
            legend: {  // 图例
                data:['销量']
            },
            xAxis: { // 配置横轴类别
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},  // 配置纵轴类别
            series: [{  // data参数，通过函数进行数据返回渲染
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
};

4.渲染图展示表

myChart.setOption(option);

echart怎么按需引入 

• 安装echarts
• 引入echarts
• 按需引入echarts图表和组件

npm install echarts --save

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

echarts进行过代码封装吗

进行过，怎么封装的？

封装Echarts组件_saadiya~的博客-CSDN博客

封装的好处：

• 样式统一；
• 代码冗余；
• 封装特有的功能，例如屏幕分辨率（屏幕，怎么适配的？）

echarts适配：resize方法

获取屏幕缩放比例：window.screen

监听屏幕缩放：window.onresize;document.addEvventListener('resize',()=>{})

document.body.clientWidth; 

屏幕分辨率的高：window.screen.height*getRatio()/100 //乘以缩放比例为真实的像素

屏幕分辨率的宽：window.screen.width*getRatio()/100 //乘以缩放比例为真实的像素

屏幕可用工作区高度：window.screen.availHeight;

屏幕可用工作区宽度：window.screen.availWidth;

你们哪里用到echart 

做一些数据展示统计页面 

遇到的问题：切换其他统计图时，出现卡顿或者数据还存在的问题,怎么办？

把返回的数据清空

销毁这个统计图的资源；；；

clear()方法则是清空图例数据，不影响图例的resize，而且能够释放内存

beforeDestroy () {this.chart.clear()},

3.echarts的series（系列）属性：

意思就是说：一系列的数据

series.type(图标 类型):pie(饼状系列），line(折现系列),bar（柱状图），scatter(散点图），树图（tree）,关系图（graph）......

4.组件定位position:absolute

绝对定位是基于echarts容器DOM节点

5.阴影属性

series: [
    itemStyle:{
        // 阴影大小
        shadowBlur: 200,
        // 阴影水平方向上的偏移
        shadowOffsetX:0,
        // 阴影垂直方向上的偏移
        shadowOffsetY: 0,
        // 阴影颜色
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    },
// itemStyle的emphasis是鼠标 hover 时候的高亮样式
     emphasis: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
]