charts 没有数据的页面

HighchartsNoData

import Highcharts from "highcharts";
import HighchartsNoData from "highcharts/modules/no-data-to-display";
HighchartsNoData(Highcharts);


const config = highchartsNoData();
Highcharts.chart(el, config);

export function highchartsNoData() {
    return {
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        chart: {
            backgroundColor: "rgba(18 ,126, 250,0.2)",
            marginLeft: 60
        },
        lang: {
            noData: "暂无数据"
        },
        noData: {
            attr: {}, //Object,没有数据标签的 SVG 属性集合
            position: { x: 0, y: 0, align: "center", verticalAlign: "middle" },
            style: {
                fontSize: "1rem",
                fontWeight: "bold",
                color: "#fff"
            },
            useHTML: false
        }
    };
}

chartsNoData

const myChart = echarts.init(document.getElementById("el"));
myChart.setOption(echartsNoData);

export const echartsNoData = () => {
    return {
        title: {
            text: "暂无数据",
            x: "center",
            y: "center",
            textStyle: {
                color: "#ccc",
                fontWeight: "normal",
                fill: "#9d9d9d",
                fontWeight: "bold",
                text: "暂无数据",
                fontFamily: "Microsoft YaHei",
                fontSize: "1rem"
            }
        }
    };
}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序 charts报表统计页面源码可以通过以下步骤实现: 1. 首先,在小程序的pages文件夹下新建一个名为charts的文件夹,用于存放报表统计页面的相关代码和资源文件。 2. 在charts文件夹下新建一个名为charts.wxml的文件,用于编写报表统计页面的结构。可以借助微信小程序提供的基础组件和第三方组件库,如echarts组件库,来实现图表展示的功能。在wxml中可以定义图表容器的大小、样式以及对应的id,供后续在js文件中引用。 3. 在charts文件夹下新建一个名为charts.wxss的文件,用于编写报表统计页面的样式。可以设置图表容器的大小、边框、背景色等样式属性,以及图表的颜色、线条粗细等样式属性,以便展示出符合需求的报表效果。 4. 在charts文件夹下新建一个名为charts.js的文件,用于编写报表统计页面的逻辑。可以通过引入echarts组件库,以及相关图表数据的获取和处理,来实现报表的生成和更新。在js文件中可以编写相应的函数,用于实现图表的初始化、数据的处理和图表的更新。 5. 在小程序的app.json文件中注册charts页面,并设置其相关配置,如页面路径、顶部导航栏的背景色、文字颜色等。 6. 最后,在小程序的其他页面中,通过按钮或其他方式导航到charts页面,即可看到相应的报表统计页面。 通过以上步骤的实现,我们可以得到一个简单的微信小程序charts报表统计页面源码。可以根据具体需求,进一步优化和扩展报表的展示和功能,以及完善代码的逻辑和效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WebCsDn_TDCode

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值