电商平台数据可视化监控系统 -Echarts-vue 项目综合练习

2022 年 7 月 15 日
本文字数：2022 字
阅读完需：约 7 分钟

电商可视化平台演示界面：

Visual Studio 注释代码段快捷键

默认注释快捷组合键注释： Ctrl+K → 选定需要注释的代码段 →Ctrl+C

取消注释： Ctrl+K → 选定需要取消注释的代码段 →Ctrl+U

基础代码部分

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title>  <script src="lib/echarts.min.js"></script></head><body>  <div style="width: 600px;height:400px"></div>  <script>    var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象    var xDataArr = ['张三','李四','王五','闰土','小明','茅台','二妞','大强'] // 准备x轴数据    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据

复制代码

通用配置

标题：title

      title:{        text:'成绩展示',        textStyle:{          color:'red'        },      },

复制代码

标题边框和标题位置

title: {                borderWidth: 5, // 标题边框宽度        borderColor: 'blue', // 标题边框颜色        borderRadius: 5, // 标题边框圆角        left: 50, // 标题距离左边的距离        top: 10 // 标题距离顶部的距离      },

复制代码

提示：tooltip

tooltip：提示框组件，用于配置鼠标滑过或点击图标的显示框

触发类型：trigger 出发时机：triggerOn 格式化：formatter

      tooltip:{        //trigger:'item'（内）        trigger:'axis',//坐标轴        triggerOn:'click',//单击出现        formatter:'{b}的成绩是{c}'      },

复制代码

工具按钮：toolbox

toolbox:ECharts 提示的工具栏

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

      toolbox:{        feature:{          saveAsImage:{},//导出图片          dataView:{},//数据视图（修改原始数据）          restore:{},//重置          dataZoom:{},//区域缩放          magicType:{            type:['bar','line']//动态图标类型的切换          }        }      },

复制代码

图例：legend

legend：图例，用于筛选系列，需要和 series 配合使用

lengend 中的是一个数组

lengend 中的 date 的值需要和 series 数组中某组数据的 name 值一致

      legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选        data: ['语文', '数学']      },

复制代码

多次 bug 出现在：

正确写法 data 而我写成了 date
, 忘记
：忘记
某些字母大小写如：markPoint
折线图常见效果（ type : ' line ' ）柱形图是 bar
标记：最大值/最小值 markPoint 平均值 markLine 标注区间 markArea(在 series 中)

    markArea:{                data:[                  [{                    xAxis:'1月'                  },{                    xAxis:'2月'                  }],[{                    xAxis:'7月'                  },{                    xAxis:'8月'                  }]                ]              }

复制代码

线条控制：平滑 风格
smooth lineStyle在series中

复制代码

              smooth: true,              lineStyle:{                color:'blue',                type:'dashed'              },

复制代码

填充风格
areaStyle 在series中

复制代码

              areaStyle:{                color:'pink'              }

复制代码

紧挨边缘（设在xAxis轴中）

复制代码

          xAxis: {            type: 'category',            data: xDataArr,            boundaryGap:false          },

复制代码

缩放：脱离0值比例（设在yAxis轴中）

复制代码

          yAxis:{            type:'value',            scale:true          },

复制代码

堆叠图 在series中 stack : ' all '
1.内置主题的使用

复制代码

    // init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表你需要使用哪一套主题    // 默认内置了两套主题 , light  dark（黑）    var mCharts = echarts.init(document.querySelector("div"), 'light')

复制代码

2.自定义主题的使用（theme是主题的意思）

复制代码

     <script src="theme/vintage.js"></script>        // 1.在线编辑主题 https://www.echartsjs.com/theme-builder/，官网下载        // 2.下载主题的js文件        // 3.在html中导入js文件        // 4.在init方法中指明主题的名称        var mCharts = echarts.init(document.querySelector("div"), 'vintage')

复制代码

图标自适应

// 监听window窗口大小变化的事件    window.onresize = function(){// 调用echarts实例对象的resize方法mCharts.resize()}   或者直接打后面之歌 // window.onresize = mCharts.resize

复制代码

前端项目搭建

安装脚手架

项目的创建

vue create vision

手动选择特性（上下键移动，空格选择）

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/1adab9060cf850c0741a69df7】。文章转载请联系作者。

武师叔

关注

每天丰富自己，去过自己想要的生活！ 2022.04.28 加入

一个喜欢最新技术，研发的人工智能专业的大二学生，用自己的代码做一些有意义的事情！目前大二结束有去大厂研发岗实习的计划，每天丰富自己的技术，去过自己想要的实习生活。

发布

暂无评论

创作场景

电商平台数据可视化监控系统 -Echarts-vue 项目综合练习

通用配置

多次 bug 出现在：

前端项目搭建

武师叔

评论