echart 踩坑之路

资料

• echart 官网
• echart github 地址

漫漫踩坑路

1. 在低分辨率的电脑上使用时，出现文字和图表模糊的情况。

1. 问题解决前后的展示截图（截图被压缩了，实际效果比较明显）

显示模糊的展示截图
问题解决后的展示

2. 产生问题的原因

canvas 在使用的时候给的 width 和 height 与实际展示出来的宽高比例不为 1:1，造成像素值的偏离

canvas 标签截图

3. 解决问题

• 解决参考地址

echart github 项目中问题所回复的有效答案

image.png

• 具体添加代码

null, {devicePixelRatio: 2}

2. 隐藏掉柱形图表的数据分裂线，因为两次的比例不同造成重叠了

• 示例图片

隐藏前
隐藏后

• 设置的方法

option.yAxis[index].splitLine.show: false

3. 多种数据时 series[index] 引用不同的 yAxis 设置，以及在 series[index] 中嵌套数据

• 示例图片

示例图片

【月收入】数据使用的是左侧的数据作参考，【同比】使用的是右侧的百分比数据作参考，【TO】使用的也是左侧的数据作参考

• 总的展示方案：

【月收入】数据中单独展示出【TO】的一行数据，这两个数据都是以左侧为参照，【同比】数据单独展示，并 以右侧为参考

• option 配置代码展示

opation = {
    title: {
        text: '月收入趋势',
        textStyle: {
            fontSize: 17,
            fontWeight: 800,
            color: "#37394C"
        },
        left: '1%',
        top: "5%"
    },
    tooltip: {
        trigger: 'axis'
    },
    grid: {
        left: '2%',
        right: '2%',
        top: "20%",
        bottom: '5%',
        containLabel: true
    },
    legend: {
        data: ['月收入', '同比',
            {
                name: 'T0',
                icon: 'image:///static/img/module/index/S.png'
                        }
                    ],
        top: 15,
        selectedMode: false,
        formatter: function (data) {
            return data + "          ";
        }
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            },
            axisLine: {
                show: false,
                color: '#8795A8'

            },
            axisTick: {
                show: false
            },
            axisPointer: {
                type: 'line'
            },
            axisLabel: {
                textStyle: {
                    color: '#8795A8',
                }

            }
                }],
    yAxis: [
        {
            // 月收入 规则 
            type: 'value',
            min: 0,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: '{value}',

                textStyle: {
                    color: '#8795A8',
                }
            }
                },
        {
            // 同比 规则 
            type: 'value',
            min: -5,
            // 起始线是否显示
            axisLine: {
                show: false
            },
            // 起始线延长出的分裂线是否展示
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: '{value} %',
                textStyle: {
                    color: '#8795A8',
                }

            }
                    }
                ],
    series: [
        {
            name: '月收入',
            type: 'bar',
            color: '#3E82FE',
            barWidth: 20,
            // 嵌套【TO】数据
            markLine: {
                symbol: 'none',
                silent: false,
                itemStyle: {
                    normal: {
                        borderWidth: 2,
                        lineStyle: {
                            type: 'dashed',
                            color: '#D0021B',
                            width: 1.5
                        },
                    }

                },
                data: [{
                    yAxis: $T0
                        }]
            },
            data: $incom
                },
        {
            name: '同比',
            type: 'line',
            symbolSize: 8,
            color: '#01BF8F',
            // 使用【同比】规则
            yAxisIndex: 1,
            data: $percent
                    }
                ]
}