关于Echarts配置项的工作记录

1.Echarts饼图将数据显示在 legend旁边
配置项代码截图:
在这里插入111图片描述
lengend截图
完整代码:

              // 负载路数
            const loadControlWayOption = {
                // 主标题
                title: {
                    text: '负载路数统计'
                },
                // grid 直角坐标系内绘图网格
                grid: {
                    ...commonEchartStyle.grid
                },
                // 图列
                legend: {
                    formatter: (name) => {
                        var index = 0
                        var clientlabels = ['上行', '下行']
                        var clientcounts = this.LoadCtrlWayLengend
                        clientlabels.forEach(function (value, i) {
                            if (value === name) {
                                index = i
                            }
                        })
                        return name + ' :  ' + clientcounts[index]
                    },
                    right: 80,
                    ...commonEchartStyle.legendCommon
                },
                // x轴
                xAxis: {
                    data: this.loadControlXAxis,
                    ...commonEchartStyle.xAxisOption
                },
                yAxis: {
                    name: '(路)',
                    ...commonEchartStyle.yAxisOption
                },

                tooltip: {
                    // 移动鼠标显示实时数据
                    show: true,
                    trigger: 'axis'
                },
                series: [
                    {
                        ...commonEchartStyle.seriesUpOption,
                        data: this.loadControlWayUp,
                        lineStyle: {
                            width: 1
                        }
                    },
                    // 下行
                    {
                        ...commonEchartStyle.seriesDownOption,
                        data: this.loadControlWayDown,
                        lineStyle: {
                            width: 1
                        }
                    }
                ],
                color: ['#1496D0', '#00B17D']
            }        

实现效果截图:
在这里插入图片描述

2.修改echarts上下左右距离
修改前源码及效果截图↓
在这里插入图片描述
三四十
修改后源码及效果截图↓
在这里插入图11
在这里插入图片描述

活到老,学到老。 踏实+激情+坚持
原文地址:https://www.cnblogs.com/andyZhang0511/p/12246474.html