Echarts中Option 【Color-Title-Tooltip组件】属性设置

IT那活儿发布于2023-01-11 13:19 / 2458人阅读

点击上方“IT那活儿”公众号，关注后了解更多内容，不管IT什么活儿，干就完了！！！

Echarts中Option常用属性设置

</>复制代码 
test() {
      var myChart = echarts.init(document.getElementById("main"));
      let option = {

1. 全局调色盘

</>复制代码 
color: ["#c23531"],

2. 系列自己的调色盘

</>复制代码 
series: [
            {
              type: "bar",
              // 此系列自己的调色盘
              color: ["#dd6b66"],
              // ...
            },
            {
              type: "pie",
              // 此系列自己的调色盘
              color: ["#37A2DA"],
              // ...
            },
          ],

3. Title：标题组件

</>复制代码 
title: {
          x: "left", // left | right | center | 100px
          y: "4%", // top | bottom | center | 100px
          // 标题
          show: true, //是否显示
          text: "标题内容",
          textStyle: {
            color: "#fff", // 主标题文字的颜色
            fontStyle: "normal", // 主标题文字字体的风格
            fontWeight: "normal", // 主标题文字字体的粗细
            fontFamily: "sans-serif", // 主标题文字的字体系列
            fontSize: 18, // 字体大小
            lineHeight: "30", // 行高
            textBorderColor: "transparent", // 文字本身的描边颜色
            textBorderWidth: 0, // 文字本身的描边宽度
            textShadowColor: "transparent", // 文字本身的阴影颜色
            textShadowBlur: 0, // 文字本身的阴影长度
            textShadowOffsetX: 0, // 文字本身的阴影 X 偏移
            textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移
          },
          subtext: "副标题内容", // 副标题文本
          subtextStyle: {
            color: "red",
            fontSize: "16",
          }, //副标题样式
          textAlign: "auto", //水平对齐
          textVerticalAlign: "auto", // 垂直对齐
          triggerEvent: false, // 是否触发事件
          padding: 5, // 标题内边距
          itemGap: 10, //主副标题之间的间距
          left: 10, // 距离 left top right bottom
          x: "center", // 水平安放位置，默认为左对齐
          y: "4%", // 垂直安放位置，默认为全图顶端
          backgroundColor: "pink", // 标题背景色
          borderColor: "#ccc", // 标题的边框颜色
          borderWidth: 5, // 标题的边框线宽
          borderRadius: 2, // 圆角半径
          shadowBlur: 10, //图形阴影的模糊大小
          shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
          shadowOffsetX: 5, // 阴影水平方向上的偏移距离
          shadowOffsetY: 5, //阴影垂直方向上的偏移距离
        },

4. Tooltip：提示框组件

</>复制代码 
tooltip: {
          trigger: "axis", //触发类型
          triggerOn: "click", //提示框触发的条件
          showContent: true, //是否显示提示框浮层
          alwaysShowContent: true, //是否永远显示提示框内容
          showDelay: 0, //浮层显示的延迟，单位为 ms
          hideDelay: 100, //浮层隐藏的延迟，单位为 ms
          enterable: false, //鼠标是否可进入提示框浮层中
          confine: false, //是否将 tooltip 框限制在图表的区域内
          transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是 s
          position: ["50%", "50%"], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置
          formatter: "{b0}: {c0}
{b1}: {c1}", //提示框浮层内容格式器
          backgroundColor: "transparent", //标题背景色
          borderColor: "#ccc", //边框颜色
          borderWidth: 0, //边框线宽
          padding: 5, //图例内边距
          textStyle: mytextStyle, //文本样式
          axisPointer: { // 鼠标放在
            type: "cross", //默认为line，line直线，cross十字准星，shadow阴影
            crossStyle: {
              color: "#fff",
            },},},

      };
      myChart.setOption(option);
    },

本文作者：池思敏(上海新炬王翦团队）

本文来源：“IT那活儿”公众号

GPU云服务器云服务器设置属性属性设置 java设置组件居中批量设置属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/129203.html

手拉手，用Vue开发动态刷新Echarts组件

摘要：静态组件开发因为被编程思想这篇文章毒害太深，所以笔者开发组件也习惯从基础到高级逐步迭代。静态组件要实现的目的很简单，就是把图表，渲染到页面上。实现动态刷新下一步我想大家都知道了，就是定时从后台拉取数据，然后更新父组件的就好。从几年前流行的jQuery插件，到现在React和Vue的组件，在业务需求的开发中抽象通用出通用的模块，一直都是一个对个人技术提高非常有帮助的事情。本文从一个真实...

justCoding 2019-08-22 15:36 评论0 收藏0
响应式 React Native Echarts 组件

摘要：额外的三个参数赋给的参数对象，发生变化后内部会自动调用，实现响应式刷新。利用，实现了通知执行在中，可利用实现的事件向组件的通信。一种在 React Native 中封装的响应式 Echarts 组件，使用与示例请参见：react-native-echarts-demo 近年来，随着移动端对数据可视化的要求越来越高，类似 MPAndroidChart 这样的传统图表库已经不能满足产品...

plokmju88 2019-08-22 18:41 评论0 收藏0
React Native使用百度Echarts显示图表

摘要：今天我就来介绍下在中如何使用来显示各种图表。首先需要在我们的项目中安装组件，该组件是兼容和安卓双平台的。组件主要有三个属性图表的相关配置和数据。图表的高度，默认值是。解决方法将中的代码修改为同时将文件拷贝到安卓项目下面的文件夹中。本文原创首发于公众号：ReactNative开发圈 Echarts是百度推出的免费开源的图表组件，功能丰富，涵盖各行业图表。相信很多同学在网页端都使用过。今...

Lucky_Boy 2019-08-21 17:27 评论0 收藏0
寻找真凶Echarts or Angular

摘要：我们再来看一下调用栈，如下图从图中我们发现了一个调用栈的代码执行过，还记得里提到吗发起脏检查的通知者，它代理了原生事件，任何一个原生异步事件的触发都会导致的运行。寻找真凶Echarts or Angular 这是一篇故事，就如同技术，我们所追求的不是一个结局，而是那些深受启发与共鸣的过程，那是我们成长的经验与生产力的积淀！故事开始于疯了的ionic3应用页面打开，什么也没做5s里...

sumory 2019-08-21 17:43 评论0 收藏0