qq_45018844的博客

根据用户选择查询，发送给后端，处理成多个柱子的数据 进行展示渲染

X轴放日期、Y轴放总数据量（total）各一个数据，还有折现放的是incr（增长量），柱状图有两个颜色 表示两个数据，一个使用过的，一个未使用的 加起来等于总量。我们需要 以下5个数据；bytesSizeG这个方法是我换算单位的，不需要的 可以换掉了。series是一个数组 所以可以多放几个就组成了一根柱子展示两个数据。这里是后端返回的数据，我们需要把需要的数据合并成数组；这里因为我需要加单位，所以我选择了自定义。这里是有柱状图和折线图混合的一个图表。

跟其他echarts图表一样，第一步新建一个容器用来展示图；里面有一些配置都是需要在文档中一个个的找到 然后进行设置的。这里用到的时候力引导布局；大概看一下数据结构吧。这里的id名称一定要对上哦~记得写上这个加载方法哦！...

第三个values是y轴的数据；还有一个sizes是我们说的第三个数据；sizes是一个数组，所以我们只要知道tooltip划到哪一个的索引就可以拿到数据；这里是正常的折线图的渲染；只是展示tooltip的时候 自己格式化了一下。这里就是上面3.2说的 知道数组的索引就可以拿到相应的值；这个params是我鼠标滑到哪里的整个对象；这个方法是将数据转化为G的单位的方法；根据时间展示某一数量的时候的数据大小。这里的size就是第三个数据。这个就是params。...

这是我选择的形状图片首先，安装echarts和echarts-wordcloud官网看到的说：echarts5.0.0+搭配wordcloud2.0.0+的版本 才可以；不然会报错；我改了对应的 但是还是不行；最后试了好多版本；下面这个才对应上 不报错3.挑选图片形状选择你想要做的形状；在线转化base64，复制代码5.渲染词云图（要配置图片base64）有一些配置可以自己修改6.给每个元素点击事件我这里是跳转页面...

效果首先引入echarts可以看这篇文章哦~如何在项目中使用echarts1.定义一个div这里的height就是y轴的高度了~ <div style="width: 100%; height: 600px" ref="chart"></div>2.定义一个方法init在mounted引用 mounted() { this.init() },3.定义数据这个一般是后台给的接口的数据，我这里是模拟的哦~let lineData = {

vue中使用echarts1.第一步当然是使用npm下载echarts啦！npm install echarts --save2.第二步就是在main.js中全局引入echarts，当然也可以不进行全局引入import echarts from "echarts";Vue.prototype.$echarts = echarts;3.第三步就是在你需要的页面使用echarts<template> <div style="width: 100%; height: 30

如何使用echarts做到数据可视化首先我们一点要去官网，自己先做出一个没有数据交互的静态的echarts静态echarts不会的可以看我的这个博客我先给大家上效果图：这里的数据是从后台传过来的，但是这里我是自己弄的一个node的后台服务总共15条数据，接下来废话不多说，上代码：做过静态的echarts的肯定都知道，这是初始化这个图表 initChart () { this.chartInstance = this.$echarts.init(this.$refs.selle

echarts我们先来看一下效果图如果大家不知道怎么在Vue项目中引入可以去看我的另一个博客vue项目导入echarts如果官方文档看不懂，就可以跟我一样，比如series我不知道这个有什么用，就直接在百度上大家就可以一个个的看了，不过大部分我都在代码上注释了，上代码<div style="width: 800px;height: 650px; border: 1px solid red" ref="chart" id="main"></div>引入echarts别