一些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，一经查实，立即删除！

相关文章

全志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;一种编程语言&…
阅读更多...
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…
阅读更多...
乙酰基四肽-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…
阅读更多...
《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 文章目录 一、图书在线商城…
阅读更多...
[ Windows ] ping IP + Port 测试 ip 和 端口是否通畅

[ Windows ] ping IP + Port 测试 ip 和 端口是否通畅

开发过程中经常会黑窗口中手动测试一下计划请求的目标ip和端口是否通畅&#xff0c;测试方式如下&#xff1a; 一、单纯测试ip是否能够 ping 通&#xff0c;这个比较熟悉了&#xff0c;运行 cmd 打开黑窗口 输入如下指令&#xff0c;能够如下提示信息&#xff0c;表示端口是通…
阅读更多...
Cloud Studio连接MySQL，Access denied for一系列问题

Cloud Studio连接MySQL，Access denied for一系列问题

官方文档有写如何安装Mysql $ apt update $ apt install mysql-server mysql-client -y$ service mysql start mysql -uroot -p123456进入MySQL命令行 问题出在连接数据库这一步&#xff0c;命令行能进去&#xff0c;但是数据库插件和代码都连不上 Access denied for 大概率…
阅读更多...
35 机器学习（三）：混淆矩阵|朴素贝叶斯|决策树|随机森林

35 机器学习（三）：混淆矩阵|朴素贝叶斯|决策树|随机森林

文章目录 分类模型的评估混淆矩阵精确率和召回率 接口介绍其他的补充 朴素贝叶斯基础原理介绍拉普拉斯平滑下面给出应用的例子朴素贝叶斯的思辨 决策树基础使用基本原理信息熵信息增益信息增益率Gini指数 剪枝api介绍 随机森林------集成学习初识基本使用api介绍 分类模型的评估…
阅读更多...
音频录制和处理软件 Audio Hijack mac中文版说明

音频录制和处理软件 Audio Hijack mac中文版说明

Audio Hijack mac是一款功能强大的音频录制和处理软件&#xff0c;它可以帮助用户从各种来源捕获和处理音频。 首先&#xff0c;Audio Hijack具有灵活的音频捕获功能。它支持从多个来源录制音频&#xff0c;包括麦克风、应用程序、网络流媒体、硬件设备等等。你可以选择捕获整个…
阅读更多...
告别传统纸质期刊，电子期刊更环保更快捷

告别传统纸质期刊，电子期刊更环保更快捷

​【新发现】随着科技的发展&#xff0c;电子期刊逐渐取代了传统的纸质期刊&#xff0c;成为人们获取信息的新选择。电子期刊不仅环保&#xff0c;而且快捷方便&#xff0c;但是你知道怎么制作电子期刊吗&#xff1f; 不会制作的可以试试我推荐的这个网站----FLBOOK电子杂志制作…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023