• echarts设置(持续更新)


    OrderOption: {
                    title: {
                        text: '订单走势图'//标题
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color:['#23B899','#FFACE2','#333FFF'],   //顶部小圆点颜色
                    legend: {
                        data: [
                            {
                                name: '订单量',
                                icon: 'circle'//顶部小圆点样式 圆圈 方块
                            },
                            {
                                name: '付款订单',
                                icon: 'circle'
                            },
                            {
                                name: '售后订单',
                                icon: 'circle'
                            }
                        ],
                        left: 'right',//顶部右侧
                        padding: [10, 60, 0, 0] // [5, 10, 15, 20]//顶部右侧挪动位置
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],//底部信息
                  axisLabel: { //设置轴线 文字 的属性(x轴和y轴 都是这个属性)
                                show: true,
                                textStyle: {
                                    color: '#777D9C', //更改坐标轴文字颜色
                                    fontSize: 12 //更改坐标轴文字大小
                                }
                            },
                            axisLine: { //设置 轴线 的属性(x轴和y轴 都是这个属性)
                                //x轴线的颜色以及宽度
                                show: true,
                                lineStyle: {
                                    color: '#777D9C',
                                     0,
                                    type: 'solid'
                                }
                            }, 
                  splitLine: { //设置网格线颜色 (x轴 和 y轴 都是这个属性)
                                show: true,
                                lineStyle: {
                                    color: ['#EAEBF0'],
                                     1,
                                    type: 'solid'
                                }
                            }

    }, yAxis: { type: 'value',
                max:500, //设置Y坐标轴最大值
    }, series: [ { name: '订单量', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210],//底部数据 lineStyle: { color: '#23B899' } }, { name: '付款订单', type: 'line', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310], lineStyle: { color: '#FFACE2' } }, { name: '售后订单', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410], lineStyle: { color: '#333FFF' } } ] }

    标题中添加按钮

    <!-- //柱状图 -->
            <div style="font-size: 12px; color: #999; box-sizing: border-box; margin-top: 24px; padding-right: 60px">
                <div class="v-card-body" style="position: relative">
                    <div class="engage">
                        <div class="payment nobgc" style=" 100%">
                            <div class="payment-one" style=" 100%">
                                <!-- // 地区分布  这里是echarts-->
                                <div id="box" ref="barg" style=" 100%; height: 400px"></div>
                            </div>
                        // 这里是按钮 <div style="z-index: 999; float: left; position: absolute; right: 60px; top: 20px; display: flex" > <div :class="[{ btn_selected: isBtn_1 }, 'btn_ps']" @click="dataStatistics(1)">客户群发统计</div> <div :class="[{ btn_selected: isBtn_2 }, 'btn_ps']" @click="dataStatistics(2, 'huoke')">智能获客统计</div> <div :class="[{ btn_selected: isBtn_3 }, 'btn_ps']" @click="dataStatistics(2, 'chat')">企微聊天统计</div> <div :class="[{ btn_selected: isBtn_4 }, 'btn_ps']" @click="dataStatistics(3)">客服下单咨询统计</div> </div> </div> </div> </div> </div>
    .btn_ps {
        height: 31px;
        background: #f3f3fb;
        border-radius: 4px;
        border: 1px solid rgba(135, 139, 146, 0.15);
        color: #6c7293;
        line-height: 31px;
        text-align: center;
        margin: 0 10px;
        font-size: 12px;
        padding: 0 10px;
    }
    .btn_selected {
        background: #4983f8;
        color: #ffffff;
    }
  • 相关阅读:
    网络编程
    常用模块补充
    面向对象进阶
    面向对象 --- 封装
    面向对象 三大特性--多态
    python 面向对象三大特性
    python 面向对象
    python 模块与包
    如何在Word的方框中打对号
    关于VS 2013连接Microsoft Access 2013的相关问题
  • 原文地址:https://www.cnblogs.com/xiaoxiaoxun/p/13802905.html
Copyright © 2020-2023  润新知