Echarts基础及适配

基本介绍

echarts.min.js

案例适配方案

可视化面板布局适配屏幕

核心：基于 flexible.js + rem 智能大屏适配

• 设计稿是1920px

  • flexible.js 把屏幕分为 24 等分
  • cssrem插件的基准值是80px
    • 帮助我们自动转换css样式
    • 插件 - 配置按钮 - 配置拓展设置 - Root Font Size里面设置

• vscode 插件

  • easy-less （less文件转换成css文件插件）

flexible 引入使用

flexible.js （注：这份文件中是将基准改为了24）

• 如何查看是否引入成功 页面上的html 是否显示了字体大写

• 把 10 等分更改为 24 等分
• 在 vscode中安装插件 cssrem 并 设置 （需要重启才可以生效）

**

项目开始准备

• 对于公共部分的盒子，准备一个公共的面板样式 panel

盒子的四个角如何实现

2.数字显示
图标字体的使用

3.地图模块动画
animation 动画的属性**

基本使用与配置注释

option = {
     //color 线条得颜色 注意是个数组 
  color:[],
    //标题
    title: {
        text: '折线图堆叠'
    },
  //图表提示框组件，鼠标放上去提示信息
    tooltip: {
      //触发方式
        trigger: 'axis'
    },
  //图例组件
    legend: {
      //series 里面有了name值 则legend 里面得data可以删掉
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
  //网格配置  grid可以控制线型图 等直角坐标系 图表大小 
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
      //是否显示刻度
        containLabel: true
    },
  //工具箱组件，可以另存为图片等功能
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
  //x轴相关配置
    xAxis: {
      //坐标轴类型
        type: 'category',
      //是否让线条和坐标轴有缝隙
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
  //系列图表配置，决定显示哪种类型的图表 
    series: [
        {
            name: '邮件营销',
            type: 'line',
          //数据堆叠 一般是不需要得 
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

在项目中多次使用 echarts ，为了防止变量污染，减少命名冲突，可以采取立即执行函数

图表跟随屏幕缩放适配

在vue项目中 如何进行缩放适配呢?

• html

  //让图表跟随屏幕自动的去适应
    window.addEventListener("resize",function(){
        myChart.resize()
    })

• vue ```javascript data(){ return{ resizefun:null } },

mounted() { this.resizefun =()=>{ //这里的myChart就是要自适应的图表容器Id this.$echarts.init(document.getElementById(‘echart1’)).resize() } window.addEventListener(‘resize’,this.resizefun) }, ```

Echarts图表中的文字适配

https://blog.csdn.net/GrootBaby/article/details/89211013
https://blog.csdn.net/MFWSCQ/article/details/102522944

其它

文章

大屏自适应方案
https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html
https://cloud.tencent.com/developer/article/1529755
https://blog.csdn.net/viewyu12345/article/details/83153718

可操作
https://blog.csdn.net/qq_36710522/article/details/102784513
https://blog.csdn.net/tangdou369098655/article/details/104191015

vue 与 echarts
https://www.bilibili.com/video/BV1iz411b7ej?p=8