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

139 阅读1分钟

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

vue 用eachart的smarkArea,设置 markArea样式:内边距、边框等_不想学习只想玩的博客-CSDN博客

 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
              }],
            ]
          }

image.png