首页 > 其他分享 >echarts里面的option的详细讲解

echarts里面的option的详细讲解

时间:2024-07-22 11:26:34浏览次数:11  
标签:option color itemStyle 图列 图例 讲解 边框 type echarts

option4 = {
            // 鼠标移动提示框
            tooltip: {
                // 触发类型('item':用于散点图、饼图。'axion':用于柱状图、折线图。'none':什么都不触发)
                trigger: 'axis',
                // 提示框内排序
                order: 'seriesDesc',
                // 提示框背景颜色
                backgroundColor: "#FF5800",
                axisPointer: {
                    // 轴线类型
                    type: 'cross',
                    // x轴,Y轴的文字背景色(要在轴线类型为'cross',才有用)
                    label: {
                        backgroundColor: 'red'
                    },
                    // x轴指示线
                    crossStyle: {
                        width: 2,
                        type: 'dashed',
                    },
                    // y轴的指示线
                    lineStyle: {
                        type: 'dashed',
                        width: 2,
                        color: '#FEDC9B',
                    },
                }
            },
            // 图表组件
            legend: {
                // 图裂类型'plain':普通图例。缺省就是普通图例。 'scroll':可滚动翻页的图例。当图例数量较多时可以使用。
                type: 'scroll',
                // 图列的位置
                right: 30,
                top: 20,
                bottom: 20,
                // 图例宽高
                // width:'80',
                // height:'auto',
                // 图例列表的布局朝向
                orient: 'vertical',
                // 图列项里图标的类型,长方形,圆点等
                // icon: 'rect',
                data: [
                    {
                        name: '中转仓1',
                        icon: 'rect',
                        itemStyle: {
                            color: '#000'
                        }
                    },
                    {
                        name: '中转仓2',
                        icon: 'rect',
                        itemStyle: {
                            color: '#FBC952'
                        }
                    },
                ],
                // 图列的图标宽高
                itemWidth: 50,
                itemHeight: 5,
                // 图列与图列之间的距离
                itemGap: 5,
                // 图列前图标的属性
                itemStyle: {
                    // color :'red',
                    borderCap: 'round',
                }
            },
            // 图表内容
            grid: {
                // 是否显示直角坐标系网格
                show: false,
                left: '5%',
                right: '5%',
                bottom: '10%',
                // grid 区域是否包含坐标轴的刻度标签。只是内容的缩小
                containLabel: false,
                // 背景色
                backgroundColor: 'transparent'
            },
               // 用于地图的绘制,支持在地理坐标系上绘制散点图,线集。(其他的图用不上)
                geo:
                {
                    type: 'map',
                    map: 'china',
                    zlevel: -5,
                    // 位置
                    layoutCenter: ['30%', '50%'],
                    roam: false,
                    silent: true,
                    itemStyle: {
                        normal: {
                            // 地图边框颜色
                            borderColor: '#ffffff',
                            // 地图边框宽度
                            borderWidth: 3,
                            // 地图边框阴影颜色
                            shadowColor: '#ffffff',
                            shadowColor: '#00F6FF',
                            // 地图边框阴影颜色宽度
                            shadowBlur: 15,
                        }
                    }
                },

《未完待续》

标签:option,color,itemStyle,图列,图例,讲解,边框,type,echarts
From: https://blog.csdn.net/maliao5/article/details/138226861

相关文章

  • pyecharts 指定“chart_id” 绑定事件
    作者:JasonBourn_8228链接:https://www.jianshu.com/p/10167a735d3a来源:简书 问题,点击地图的板块时,需求弹出此板块的信息解决办法:查阅pyecharts官网手册:https://pyecharts.org/#/zh-cn/global_options?id=initopts%ef%bc%9a%e5%88%9d%e5%a7%8b%e5%8c%96%e9%85%8d%e7%bd%ae%e9......
  • 【保姆级讲解下QT6.3】
    ......
  • 【简单讲解TalkingData的数据统计】
    ......
  • 4mic阵列基础讲解
    概述4麦克风线性阵列是指在一条直线上等间距排列的四个麦克风,用于拾取声源信号。它常用于语音识别、会议系统、远场语音交互等应用。通过信号处理技术,4麦克风线性阵列可以提高语音信号的质量,抑制噪声和混响,提高语音识别的准确率。组成结构麦克风阵列:由四个麦克风组成,通常是全向......
  • Stochastic Gradient Descent (SGD) 原理与代码实战案例讲解
    StochasticGradientDescent(SGD)原理与代码实战案例讲解关键词:SGD(随机梯度下降)最小化损失迭代优化机器学习深度学习1.背景介绍1.1问题的由来在机器学习和深度学习领域,优化算法用于最小化模型预测与实际结果之间的误差,也就是损失函数。最小化损失是许多算法......
  • Stable Diffusion原理与代码实例讲解
    StableDiffusion原理与代码实例讲解1.背景介绍1.1问题的由来在深入探讨StableDiffusion之前,让我们先了解其应用背景。StableDiffusion主要出现在扩散模型领域,特别是在生成对抗网络(GAN)、变分自编码器(VAE)以及自回归模型中。这些模型通常用于生成高质量的样本,例如图像......
  • 基于java+ssm+vue高校生活服务平台vue(源码+LW+部署讲解)
    前言......
  • 基于java+ssm+vue的固定资产管理系统vue(源码+LW+部署讲解)
    前言......
  • .NET C# 配置 Options
    .NETC#配置Options使用options模式可以带来许多好处,包括清晰的配置管理、类型安全、易于测试和灵活性。但在使用过程中,也需要注意配置复杂性、性能开销和依赖框架等问题。通过合理设计和使用,可以充分发挥options模式的优势,提高代码的可维护性和可靠性。文章目录......
  • 基于SpringBoot+Vue在线考试系统的设计和实现(源码+文档+部署讲解)
    博主介绍:全网粉丝10W+,CSDN博客专家、全栈领域优质创作者,3年JAVA全栈开发经验,专注JAVA技术、系统定制、远程指导,致力于企业数字化转型。研究方向:SpringBoot、Vue.JS、MyBatisPlus、Redis、SpringSecurity、MySQL、小程序、Android、Uniapp等。博主说明:本文项目编号......