• 关于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
    在这里插入图片描述

    活到老,学到老。 踏实+激情+坚持
  • 相关阅读:
    Javascript操作DOM常用API总结
    实用技巧之Visio绘制流程框图
    实用技巧之Visio绘图
    回复《竞赛部的一封信》
    学习之路
    《软件工程》上课精华分享
    《编译原理》上课笔记2
    sql server2008 远程过程调用失败
    《编译原理》上课笔记1
    python的第五天(复习数据类型)
  • 原文地址:https://www.cnblogs.com/andyZhang0511/p/12246474.html
Copyright © 2020-2023  润新知