echart-graphic:更加个性化的图表

niko-ruo

于 2024-08-21 14:38:24 发布

阅读量344

点赞数 9

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_45439337/article/details/141392823

版权

问题来源

很多图表的设计过程中，美工有的时候设计得非常花里胡哨。导致实现起来有些麻烦。
例如：
在这里插入图片描述

解决方法

采用echart的graphic，graphic 是原生图形元素组件。这个属性是一个数组，可以采用多个元素。元素像背景图片一样覆盖在echart整个div上。
代码：

let risk_bottomImageUrl = require('@/assets/bigscreen/riskCockpit/risk_bottom1.png')

graphic: {
            elements: [{
              type: 'image',
              style: {
                image: risk_bottomImageUrl,
                width: 170,
                height: 90
              },
              left: 'center',//
              top: 'bottom' //配置图片居中
            }]
          },