使用graphic组件给echarts中插入自定义的内容

最新推荐文章于 2025-02-27 00:00:00 发布

原创最新推荐文章于 2025-02-27 00:00:00 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Echarts图表中利用graphic组件自由添加时间文字，以增强图表的展示效果。通过配置series、title、legend、graphic、tooltip等选项，实现了在顶部右侧显示更新时间，并动态生成折线图数据。示例代码展示了具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请添加图片描述
图上标题右侧，时间文字使用了graphic组件。可以自由给echarts在任意位置加入一段文字一种图形或者效果。
其实写在副标题里也是可以的，个人觉得不是很好。
第一次使用graphic，配置项：

renderEcharts(item, index) {
                console.log(item, index)
                let series = [];
                // 动态生成series
                function seriesObj(name,data){
                    let obj ={
                        name: name,
                        data: data,
                        type: "line",
                        symbol: 'circle'
                    }
                    return  obj;
                }
                this.seriesData.forEach((ele)=>{
                     series.push(seriesObj(ele.seriesName, ele.data))
                });

                var drawChart = this.$echarts.init(this.$refs.chartBox);
                let option = {
                    title : {
                        show: true,
                        text: item.kpiName, // 每个详细指标的名
                        textStyle: {
                            color: '#000',/*默认#000 可以不写*/
                            fontSize: '16'
                        },
                        top: '5%',
                        left: '3%',
                    },
                    legend: {
                        show: true,
                        left: '3%',
                        top: '17%',
                        itemHeight: '5',
                        selectedMode: false,
                        textStyle: {
                            color: '#666',
                            fontSize: '.14rem',
                        },
                    },
                    graphic:{
                        type: 'text',
                        z: 100,
                        style: {
                            text: item.update,
                            font: '.14rem PingFangSC-Regular',
                            fill: '#B1B1B1'
                        },
                        top: '17%',
                        right: '2%'
                    },
                    grid: {
                        top: '40%',
                        left: '5%',
                        right: '2%',
                    },
                    tooltip : {
                        trigger: 'axis',
                        formatter: function(params) {
                            var s=params[0]['axisValue']+ '<br/>'+'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params[0]["color"]+'"></span>'+params[0]['seriesName']+": "+params[0]['value']+"%"+'<br/>'+'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params[1]["color"]+'"></span>'+params[1]['seriesName']+": "+params[1]['value']+"%";
                            return s
                        }

                    },
                    color: ['#449073','#F4A302'],
                    xAxis : [{
                        axisLine: {lineStyle: {color: 'rgba(0,0,0,.15)'}},
                        offset: 0,
                        axisLabel: {show: true,color:'#999'},
                        type : 'category',
                        axisTick: {show: false},
                        data : ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
                    }],
                    yAxis : [{
                        type : 'value',
                        axisLine: {show: false},
                        axisLabel: {formatter: '{value}%',color: '#999',fontSize:12,'font-family': 'Helvetica'},
                        axisTick: {show: false},
                        splitLine:{show:true},
                        min: 0,
                        max: 100
                    }],
                    series : series
                };
                    drawChart.setOption(option)
            }