基本介绍

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 是否显示了字体大写

image.png

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

image.png

**

项目开始准备

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

盒子的四个角如何实现

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

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

基本使用与配置注释

  1. option = {
  2.      //color 线条得颜色 注意是个数组 
  3.   color:[],
  4.     //标题
  5.     title: {
  6.         text: '折线图堆叠'
  7.     },
  8.   //图表提示框组件，鼠标放上去提示信息
  9.     tooltip: {
  10.       //触发方式
  11.         trigger: 'axis'
  12.     },
  13.   //图例组件
  14.     legend: {
  15.       //series 里面有了name值 则legend 里面得data可以删掉
  16.         data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
  17.     },
  18.   //网格配置  grid可以控制线型图 等直角坐标系 图表大小 
  19.     grid: {
  20.         left: '3%',
  21.         right: '4%',
  22.         bottom: '3%',
  23.       //是否显示刻度
  24.         containLabel: true
  25.     },
  26.   //工具箱组件，可以另存为图片等功能
  27.     toolbox: {
  28.         feature: {
  29.             saveAsImage: {}
  30.         }
  31.     },
  32.   //x轴相关配置
  33.     xAxis: {
  34.       //坐标轴类型
  35.         type: 'category',
  36.       //是否让线条和坐标轴有缝隙
  37.         boundaryGap: false,
  38.         data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  39.     },
  40.     yAxis: {
  41.         type: 'value'
  42.     },
  43.   //系列图表配置，决定显示哪种类型的图表 
  44.     series: [
  45.         {
  46.             name: '邮件营销',
  47.             type: 'line',
  48.           //数据堆叠 一般是不需要得 
  49.             stack: '总量',
  50.             data: [120, 132, 101, 134, 90, 230, 210]
  51.         },
  52.         {
  53.             name: '联盟广告',
  54.             type: 'line',
  55.             stack: '总量',
  56.             data: [220, 182, 191, 234, 290, 330, 310]
  57.         },
  58.         {
  59.             name: '视频广告',
  60.             type: 'line',
  61.             stack: '总量',
  62.             data: [150, 232, 201, 154, 190, 330, 410]
  63.         },
  64.         {
  65.             name: '直接访问',
  66.             type: 'line',
  67.             stack: '总量',
  68.             data: [320, 332, 301, 334, 390, 330, 320]
  69.         },
  70.         {
  71.             name: '搜索引擎',
  72.             type: 'line',
  73.             stack: '总量',
  74.             data: [820, 932, 901, 934, 1290, 1330, 1320]
  75.         }
  76.     ]
  77. };

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

图表跟随屏幕缩放适配

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

  • html

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

  • 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