echart 图表编写笔记

动画

animationDelay: 500, // 动画延迟
animationDuration: 3000, // 动画持续时间
animationEasing: 'linear', // 动画类型

x轴

与y轴的间隙

// 渲染区域与y轴之间是否有间隙
boundaryGap: this.lineChartOption.boundaryGap,

x轴

{
   
    type: 'category',
    // 渲染区域与y轴之间是否有间隙
    boundaryGap: this.lineChartOption.boundaryGap,
    // x轴样式
    axisLine: {
    // 坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
   
            color: 'rgba(98, 105, 115, .8)',
            width: 2, // x轴的轴线的宽度
        },
    },
    // x轴的刻度值
    axisLabel: {
    // 坐标轴刻度标签的相关设置
        // x轴刻度值的文字的样式
        textStyle: {
   
            color: 'rgba(217, 244, 255,.8)',
            fontSize: 14,
            fontFamily: 'REEJI',
            fontWeight: 400,
        },
        // x轴刻度值的返回格式
        formatter: function formatter(data) {
   
            return data;
        },
    },
    // 分割线
    splitLine: {
   
        show: false, // 是否展示分割线
        // 分割线的样式
        lineStyle: {
   
            color: '#192a44',
        },
    },
    // 是否展示刻度值线
    axisTick: {
   
        show: false,
    },
    // 数据源
    data: this.lineChartOption.xLabel,
}

y轴

yAxis: [
    {
   
        name: this.lineChartOption.yAxisuint, // y轴的名称
        min: 0, // y轴刻度值的最小值
        // y轴的分割线，分割线使用于象限中
        splitLine: {
   
            show: true,
            // 分割线的样式
            lineStyle: {
   
                color: '#192a44',
            },
        },
        // 坐标轴的分割段数，此处只是个预估值，最后显示的实际段数会在此预估值基础上根据分割后的坐标轴的刻度显示的易读程度作调整
        splitNumber: 4,
        // 分割线的样式
        axisLine: {
   
            show: true,
            lineStyle: {
   
                color: '#233653',
            },
        },
        // y轴的刻度值
        axisLabel: {
   
            show: true,
            // 文字样式
            textStyle: {
   
                color: 'rgba(217, 244, 255,.8)',
                fontSize: 14,
                fontFamily: 'REEJI',
                fontWeight: 400,
            },
            // y轴刻度值与y轴的距离
            margin: '3',
            // 返回的数据格式处理
            formatter: function formatter(value) {
   
                if (value === 0) {
   
                    return value;
                }
                return value;
            },
        },
        // 是否展示刻度线
        axisTick: {
   
            show: false,
        },
        // 标题的展示位置，start还是end
        nameLocation: 'end',
        // 标题的样式
        nameTextStyle: {
   
            // 字体的间距
            padding: this.lineChartOption.yAxisNamepadding,
            color: 'rgba(217, 244, 255,.8)',
            fontSize: 14,
            fontFamily: 'REEJI',
            fontWeight: 400,
        },
    },
],

多y轴时

使用哪个轴 yAxisIndex

yAxis: [
    {
   
        type: 'value',
        // 使用哪个轴
        yAxisIndex: 0,
    },
    {
   
        type: 'value',
        splitNumber: 4,
        yAxisIndex: 1,
    },
],
series: [
    {
   
        name: '使用量',
        data: this.lineData,
        type: 'line',
        yAxisIndex: 0,
    },
    {
   
        name: '使用率',
        data: this.lineData2,
        type: 'line',
        yAxisIndex: 1,
    },
],

legend图例

// 图例一般为: 文字+ 图标
legend: {
   
    align: 'right', //图标在右
    right: this.lineChartOption.legendOption.right, // 图例距离左边的位置
    top: this.lineChartOption.legendOption.top, // 图例距离上边的位置
    type: 'plain', // 图例的类型，plain是普通图例，scroll 适用于图例很多，然后可以滚动
    // 图例的文字的样式
    textStyle: {
   
        color: 'rgba(217, 244, 255, .8)',
        fontSize: 13,
        fontFamily: 'REEJI',
        fontWeight: 400,
    },
    // 每个图标的间隔
    itemGap: 20,
    // 每个图标的宽度
    itemWidth: 17,
    // 每个图标的高度
    itemHeight: 3,
    // 图例使用svg图片的svg的path路径，svg路径可以去阿里矢量图标库下载svg图片文件中查看svg源码
    icon: 'path://M190.15616 0m256 0l0 0q256 0 256 256l0 512q0 256-256 256l0 0q-256 0-256-256l0-512q0-256 256-256Z',
    // 禁止图例的点击事件
    selectedMode: false,
    // 图标和文字之间的间距
    formatter: function (name) {
   
       return '      ' + name;
   },
},

图例用图片

legend: {
   
    show: true,
    icon: 'rect'