vue 用eachart的smarkArea，设置 markArea样式：内边距、边框等

最新推荐文章于 2023-09-12 17:19:18 发布

不想上班只想要钱

最新推荐文章于 2023-09-12 17:19:18 发布

阅读量417

点赞数

分类专栏： css Java Web 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Aa12364567/article/details/130017475

版权

前端同时被 3 个专栏收录

145 篇文章 3 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

Java Web

43 篇文章 2 订阅

订阅专栏

 yb.markArea = {
            silent: true,
            label: {
              show: true,
              textStyle: {                  //样式
                fontSize: '6',  // 分辨率768*576
                // fontSize: '14',
                fontWeight: '400',
                fontFamily: 'FZLTZCHK--GBK1-0',
                color: '#E6F7FF',
              },
              position: ['90%', '10%'],
            },
            data: [
              [{
                yAxis: that.warn.red,
                name: '红色预警',
                itemStyle: {
                  color: 'rgba(215,48,42,0.7)'
                },
                label: {
                  position: ['90%', '30%'],  // 设置位置
                  borderRadius: [50, 50, 50, 50],  // 边框设置圆角
                  padding: [4, 10, 3, 10], // padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
                  borderColor: '#ffffff',  // 设置边框颜色
                  borderType: 'solid',  // 设置边框线类型
                  borderWidth: 1, // 设置边框宽度
                }
              }, {
                yAxis: '1000'
              }],
              [{
                yAxis: that.warn.orange,
                name: '橙色预警',
                itemStyle: {
                  color: 'rgba(254,153,3,0.7)',
                },
                label: {
                  // position: ['95%', '10%'],
                  borderRadius: [50, 50, 50, 50],
                  padding: [4, 10, 3, 10], // padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
                  borderColor: '#ffffff',
                  borderType: 'solid',
                  borderWidth: 1,
                }
              }, {
                yAxis: that.warn.red
              }],
              [{
                yAxis: that.warn.yellow,
                name: '黄色预警',
                itemStyle: {
                  color: 'rgba(255,255,1,0.7)'
                },
                label: {
                  // position: ['95%', '10%'],
                  borderRadius: [50, 50, 50, 50],
                  padding: [4, 10, 3, 10], // padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
                  borderColor: '#ffffff',
                  borderType: 'solid',
                  borderWidth: 1,
                }
              }, {
                yAxis: that.warn.orange
              }],
              [{
                yAxis: that.warn.blue,
                name: '蓝色预警',
                itemStyle: {
                  color: 'rgba(12,192,242,0.7)'
                },
                label: {
                  // position: ['95%', '10%'],
                  borderRadius: [50, 50, 50, 50],
                  padding: [4, 10, 3, 10], // padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
                  borderColor: '#ffffff',
                  borderType: 'solid',
                  borderWidth: 1,
                }
              }, {
                yAxis: that.warn.yellow
              }],
              [{
                yAxis: '100',
                itemStyle: {
                  color: 'rgba(224,79,35,0)'
                },
                label: {
                  show: false
                }
              }, {
                yAxis: that.warn.blue
              }],
            ]
          }