风如也的博客

echarts中根据坐标点和点的宽高绘制不同大小的矩形。

实现的功能：甘特图、散点图、散点图在画布中只显示label。

当我们选取了一组颜色数组值，但是后台返回的数据长度不固定时，颜色不够用的情况下，会重复颜色，可以采用循环颜色去绘制饼图的颜色option() { if (this.data.length) { let arr = this.data let color = ['#b5a045', '#ce7244', '#ff6666', '#ff3399', '#FFFF00', '#FF8C00','#ff99cc'] return {

我们经常遇到使用 elementui 中的 el-tab 组件来切换图表的时候，如果遇到在切换时图表的大小会从100px的宽高变为正常的过程的话，有下面的解决方式<el-tabs type="card" v-model="tabActive"> <el-tab-pane label="次数" name="one"> <alarm-count v-if="'one' === tabActive" /> </el-tab-pane> <

先看效果图echarts-liquidfill查看官方文档安装npm install echarts --savenpm install echarts-liquidfill --savevue main.js 中注册import echarts from 'echarts' //引入echartsimport 'echarts-liquidfill'组件中使用<template> <div style="width:400px;height:400px;" r

使用场景：在tab 选项卡中使用了 echart 图表，然后在页面切换时，echarts 图表的宽度由原来的 100% 变为 100px问题原因：echarts 渲染时 tab 选项卡 的 display 属性为 none，所以 width 属性为 100% 就没有可继承项，被 echarts 自带的方法切割成 100px解决办法：使用 this.$nextTick<ul class="tabbar"> <li><a href="javascript:void(0)

drawBar(){ // 告警次数TOPN 柱状图 // 基于准备好的dom，初始化echarts实例 let ref = this.$refs.bar if (ref && ref !== undefined) { let myChart = this.$echarts.init(ref) // 绘制图表 myChart.setOption({ color: ['#f16e6b'], tooltip: { tr

先看一下后端返回的数据结构change: { date: { date_x: ["2020-11-12"], date_y: [10], date_describe: [5] }}tooltip 格式化后显示效果格式化代码部分：drawPass(){ // 基于准备好的dom，初始化echarts实例 let ref = this.$refs.pass let discrible = this.pwd_data_describe if (ref &&a

安装 echarts5.xnpm install echarts --save按需引入 echarts 图表和组件先在项目根路径下新建 plugin/echartsUI.js 文件// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。import * as echarts from 'echarts/core';// 引入各种图表，图表后缀都为 Chartimport { BarChart} from 'echarts/charts';// 引入提示

页面中只有一个 echarts 图表时和有多个 echarts图表时，设置自适应的方法是不一样的一个 echarts 图表自适应let myChart = this.$echarts.init(ref)myCharts.setOption(option)// 监听 window 窗口大小变化的事件window.onresize = function() { // 调用 echarts 实例对象的 resize 方法 myCharts.resize()}// 或者简写// wind