light-chart/adapt/theme.js

Charts for mobile visualization.

import F2 from "../src";

var color1 = '#E8E8E8'; // 坐标轴线、坐标轴网格线的颜色
const color2 = '#333333'; // 字体颜色
var fontSizeNative = 24;
var fontSizeLegend = 26;
var lineDash = 2, lineWidth = 1;
var pointSize = 3;
if (process.env.RUNTIME === 'miniapp') {
    color1 = '#E1E1E1';//小程序线条颜色太淡
    fontSizeNative = 12;
    fontSizeLegend = 13;
    lineDash *= __base__.config.env.dpr;
    lineWidth *= __base__.config.env.dpr;
    pointSize *= __base__.config.env.dpr;
}

// 坐标轴的默认样式配置
const defaultAxis = {
    label: {
        fill: color2,
        fontSize: fontSizeNative
    }, // 坐标轴文本的样式
    line: {
        stroke: color1,
        lineWidth: lineWidth,
        top: true
    }, // 坐标轴线的样式
    grid: {
        stroke: color1,
        lineWidth: lineWidth,
        lineDash: [lineDash]
    }, // 坐标轴网格线的样式
    tickLine: null, // 坐标轴刻度线，默认不展示
    labelOffset: 7.5 // 坐标轴文本距离坐标轴线的距离
};

//兼容小程序
var itemMarginBottom = 12, appendPadding = 18;

if (process.env.RUNTIME === 'miniapp') {
    itemMarginBottom *= __base__.config.env.dpr;
    appendPadding *= __base__.config.env.dpr;
}

const DEFAULT_CFG = {
    itemMarginBottom: itemMarginBottom,
    itemGap: 10,
    showTitle: false,
    titleStyle: {
        fontSize: fontSizeLegend,
        fill: color2,
        textAlign: 'start',
        textBaseline: 'top'
    },
    nameStyle: {
        fill: color2,
        fontSize: fontSizeNative,
        textAlign: 'start',
        textBaseline: 'middle'
    },
    valueStyle: {
        fill: color2,
        fontSize: fontSizeNative,
        textAlign: 'start',
        textBaseline: 'middle'
    },
    unCheckStyle: {
        fill: '#bfbfbf'
    },
    itemWidth: 'auto',
    wordSpace: 6,
    selectedMode: 'multiple' // 'multiple' or 'single'
};

const Theme = {
    fontFamily: '"Helvetica Neue", "San Francisco", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", sans-serif', // 默认字体
    defaultColor: '#1890FF', // 默认颜色
    pixelRatio: 1, // 默认像素比，具体参数由用户自己设置
    padding: 'auto', // 图表边距，默认自动计算
    appendPadding: appendPadding, // 默认留白，15 像素
    colors: [
        '#1890FF',
        '#2FC25B',
        '#FACC14',
        '#223273',
        '#8543E0',
        '#13C2C2',
        '#3436C7',
        '#F04864'
    ], // 默认色系
    shapes: {
        line: ['line', 'dash'],
        point: ['circle', 'hollowCircle']
    },
    sizes: [4, 10], // 默认的大小范围
    axis: {
        bottom: F2.Util.mix({}, defaultAxis, {
            grid: null
        }), // 底部坐标轴配置
        left: F2.Util.mix({}, defaultAxis, {
            line: null
        }), // 左侧坐标轴配置
        right: F2.Util.mix({}, defaultAxis, {
            line: null
        }), // 右侧坐标轴配置
        circle: F2.Util.mix({}, defaultAxis, {
            line: null
        }), // 极坐标下的圆弧坐标轴配置
        radius: F2.Util.mix({}, defaultAxis, {
            labelOffset: 4
        }) // 极坐标下的半径坐标轴配置
    }, // 各种坐标轴配置
    shape: {
        line: {
            lineWidth: 2 * lineWidth, // 线的默认宽度
            lineJoin: 'round',
            lineCap: 'round'
        }, // 线图样式配置
        point: {
            lineWidth: pointSize / 3,
            size: pointSize // 圆的默认半径
        }, // 点图样式配置
        area: {
            fillOpacity: 0.1
        } // 区域图样式配置
    },
    legend: {
        right: F2.Util.mix({}, DEFAULT_CFG),
        left: F2.Util.mix({}, DEFAULT_CFG),
        top: F2.Util.mix({}, DEFAULT_CFG),
        bottom: F2.Util.mix({}, DEFAULT_CFG),
        marker: {
            symbol: 'circle', // marker 的形状
            radius: 10 // 半径大小
        }
    },
    tooltip: {
        triggerOn: ['touchstart', 'touchmove'],
        // triggerOff: 'touchend',
        showTitle: false,
        showCrosshairs: false,
        crosshairsStyle: {
            stroke: 'rgba(0, 0, 0, 0.25)',
            lineWidth: 2
        },
        showTooltipMarker: true,
        background: {
            radius: 1,
            fill: 'rgba(0, 0, 0, 0.65)',
            padding: [3, 5]
        },
        titleStyle: {
            fontSize: fontSizeLegend,
            fill: '#fff',
            textAlign: 'start',
            textBaseline: 'top'
        },
        nameStyle: {
            fontSize: fontSizeLegend,
            fill: 'rgba(255, 255, 255, 0.65)',
            textAlign: 'start',
            textBaseline: 'middle'
        },
        valueStyle: {
            fontSize: fontSizeLegend,
            fill: '#fff',
            textAlign: 'start',
            textBaseline: 'middle'
        },
        showItemMarker: true,
        itemMarkerStyle: {
            radius: 5,
            symbol: 'circle',
            lineWidth: 1,
            stroke: '#fff'
        },
        layout: 'horizontal'
    },
    _defaultAxis: defaultAxis // 用于获取默认的坐标轴配置
};

// module.exports = Theme;
export default Theme;