echarts自定义鼠标移上去显示,自定义图例,自定义x轴显示

2023-12-27 13:36
文章标签 自定义 显示 鼠标 图例 echarts 移上去

本文主要是介绍echarts自定义鼠标移上去显示,自定义图例,自定义x轴显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 提示：记录一下echarts常用配置,以免后期忘记

1.自定义鼠标移上去效果

tooltip: {

            show: true,

            trigger: "axis",

            axisPointer: {

                type: "shadow",//默认自定义效果

            },

            // //自定义鼠标移上去效果

            formatter: (v) => {

                console.log("打印一下====", v);

                const value1 = v[0].data;

                const value2 = v[1].data;

                const value3 = v[2].data;

                return `<div>

                <span>物资数量: ${value1}</span><br />

                <span>用户量: ${value2}</span><br />

                <span>闭环率: ${value3}%</span><br />

            </div>`;

            },

        },

2.自定义图例

代码如下：

 legend: {

            textStyle: { fontSize: 16, color: "#fff" },

            itemWidth: 25,

            itemHeight: 15,

            itemGap: 15,

            right: "5%", //位置

            selectedMode: false,

            data: [

                {

                    name: "物资数量",

                    //icon: "triangle", //官方默认的形状可选择  'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

                    icon: `image://${tips2}`, //自定义图片图例

                    itemStyle: {

                        color: "#64D8D8",

                    },

                    textStyle: {

                        color: "#A9C0FF",

                    },

                },

                {

                    name: "用户量",

                    // icon: 'rect',

                    icon: `image://${tips3}`,

                    itemStyle: {

                        color: "#FFAE37",

                    },

                    textStyle: {

                        color: "#A9C0FF",

                    },

                },

                {

                    name: "闭环率",

                    // icon: 'rect',

                    icon: `image://${tips1}`,

                    itemStyle: {

                        color: "red",

                    },

                    textStyle: {

                        color: "#A9C0FF",

                    },

                },

            ],

        },

3.自定义X轴样式

 xAxis: {

            type: "category",

            data: xData,

            axisLine: {

                show: true, // 显示/隐藏X轴轴线

                lineStyle: {

                    color: "#CBCDDD", //x线距离

                    shadowColor: "#CBCDDD", //阴影颜色

                    shadowOffsetX: "20", //阴影水平方向上的偏移距离

                },

            },

            splitLine: {

                show: false,

            },

            axisTick: {

                show: false, // 显示/隐藏X轴刻度

            },

            axisLabel: {

                margin: 10, //距离x轴线的距离

                fontSize: 16,

                textStyle: {

                    color: "#89C3DD", //X轴文字颜色

                },

            },

        },

4.Y轴数值刻度自定义 

  yAxis: {

            type: 'value',

            scale: true, //根据数据自适应最大值最小值

            //min: 0,//设置最小值

            // max: 100,//设置最大值

            // interval: 20,//设置间隔

            // nameTextStyle: {

            //   color: '#122167',

            //   fontSize: 12,

            // }

          },

5.监听屏幕大小变化 ,echarts适配

// echarts适配

const echartResize = () => {

    chart.resize(); // 适配窗口大小

};

 // 监听事件

    window.addEventListener("resize", echartResize);

// 解绑事件

    window.removeEventListener("resize", echartResize); 

具体代码:

<template><div class="chart" id="Chart"></div>
</template><script setup>
import { onMounted, ref, reactive,onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import tips1 from "@/assets/imgs/tips_line.png";
import tips2 from "@/assets/imgs/tips_green.png";
import tips3 from "@/assets/imgs/tips_orange.png";//定义一个全局echarts
let chart = ref(null);//生命周期
onMounted(() => {initCharts();
});
// echarts适配
const echartResize = () => {chart.resize(); // 适配窗口大小
};
const initCharts = () => {var chartDom = document.getElementById("Chart");chart = echarts.init(chartDom);// 绘制左侧面const CubeLeft = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {// 会canvas的应该都能看得懂，shape是从custom传入的const xAxisPoint = shape.xAxisPoint;const c0 = [shape.x, shape.y];const c1 = [shape.x - 18, shape.y - 10];const c2 = [xAxisPoint[0] - 18, xAxisPoint[1] - 9];const c3 = [xAxisPoint[0], xAxisPoint[1]];ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();},});// 绘制右侧面const CubeRight = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c1 = [shape.x, shape.y];const c2 = [xAxisPoint[0], xAxisPoint[1]];const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];const c4 = [shape.x + 18, shape.y - 9];ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();},});// 绘制顶面const CubeTop = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const c1 = [shape.x, shape.y];const c2 = [shape.x + 18, shape.y - 9];const c3 = [shape.x, shape.y - 18];const c4 = [shape.x - 18, shape.y - 10];ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();},});// 注册三个面图形echarts.graphic.registerShape("CubeLeft", CubeLeft);echarts.graphic.registerShape("CubeRight", CubeRight);echarts.graphic.registerShape("CubeTop", CubeTop);// 绘制左侧面const CubeLeft1 = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {// 会canvas的应该都能看得懂，shape是从custom传入的const xAxisPoint = shape.xAxisPoint;const c0 = [shape.x, shape.y];const c1 = [shape.x + 30, shape.y - 10];const c2 = [xAxisPoint[0] + 30, xAxisPoint[1] - 9];const c3 = [xAxisPoint[0], xAxisPoint[1]];ctx.moveTo(c0[0] + 48, c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0] + 48, c3[1]).closePath();},});// 绘制右侧面const CubeRight1 = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const xAxisPoint = shape.xAxisPoint;const c1 = [shape.x, shape.y];const c2 = [xAxisPoint[0], xAxisPoint[1]];const c3 = [xAxisPoint[0] + 66, xAxisPoint[1] - 9];const c4 = [shape.x + 66, shape.y - 9];ctx.moveTo(c1[0] + 48, c1[1]).lineTo(c2[0] + 48, c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();},});// 绘制顶面const CubeTop1 = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const c1 = [shape.x + 48, shape.y];const c2 = [shape.x + 66, shape.y - 9];const c3 = [shape.x + 48, shape.y - 18];const c4 = [shape.x + 30, shape.y - 10];ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();},});// 注册三个面图形echarts.graphic.registerShape("CubeLeft1", CubeLeft1);echarts.graphic.registerShape("CubeRight1", CubeRight1);echarts.graphic.registerShape("CubeTop1", CubeTop1);const xData = ["5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];const VALUE = [2336, 1914, 1685, 1584, 1410, 1042, 844, 1149];const VALUE1 = [2326, 1901, 1664, 1354, 1020, 624, 324, 186];const option = {backgroundColor: "#012366",tooltip: {show: true,trigger: "axis",axisPointer: {type: "shadow", //默认自定义效果},// //自定义鼠标移上去效果formatter: (v) => {console.log("打印一下====", v);const value1 = v[0].data;const value2 = v[1].data;const value3 = v[2].data;return `<div><span>物资数量: ${value1}</span><br /><span>用户量: ${value2}</span><br /><span>闭环率: ${value3}%</span><br /></div>`;},},grid: {top: "15%",bottom: "10%",left: "8%",right: "10%",containLabel: false, //true防止标签溢出  false依据坐标轴来对齐的,可能会有内容溢出},legend: {textStyle: { fontSize: 16, color: "#fff" },itemWidth: 25,itemHeight: 15,itemGap: 15,right: "5%", //位置selectedMode: false,data: [{name: "物资数量",//icon: "triangle", //官方默认的形状可选择  'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'icon: `image://${tips2}`, //自定义图片图例itemStyle: {color: "#64D8D8",},textStyle: {color: "#A9C0FF",},},{name: "用户量",// icon: 'rect',icon: `image://${tips3}`,itemStyle: {color: "#FFAE37",},textStyle: {color: "#A9C0FF",},},{name: "闭环率",// icon: 'rect',icon: `image://${tips1}`,itemStyle: {color: "red",},textStyle: {color: "#A9C0FF",},},],},xAxis: {type: "category",data: xData,axisLine: {show: true, // 显示/隐藏X轴轴线lineStyle: {color: "#CBCDDD", //x线距离shadowColor: "#CBCDDD", //阴影颜色shadowOffsetX: "20", //阴影水平方向上的偏移距离},},splitLine: {show: false,},axisTick: {show: false, // 显示/隐藏X轴刻度},axisLabel: {margin: 10, //距离x轴线的距离fontSize: 16,textStyle: {color: "#89C3DD", //X轴文字颜色},},},yAxis: [{type: "value",axisLine: {show: true,lineStyle: {color: "#CBCDDD",},},splitLine: {lineStyle: {color: "#414B82",type: "dashed", //虚线},show: true, // 显示/隐藏},axisTick: {show: false,},axisLabel: {fontSize: 16,},},{type: "value",nameTextStyle: {color: "#ebf8ac",},position: "right",splitLine: {show: false,},axisTick: {show: false,},axisLabel: {show: true,fontSize: 16,formatter: "{value} %", //右侧Y轴文字显示textStyle: {color: "#CBCDDD",},margin: 22, //刻度标签与轴线之间的距离。},boundaryGap: ["20%", "20%"],},],series: [{name: "物资数量",type: "custom",renderItem: (params, api) => {const location = api.coord([api.value(0), api.value(1)]);return {type: "group",children: [{type: "CubeLeft",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "#00E2D9",// color: 'transparent',},{offset: 0.5,color: "#047586",// color: 'transparent',},{offset: 1,// color: '#49BEE5',// color: 'transparent',color: "#053671",},]),},},{type: "CubeRight",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "#00E2D9",// color: 'transparent',},{offset: 0.5,color: "#047586",// color: 'transparent',},{offset: 1,// color: '#49BEE5',// color: 'transparent',color: "#053671",},]),},},{type: "CubeTop",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "#04CDD3",},{offset: 1,color: "#0A99C5",},]),},},],};},data: VALUE,},{name: "用户量",type: "custom",renderItem: (params, api) => {const location = api.coord([api.value(0), api.value(1)]);return {type: "group",children: [{type: "CubeLeft1",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "#FFAE37",// color: 'transparent',},{offset: 0.5,color: "#DBA65C",// color: 'transparent',},{offset: 1,// color: '#49BEE5',// color: 'transparent',color: "#584D5D",},]),},},{type: "CubeRight1",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "#FFAE37",// color: 'transparent',},{offset: 0.5,color: "#DBA65C",// color: 'transparent',},{offset: 1,// color: '#49BEE5',// color: 'transparent',color: "#584D5D",},]),},},{type: "CubeTop1",shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "#DD5F6D",},{offset: 1,color: "#DE5F6E",},]),},},],};},data: VALUE1,},{name: "闭环率",type: "line",smooth: false, //是否平滑showAllSymbol: true,symbol: "circle",yAxisIndex: 1,symbolSize: 12,lineStyle: {normal: {color: "#0091FF",width: 2,},},zlevel: 1,label: {show: false,position: "top",textStyle: {color: "#6c50f3",},},itemStyle: {color: "#0091FF",borderColor: "#fff",borderWidth: 3,},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgba(2 ,68, 157,0.6)",},{offset: 1,color: "rgba(3 ,36 ,117,0.3)",},],false),shadowColor: "#0091FF", //折线图下的背景颜色shadowBlur: 6,},},data: ["18.63","37.42","52.19","64.55","71.3","75.47","78.44","82.01",],},],};option && chart.setOption(option);// 监听事件window.addEventListener("resize", echartResize);
};
//销毁
onBeforeUnmount(() => {// 解绑事件window.removeEventListener("resize", echartResize);
});
</script><style scoped>
.chart {width: 90%;height: 400px;margin-top: 20px;
}
</style>

这篇关于echarts自定义鼠标移上去显示,自定义图例,自定义x轴显示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/543313。

相关文章

使用Sentinel自定义返回和实现区分来源方式

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》：本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定
阅读更多...
如何自定义Nginx JSON日志格式配置

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志？配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各
阅读更多...
Android自定义Scrollbar的两种实现方式

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一：ItemDecoration实现（推荐用于RecyclerView）实现原理完整代码实现
阅读更多...
基于Spring实现自定义错误信息返回详解

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT
阅读更多...
SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

《SpringSecurity认证、注销、权限控制功能(注销、记住密码、自定义登入页)》SpringSecurity是一个强大的Java框架,用于保护应用程序的安全性,它提供了一套全面的安全解决方案... 目录简介认识Spring Security“认证”（Authentication）“授权” （Auth
阅读更多...
Linux虚拟机不显示IP地址的解决方法(亲测有效)

Linux虚拟机不显示IP地址的解决方法(亲测有效)

《Linux虚拟机不显示IP地址的解决方法(亲测有效)》本文主要介绍了通过VMware新装的Linux系统没有IP地址的解决方法,主要步骤包括：关闭虚拟机、打开VM虚拟网络编辑器、还原VMnet8或修... 目录前言步骤0.问题情况1.关闭虚拟机2.China编程打开VM虚拟网络编辑器3.1 方法一：点击还原VM
阅读更多...
CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》：本文主要介绍了如何使用CSS模拟HTML的title属性，通过鼠标悬浮显示提示文字效果，通过设置`.tipBox`和`.tipBox.tipContent`的样式，实现了提示内容的隐藏和显示，详细内容请阅读本文，希望能对你有所帮助... 效
阅读更多...
SpringBoot自定义注解如何解决公共字段填充问题

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3
阅读更多...
dubbo3 filter(过滤器)如何自定义过滤器

dubbo3 filter(过滤器)如何自定义过滤器

《dubbo3filter(过滤器)如何自定义过滤器》dubbo3filter（过滤器）类似于javaweb中的filter和springmvc中的intercaptor,用于在请求发送前或到达前进... 目录dubbo3 filter（过滤器）简介dubbo 过滤器运行时机自定义 filter第一种 @A
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2