一些ECharts配置

基于vue3，EChart5.4.3版本

Line

<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref, watch} from "vue"
import {useEcharts, type ECOption} from "@/composables"
import * as echarts from "echarts/core";const chartOptions = ref<ECOption>();
const {domRef: chart} = useEcharts(chartOptions);const props = defineProps({chartXData: {type: Array,default: []},chartYData: {type: Array,default: []},seriesData: {type: Array,default: []},seriesNameList: {type: Array,default: []},yName: {type: String,default: ''},lineColorList: {type: Array,default: ['rgba(1, 145, 219, 1)', 'rgba(9, 162, 51, 1)', 'rgba(191, 153, 18, 1)']},isAreaStyle: {type: Boolean,default: false},areaColorStyle: {type: Array,default: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(3, 200, 242, 0.64)',},{offset: 1,color: 'rgba(3, 200, 242, 0)',},]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(4, 148, 44, 0.16)',},{offset: 1,color: 'rgba(4, 148, 44, 0)',},]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#BF9912AB',},{offset: 1,color: '#BF991200',},])]},stack: {type: String,default: ''},isSmooth: {type: Boolean,default: false},symbol: {type: String,default: ''},title: {type: String,default: ''},topGrid: {type: String,default: '25'},
})const watcher = watch(()=> props.seriesData, (value: any) => {chartOptions.value.series = getSeriesData(value)
})const watcherTitle = watch(()=> props.title, (value: any) => {chartOptions.value.title['text'] = value
})const watcherXData = watch(()=> props.chartXData, (value: any) => {chartOptions.value.xAxis.data = value
})onBeforeUnmount(() => {watcher();watcherTitle();watcherXData();
})const getChartData = () => {updateChartOptions();
}const updateChartOptions = () => {chartOptions.value = {title: {text: props.title,left: 0,top: 5,textStyle: {fontSize: 16,},},backgroundColor: 'white',tooltip: {trigger: 'axis',color: '#fff', // 设置文字颜色为白色backgroundColor: 'rgba(16,24,41)', // 设置背景颜色为黑色，透明度为0.7borderColor: 'rgba(16,24,41)', // 设置边框颜色为白色borderWidth: 1, // 设置边框宽度为1px},legend: {left: 'right',top: 10,itemWidth: 8,itemHeight: 8,itemGap: 16,borderRadius: 4,color: 'rgba(202,231,254,0.5)',fontSize: 10,},xAxis: {type: 'category',data: props.chartXData,boundaryGap: false,axisLine: {show: false,},axisTick: {show: false,},axisLabel: {interval: 1,show: true,color: 'rgba(202,231,254,0.5)', //X轴文字颜色},},yAxis: [{type: 'value',nameTextStyle: {color: '#CAE7FE80',// fontFamily: 'Alibaba PuHuiTi',fontSize: 10,fontWeight: 600,// padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离},nameGap: 10, // 表现为上下位置axisLine: {show: false,},axisTick: {show: false,},axisLabel: {color: 'rgba(202,231,254,0.5)',fontSize: 10,// interval: 2, // 设置为0表示每隔一个显示一个标签},splitLine: {show: true,lineStyle: {color: 'rgba(147,219,209,0.16)',},},},{type: 'value',// name: '金额：万元',nameTextStyle: {color: 'rgba(202,231,254,0.5)',fontFamily: 'Alibaba PuHuiTi',fontSize: 10,fontWeight: 600,// padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离},position: 'right',splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: true,formatter: '{value}', //右侧Y轴文字显示textStyle: {color: 'rgba(202,231,254,0.5)',},},},],series: getSeriesData(props.seriesData),grid:{ // 让图表占满容器top:"50px",left:"20px",right:"50px",bottom:"0px",containLabel: true,}};
}const getSeriesData = (seriesData: any) => {const length = props.seriesNameList?.lengthlet seriesArray = []for (let i = 0; i < length; i++) {seriesArray.push({name: props.seriesNameList?.[i],type: 'line',showAllSymbol: true, //显示所有图形。// stack: props.stack,//stack1smooth: props.isSmooth,areaStyle: {// 设置堆叠效果的颜色和透明度color: props.areaColorStyle?.[i],},symbol: props.symbol, //标记的图形为实心圆 rectsymbolSize: 4, //标记的大小lineStyle: {color: props.lineColorList?.[i],},itemStyle: {color: props.lineColorList?.[i]},data: seriesData?.[i],})}return seriesArray}onMounted(() => {getChartData();
})</script><template><div class="wh-full" ref="chart"></div>
</template><style scoped></style>

Bar

<script setup lang="ts">
import {onMounted, ref,onBeforeUnmount,watch} from "vue"
import {useEcharts, type ECOption} from "@/composables"
import * as echarts from "echarts/core";const chartOptions = ref<ECOption>();
const {domRef: chart} = useEcharts(chartOptions);const props = defineProps({chartXData: {type: Array,default: []},chartYData: {type: Array,default: []},seriesData: {type: Array,default: []},seriesNameList: {type: Array,default: []},yName: {type: String,default: ''},barWidth: {type: String,default: '16'},title: {type: String,default: ''},topGrid: {type: String,default: '40px'},lineColorList: {type: Array,default: ['rgba(1, 145, 219, 1)', 'rgba(191, 153, 18, 1)', 'rgba(9, 162, 51, 1)']},areaColorStyle: {type: Array,default: [new echarts.graphic.LinearGradient(0, 0, 1, 1, [{offset: 0,color: '#3A65F7FF',},{offset: 1,color: '#20C2F0FF',},]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#BF9912AB',},{offset: 1,color: '#BF991200',},]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#03C8F200',},{offset: 1,color: 'rgba(4, 148, 44, 0)',},])]},
})const watcher = watch(()=> props.seriesData, (value: any) => {chartOptions.value.series[0].data = value
})const watcherXData = watch(()=> props.chartXData, (value: any) => {chartOptions.value.yAxis[0].data = value
})onBeforeUnmount(() => {watcher();watcherXData();
})const getChartData = () => {updateChartOptions();
}const updateChartOptions = () => {chartOptions.value = {backgroundColor: '#FFFFFF',title: {text: props.title,left: 16,top: 10,textStyle: {fontSize: 16,}},tooltip: {trigger: 'axis',axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'},confine: true,textStyle: {color: '#fff', // 设置文字颜色为白色},backgroundColor: 'rgba(16,24,41)', // 设置背景颜色为黑色，透明度为0.7borderColor: 'rgba(16,24,41)', // 设置边框颜色为白色borderWidth: 1, // 设置边框宽度为1px},legend: {left: 'right',top: 20,textStyle: {color: '#FFFFFFE6',fontSize: 14,},itemWidth: 10,itemHeight: 10,itemGap: 15,},xAxis: {type: 'value',axisLine: {show: true,lineStyle: {color: '#FFFFFF4D',},},axisTick: {show: false,},},yAxis: [{type: 'category',data: props.chartXData,nameTextStyle: {color: '#FFFFFF4D',fontFamily: 'Alibaba PuHuiTi',fontSize: 14,fontWeight: 600,// padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离},nameGap: 10, // 表现为上下位置axisLine: {show: true,lineStyle: {color: '#FFFFFF4D',},},axisTick: {show: false,},axisLabel: {color: '#FFFFFFE6',fontSize: 14,},splitLine: {show: false,lineStyle: {color: 'rgba(147,219,209,0.16)',},},},],series: [{type: 'bar',data: props.seriesData,barWidth: `${props.barWidth}rem`,itemStyle: {// 设置堆叠效果的颜色和透明度color: props.areaColorStyle?.[0],},lineStyle: {color: props.lineColorList?.[0],},showBackground: true,backgroundStyle: {color: '#20C2F01A'}},],grid: { // 让图表占满容器top: `${props.topGrid}px`,left: "16px",right: "30px",bottom: "24px",containLabel: true,}};
}const getSeriesData = () => {const length = props.seriesNameList?.lengthlet seriesArray = []for (let i = 0; i < length; i++) {seriesArray.push({name: props.seriesNameList?.[i],type: 'bar',barWidth: `${props.barWidth}rem`,itemStyle: {// 设置堆叠效果的颜色和透明度color: props.areaColorStyle?.[i],},lineStyle: {color: props.lineColorList?.[i],},data: props.seriesData?.[i],//props.seriesData?.[i]})}return seriesArray
}onMounted(() => {getChartData();
})</script><template><div class="wh-full" ref="chart"></div>
</template><style scoped></style>

Pie

<script setup lang="ts">
import {onMounted, ref,onBeforeUnmount,watch} from "vue"
import {useEcharts, type ECOption} from "@/composables"
import * as echarts from "echarts/core";const chartOptions = ref<ECOption>();
const {domRef: chart} = useEcharts(chartOptions);const props = defineProps({percentData: {type: Number,default: 0},
})const watcher = watch(()=> props.percentData, (value: any) => {chartOptions.value.series[1].data[1].value = valuechartOptions.value.series[1].data[0].value = 100 - value
})onBeforeUnmount(() => {watcher();
})const getChartData = () => {updateChartOptions();
}const updateChartOptions = () => {chartOptions.value = {tooltip: {show: 'false',},series: [{type: 'pie',radius: ['65%', '71%'],tooltip: {show: false // 禁用该 pie 的悬浮提示},avoidLabelOverlap: false,label: {show: false,},emphasis: {disabled: false,scale: false,},color: ['#0e2a4dFF'],data: [{ value: 100},]},{type: 'pie',radius: ['71%', '86%'],tooltip: {show: false // 禁用该 pie 的悬浮提示},avoidLabelOverlap: false,label: {show: false,},emphasis: {disabled: false,},itemStyle: {borderColor: '#0F0F11FF',borderWidth: 1},color: ['#257B4FFF','#C8676DFF'],//C8676DFFdata: [{ value: 100 - props.percentData , name:'1'},{ value: props.percentData, name:'2' },]},{type: 'pie',radius: ['86%', '100%'],tooltip: {show: false // 禁用该 pie 的悬浮提示},avoidLabelOverlap: false,label: {show: false,},emphasis: {disabled: false,scale: false,},color: ['#0e2a4eFF',],data: [{ value: 100},]}],};
}onMounted(() => {getChartData();
})</script><template><div class="wh-full" ref="chart"></div>
</template><style scoped></style>

使用

<template><Lineclass="w-[calc(100%-30px)] h-[calc(100%-40px)] ml-15":chartXData="chartXLineData":seriesData="seriesLineData":seriesNameList="seriesNameList"stack="stack1"symbol="rect":title="`服务访问总数 ${titleData}`"top-grid="50":isSmooth="true"></Line>
</template><script lang="ts" setup>
import {onMounted, ref} from "vue"
import Line from '../Line.vue'onMounted(() => {init();
})const chartXLineData = ref([])
const seriesNameList = ref(["", '', ''])
const seriesLineData = ref<number[]>([])
const lineColorList = ["rgba(1, 145, 219, 1)", 'rgba(9, 162, 51, 1)', "rgba(191, 153, 18, 1)"]
const seriesList = []</script>
<style lang="scss" scoped></style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/110763.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CSS3 网格布局

CSS3 网格布局

CSS3 网格布局&#xff08;CSS Grid Layout&#xff09;是一种强大的布局方式&#xff0c;用于创建复杂的网页布局。它允许你以网格的形式将页面划分为行和列&#xff0c;然后将内容放置在这些行和列的交叉点上。以下是 CSS3 网格布局的基本概念和用法&#xff1a; 1. **创建网…
阅读更多...
C++中统计代码的运算时间

C++中统计代码的运算时间

在C中&#xff0c;有几种方法可以用来统计代码的运算时间&#xff1a; 使用std::chrono库&#xff1a; C11引入了chrono库&#xff0c;用于处理时间相关的操作。通过使用std::chrono::system_clock和std::chrono::duration_cast&#xff0c;可以很容易地测量代码段的执行时间…
阅读更多...
全志A40i PRREMPT-RT Linux平台搭建IgH环境

全志A40i PRREMPT-RT Linux平台搭建IgH环境

1、编译安装内核 参考创龙开发板官方文档&#xff0c;在menuconfig中把gmac设置成M&#xff0c;方便卸载原始gmac驱动&#xff0c;然后加载优化后的实时网卡驱动 2、编译IgH 把IgH主站代码放到开发板上&#xff0c;进行配置编译(配置和编译可以参考网上ubuntu…
阅读更多...
tensorrt安装使用教程

tensorrt安装使用教程

一般的深度学习项目&#xff0c;训练时为了加快速度&#xff0c;会使用多GPU分布式训练。但在部署推理时&#xff0c;为了降低成本&#xff0c;往往使用单个GPU机器甚至嵌入式平台&#xff08;比如 NVIDIA Jetson&#xff09;进行部署&#xff0c;部署端也要有与训练时相同的深…
阅读更多...
python学习7

python学习7

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…
阅读更多...
Ansible的debug模块介绍，fact变量采集和缓存相关操作演示

Ansible的debug模块介绍，fact变量采集和缓存相关操作演示

目录 一.debug模块的使用方法 1.帮助文档给出的示例 2.主要用到的参数 &#xff08;1&#xff09;msg&#xff1a;主要用这个参数来指定要输出的信息 &#xff08;2&#xff09;var&#xff1a;打印指定的变量&#xff0c;一般是通过register注册了的变量 &#xff08;3&…
阅读更多...
GEE：对二值图层进行腐蚀和/或膨胀操作

GEE：对二值图层进行腐蚀和/或膨胀操作

作者：CSDN @ _养乐多_ 腐蚀和膨胀 是数学形态学图像处理中的两个基本操作，用于修改和分析二值图像（包含只有两个像素值的图像，通常是黑和白）。这些操作可用于处理遥感图像、地理信息系统（GIS）中的栅格数据以及其他领域的图像处理。 腐蚀（Erosion）：腐蚀是一种用于缩小…
阅读更多...
电脑出现关于kernelbase.dll文件找不到的情况，有什么办法可以解决？

电脑出现关于kernelbase.dll文件找不到的情况，有什么办法可以解决？

在使用电脑中&#xff0c;突然提示找不到kernelbase.dll&#xff0c;这时候应该怎么办呢&#xff1f;出现这样的问题&#xff0c;有神办法可以解决。看到有小伙伴在问这个问题&#xff0c;那么今天就带大家了解一下这个文件&#xff0c;同时教大家如何解决kernelbase.dll丢失的…
阅读更多...
最佳买股票的时机------题解报告

最佳买股票的时机------题解报告

题目&#xff1a; 暴力双循环会时间超限 一次循环&#xff0c;不断更新min和sum值 时间复杂度为O(n),空间复杂度为O(1) 写完之后看了一眼题解&#xff0c;发现没有更好的方法 public int maxProfit(int[] prices) {int sum 0,minprices[0];for(int i1;i <prices.length;i…
阅读更多...
Python【猜拳游戏】

Python【猜拳游戏】

猜拳游戏&#xff1a;石头、剪刀、布的游戏 代码如下&#xff1a; 双人对战&#xff1a; choices ["石头", "剪刀", "布"] player1_score 0 player2_score 0while True:# 玩家1进行选择player1_choice input("玩家1请出拳(石头、剪刀、…
阅读更多...
乙酰基四肽-3/Acetyl Tetrapeptide-3——刺激毛囊，长出新头发，有效防止秃头

乙酰基四肽-3/Acetyl Tetrapeptide-3——刺激毛囊，长出新头发，有效防止秃头

社会对头发很着迷。从圣经人物参孙&#xff08;他从头发中获得力量&#xff0c;并说如果剃光头他就会失去力量&#xff09;&#xff0c;到社交媒体上无休无止地谈论名人的标志性风格&#xff0c;头发是一个永恒的话题。 为什么痴迷&#xff1f;好吧&#xff0c;我们的头发是外…
阅读更多...
睿趣科技：现在开抖音小店到底要多少钱

睿趣科技：现在开抖音小店到底要多少钱

随着短视频平台的兴起&#xff0c;抖音小店成为了越来越多创业者的选择。那么&#xff0c;现在开抖音小店到底要多少钱呢?这个问题涉及到以下几个方面的费用。 首先&#xff0c;我们需要了解的是&#xff0c;开设抖音小店本身是免费的。你只需要在抖音APP上申请开店&#xff0…
阅读更多...
idea不识别yaml文件导致,配置文件点击跳转不了类

idea不识别yaml文件导致,配置文件点击跳转不了类

文章目录 场景确认的idea安装了ymal插件,确认你的配置文件是yml格式的还是ymal格式的然后在项目配置中看看是否有对应的后缀.最后看看在项目模块里面有没有spring模块跟对应的配置文件,如果没有就要添加这样点击配置文件就能跳转到对应的实体类了 场景 在使用idea时&#xff0…
阅读更多...
wpf主页面解析

wpf主页面解析

1、 开头的网址作用 1和2都是引入命名空间的&#xff0c;每一个字符串代表一系列的命名空间&#xff0c;这样就可以不用一个一个引用了。wpf中规定有一个名称空间是可以不加名字的&#xff0c;xmlns不加名字是默认命名空间。 "http://schemas.microsoft.com/winfx/2006/x…
阅读更多...
微信小程序实现类似于 vue中ref管理调用子组件函数的方式

微信小程序实现类似于 vue中ref管理调用子组件函数的方式

微信小程序中确实有类似于 vue 中 ref管理子组件的方式、 这里 我给子组件定义了一个 class 只要是 css选择器拿得到的 都没什么问题 但你要保证唯一性 建议前端开发还是慎重一点 就算是不能重复也尽量用class 因为id总还是有风险的 然后 我在子组件中顶一个了一个函数 start…
阅读更多...
Kafka序列化反序列化解析、kafka schema

Kafka序列化反序列化解析、kafka schema

Kafka序列化反序列化解析、kafka schema。 kafka有自己的rpc协议，即nio bytebuf中的数据格式，详见之前的kafka相关介绍的文章。这里我们来看一下大家常用，有时又疑惑的序列化反序列化，对应rpc协议中的records，kafka叫Serdes，实际上也是字面上的意思serialize and deseri…
阅读更多...
arxiv的订阅与取消订阅

arxiv的订阅与取消订阅

订阅方法 官方链接&#xff1a; https://info.arxiv.org/help/subscribe.html 发送邮件到指定邮箱 To subscribe to additional subject classes, or delete existing subscriptions, send a message containing ‘add’ or ‘del’ commands. For example, To: csarxiv.org…
阅读更多...
《C和指针》(3)数据

《C和指针》(3)数据

问题 假定你正编写一个程序&#xff0c;它必须运行于两台机器之上。这两台机器的缺省整型长度并不相同&#xff0c;一个是16位&#xff0c;另一个是32位。而这两台机器的长整型长度分别是32位和64位。程序所使用的有些变量的值并不太大&#xff0c;足以保存于任何一台机器的缺省…
阅读更多...
C++中多态的使用和建立条件

C++中多态的使用和建立条件

一、多态引入 多态按字面的意思就是多种形态。当类之间存在层次结构&#xff0c;并且类之间是通过继承关联时&#xff0c;就会用到多态。 C 多态意味着调用成员函数时&#xff0c;会根据调用函数的对象的类型来执行不同的函数。 根据代码&#xff0c;引入多态的概念&#xff1…
阅读更多...
【计算机毕设选题推荐】图书在线商城SpringBoot+SSM+Vue

【计算机毕设选题推荐】图书在线商城SpringBoot+SSM+Vue

前言&#xff1a;我是IT源码社&#xff0c;从事计算机开发行业数年&#xff0c;专注Java领域&#xff0c;专业提供程序设计开发、源码分享、技术指导讲解、定制和毕业设计服务 项目名 基于SpringBoot的图书在线商城 技术栈 SpringBootVueMySQLMaven 文章目录 一、图书在线商城…
阅读更多...
最新文章

Copyright @ 2022~2023