ECharts

最新推荐文章于 2024-04-01 08:18:37 发布

巷子里有条狗

最新推荐文章于 2024-04-01 08:18:37 发布

阅读量191

点赞数

分类专栏：前端文章标签： echarts javascript

本文链接：https://blog.csdn.net/qq_40561863/article/details/129917199

版权

前端专栏收录该内容

50 篇文章 0 订阅

订阅专栏

Echarts是百度开发的免费JavaScript图表库，用于数据可视化。文章介绍了如何使用Echarts进行图表绘制，包括安装、初始化和配置图表。此外，还讨论了大屏适配策略，如使用rem和flexible.js实现不同分辨率的兼容。同时提到了Echarts的核心属性如grid、tooltip、xAxis、yAxis和series，并提及Echarts社区资源。

摘要由CSDN通过智能技术生成

Echarts

数据可视化

借助图形化的手段更加清晰的传达信息
换句话说，把数据转为图形，看起来更加直观，更有说服力

常见的数据可视化js库

Echarts 百度出品 免费  类似于 wps
HighCharts 国外收费  类似于office
AntV  蚂蚁金服

Echarts概念

是百度前端团队开发的基于Canvas的js图表库
PC、移动端

官网：

百度  "echarts"
https://echarts.apache.org/zh/index.html

使用Echarts的步骤

0 安装插件

npm i echarts

1 引入插件

import * as echarts from "echarts";

2 准备div容器,提供宽高

<div id="box" style="width: 800px; height: 400px"></div>

3 初始化echarts实例对象

  mounted() {
    //初始化
    var myChart = echarts.init(document.getElementById("box"));

4 配置

let option={
	、、、具体配置一定一定要参看官网
}

5 绘制图表

myChart.setOption(option);

大屏

可视化使得数据表现得更加直观，数据特点更加突出

大屏只是数据可视化的其中的一个表现终端

适配

只需要写一套代码就能够兼容各种分辨率的屏幕
核心就是利用rem
只需要在根节点下设置font-size值，今后所有单位全部用rem，
比如fontsize设置成80px，那么今后1rem=80px
今天介绍一个flexible.js工具，能够根据屏幕大小自动改变font-size，搭配rem

下载flexible.js

flexible是阿里团队开源的一个js库，本身就是用来解决移动端的自适应问题

原理：flexible.js搭配rem，引入后就会自动在根节点用到font-size属性，今后改变屏幕大小时，能够自动更改font-size

npm i  lib-flexible

引入

1 src下新建utils目录,然后把下载好的flexible.js拷贝进入该目录
2 main.js中引入：
//引入flexiblejs使之生效
import './utils/flexible.js'

验证flexible插件引入成功与否

F12 查看 元素---》
<html data-dpr="1"  style="font-size: 54px;  代表成功
dpr:物理像素比

修改 flexible.js源码

        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        代表设计稿最多支持540px，如果屏幕分辨率>540px,则依然按照设计稿的540

更改后：

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        if (width / dpr > 1920) {
            width = 1920 * dpr;
        }
        //flexible把屏幕分成了10等份
         //如果设计稿的基准宽度为750px，则每一份的宽度也就是750/10=75px
         //那么就需要设置 1rem=75px
         //上课以设计稿为1920px为基准，把10等份改为24等份，意味着每一份宽度就是
         //1920/24=80px--->那么就需要设置 1rem=80px
        var rem = width / 24;
        
        
 总结：最终一个rem设置成多少个px取决于 设计稿基准宽度/份数

vscode中下载插件 cssrem (不是npm方式)

设置：

Cssrem: Root Font Size
root font-size (unit: px), default: 16
文本框设置80

注意：设置完后需要重启vscode

大屏项目

1 初始化css

https://www.bootcdn.cn/normalize/

2 设置body的背景图

3 header布局

4 main布局

5 Pannel布局

6 Center布局

在vue中引入字体

1 在assets下新建font目录，然后把字体文件*.ttf拷贝进该目录中
2 在font目录下新建font.css

	/* 声明字体 */
    @font-face {
        font-family: 'DS-DIGIT';
        src: url('DS-DIGIT.TTF');
    }
    
3 在main.js中引入使得字体生效
	
	//引入字体使之生效
	import '@/assets/font/font.css'
4 在样式中使用即可
  font-family: 'DS-DIGIT';

Echarts核心属性

1 grid -坐标系

      //坐标，再不改变盒子的前提下，可以通过该属性直接控制图表的大小，间距等
      grid:{
        width:"85%",
        height:"60%",
        left:"10%",
        top:"10%"
      },

2 tooltip提示框组件

 //提示框
      tooltip:{
         //是否显示
         show :true,
         //触发类型  axis:轴
         trigger:"axis",
         //指示器类型
          axisPointer:{
            show:true,
            type:'shadow'
          }
      },

3 xAxis -x轴

 xAxis: {
        
        type: "category",
        data: ["旅游行业",
          "教育培训",
          "游戏行业",
          "医疗行业",
          "电商行业",
          "社交行业",
          "金融行业",]
      },

4 yAxis-y轴

 yAxis: {
        type: "value",
        //分割线
        splitLine:{
            //线条样式
            lineStyle:{
                //线条颜色
                color:'rgba(255,255,255,0.1)'
            }
        }
      },

5 series -系列（核心，描述图表数据以及类型、宽高等特点）

     series: [
        {
          data: [200, 300, 300, 900, 1500, 1200, 600],
          //系列名，可以用于提示框的反馈
          name:"直接访问",
          //bar 柱状图
          type: "bar",
          //柱子宽度
          barWidth:"40%",
          //柱子风格
           itemStyle:{
            //颜色
                color:"#2f89cf",
                //圆角
                 borderRadius:8
           }
        },
      ],

6 legend–图例组件（能够控制图表的某些部位的隐藏和显示）

Echarts社区

实现客运效果图（搭配地图）

1 百度 Echarts社区

https://www.isqqw.com/
搜索 客运流量

2 下载china.js,并且放入 utils中

3 在main.js引入使之生效

//引入china.js使之生效
import './utils/china.js'

4 编写组件

巷子里有条狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts

原理：flexible.js搭配rem，引入后就会自动在根节点用到font-size属性，今后改变屏幕大小时，能够自动更改font-size。flexible是阿里团队开源的一个js库，本身就是用来解决移动端的自适应问题。2 下载china.js,并且放入 utils中。可视化使得数据表现得更加直观，数据特点更加突出。大屏只是数据可视化的其中的一个表现终端。3 初始化echarts实例对象。3 在main.js引入使之生效。3 header布局。5 Pannel布局。6 Center布局。
复制链接

扫一扫