Echarts
前端开心果
哈喽,我是一个前端程序媛,专注于前端技术的学习、分享与交流,包括web前端基础知识、进阶技术、学习资料、工具技巧、视频教程、面试题等信息。让我们在前端的学习道路上一起进步吧!
展开
-
echarts使用custom类型绘制矩形
echarts中根据坐标点和点的宽高绘制不同大小的矩形。原创 2023-09-28 15:12:26 · 1459 阅读 · 0 评论 -
highcharts的甘特图和散点图混合使用
实现的功能:甘特图、散点图、散点图在画布中只显示label。原创 2023-03-24 12:54:49 · 363 阅读 · 0 评论 -
Echarts按照固定的颜色循环饼图颜色
当我们选取了一组颜色数组值,但是后台返回的数据长度不固定时,颜色不够用的情况下,会重复颜色,可以采用循环颜色去绘制饼图的颜色option() { if (this.data.length) { let arr = this.data let color = ['#b5a045', '#ce7244', '#ff6666', '#ff3399', '#FFFF00', '#FF8C00','#ff99cc'] return {原创 2021-09-01 15:47:09 · 2375 阅读 · 0 评论 -
el-tab在切换时echarts图表显示不正常
我们经常遇到使用 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> <原创 2021-07-09 14:44:39 · 799 阅读 · 3 评论 -
vue中使用echarts-liquidfill实现水球图
先看效果图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原创 2020-10-21 14:35:47 · 8391 阅读 · 2 评论 -
vue中在tabs选项卡切换时echarts图表宽度由100%变为100px
使用场景:在tab 选项卡中使用了 echart 图表,然后在页面切换时,echarts 图表的宽度由原来的 100% 变为 100px问题原因:echarts 渲染时 tab 选项卡 的 display 属性为 none,所以 width 属性为 100% 就没有可继承项,被 echarts 自带的方法切割成 100px解决办法:使用 this.$nextTick<ul class="tabbar"> <li><a href="javascript:void(0)原创 2020-11-10 11:05:11 · 1366 阅读 · 0 评论 -
vue中使用echarts实现柱状图点击事件
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原创 2020-11-13 11:27:14 · 6373 阅读 · 2 评论 -
vue中对echarts的tooltip自定义内容
先看一下后端返回的数据结构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原创 2020-11-17 19:09:22 · 3126 阅读 · 0 评论 -
echarts5在Vue中按需引入
安装 echarts5.xnpm install echarts --save按需引入 echarts 图表和组件先在项目根路径下新建 plugin/echartsUI.js 文件// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。import * as echarts from 'echarts/core';// 引入各种图表,图表后缀都为 Chartimport { BarChart} from 'echarts/charts';// 引入提示原创 2021-01-27 20:16:53 · 5019 阅读 · 4 评论 -
Echarts多个图表自适应窗口大小
页面中只有一个 echarts 图表时和有多个 echarts图表时,设置自适应的方法是不一样的一个 echarts 图表自适应let myChart = this.$echarts.init(ref)myCharts.setOption(option)// 监听 window 窗口大小变化的事件window.onresize = function() { // 调用 echarts 实例对象的 resize 方法 myCharts.resize()}// 或者简写// wind原创 2021-03-19 15:04:54 · 1735 阅读 · 1 评论